Hybrid mobile app in minutes not days


Web-5 Conference 2013

Web-5 Conference 2013
Corinne Krych

alias Athos


@corinnekrych
corinnekrych@gmail.com
https://github.com/corinnekrych

Fabrice Matrat

alias Porthos


@fabricematrat
fabricematrat@gmail.com
https://github.com/fabricematrat

 

3musket33rs

What about Aramis and D'artagnan?

Sebastien Blanc
@sebi2706

Mathieu Bruyen
@mathbruyen

Which one...
is a hybrid mobile web app?


  • Hybrid/Web app
  • web app
  • native Android
  • native iOS

What are ...

the challenges of mobile web apps?

Size matters...




Responsive Web Design
  • ✔ Viewport and device size
    <meta name="viewport" content="width=device-width,
        initial-scale=1, maximum-scale=1"/>
    
  • ✔ Media queries
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        .iphone4 { /* high DPI */}
        }
    
  • ✔ Flexible images








  • Do It Yourself approach or...

Which tools?

Progressive enhancement

Interactions

Geolocation

Surviving offline

Before web2.0


Modern web app


Mobile Web App


Synchronise


Push


Going native

... as hybrid

Hybrid

Cordova Build
What about ...

the 3musket33rs?


Grails Plugin System

✔ 1000+ plugins
✔ Modularized app architecture
✔ Reuse established Java libraries

Convention over Configuration

✔ No XML conf
✔ 80 / 20 rule
✔ Don't repeat yourself

Domain Driven Design



✔ Focus on the domain,
rather than technology

✔ Rapid prototyping

✔ Adaptable architecture



Magic Scaffolding

Grails Mobile Plugin

jQuery Mobile scaffolding
by R. Fletcher & S. Blanc
Geolocation
by S. Blanc
Spring mobile
by S. Blanc
HTML5 mobile scaffolding
by 3musket33rs
PhoneGap build
by 3musket33rs

3musket33rs.github.com