From web sitesto web appsto mobile apps
An interesting journey
The past: Web sites
Today: Web apps
Today: Web apps
● Single page applications● Communication via API● "Backend as a service"● Client side MV*-Frameworks● Templates rendered on the client● Data on the wire
Going mobile
With web technologies
Pick one
First fundamental question:
HTML / CSS / JSvs.
Pure JavaScript
Pick one
First fundamental decision:
HTML / CSS / JSvs.
Pure JavaScript
A tough choice● Javascript MV* Libraries / Frameworks
○ Backbone○ Ember○ Knockout○ Angular
● UI Frameworks○ Lungo○ Kendo○ jQTouch○ jQuery mobile
● Deployment frameworks○ PhoneGap○ Sencha○ Calatrava○ The M-Project
A tough choice● Javascript MV* Libraries / Frameworks
○ Backbone○ Ember○ Knockout○ Angular
● UI Frameworks○ Lungo○ Kendo○ jQTouch○ jQuery mobile
● Deployment frameworks○ PhoneGap○ Sencha○ Calatrava○ The M-Project
Problems with picking the right mix
● overlap between the three:○ multiple frameworks trying to be clever○ e.g. Calatrava: Deployment & UI○ e.g. Kendo: MVVM & UI
● finding good combinations:○ Knockout & Lungo○ Knockout & Kendo○ Angular & iUI○ Angular & Lungo
Our stack
Rails-APIAngular JS
LungoPhoneGap
Our stack
Rails-APIAngular JS
Lungo-Angular-BridgeLungo
PhoneGap
What's the bridge?
Lungo Angular
Routing
Two choices:
● I want the Lungo routing○ The Angular-Lungo-Adapter is for you
● I want the Angular routing○ There is nothing for that
Two choices:
● I want the Lungo routing○ The Angular-Lungo-Adapter is for you
● I want the Angular routing○ There was nothing for that
Centralway proudly presents...
Lungo-Angular-BridgeBatteries included!
https://github.com/centralway/lungo-angular-bridge
● Allows to use Lungo fancyness together with Angular awesomeness
● Use Angular routes but leverage Lungo transitions
● Comes with a set of examples● Extends Angular with the lab-view directive
LAB - Lungo Angular Bridge
Batteries included - get going!
Demo time!Fasten your seatbelts
Experiences & Learnings from us
Things you may hear
● "But it's soo slooooow"
● "What if you need something native?"
● "How does deployment work?"
● "But it won't look&feel native!"
Things you may say
● "But it's soo slooooow"
● "What if you need something native?"
● "How does deployment work?"
● "But it won't look&feel native!"
○ Only in a few cases, e.g. SVG on iPhone 4
○ You can do that >> Phonegap Plugins
○ Either manually or via App Stores
○ This depends solely on the UI Framework used - e.g. Lungo makes it feel native
In the trenches
The pitfalls of mobile development
<iframe src="http://example.com"></iframe>
<a href="http://somesite.com" target="_blank">Open</a>
What will happen?● Android
○ iframe loads in the page○ link opens a browser window
● iOS○ "stay-in-webview=false" (default)
■ iframe opens a new browser window■ link opens a new browser window
○ "stay-in-webview=true"■ iframe opens in the page■ link opens in the page
Round 1: iframes vs. iOS
Round 1: iframes vs. iOS
● 4 possible solutionsa. using "access" rule in Config.xmlb. using "InApp-Browser" (window.open)c. specify target="_self" for iframed. using ChildBrowser plugin
Round 1: iframe vs. iOS
● 4 possible solutionsa. using "access" rule in Config.xmlb. using "InApp-Browser" (window.open)c. specify target="_self" for iframed. using ChildBrowser plugin
Round 2: "HTML5 routing"$locationProvider.html5Mode(true);
Round 2: "HTML5 routing"$locationProvider.html5Mode(false);
● HTML 5 routing not supported properly○ weird behaviour○ non-routing relating things go wrong○ no error messages / warnings
● Setting to "false" uses "#/..."-style routing instead of "real" routing ("/...")
General conclusions
● PhoneGap plugins <3○ when it doesn't exist in PhoneGap○ when it is too slow in HTML / CSS / JS
● Active communities & many resources● Web is a powerful platform
Wrap-up
● Mobile is on the rise● Web technologies rock!● Find the right mix of Frameworks for your
needs is hard● Be aware of potential pitfalls● Leverage the active communities to work
around problems
Top Related