from website to mobile app - a journey
DESCRIPTION
When you are about to make the step from developing web apps to making mobile apps, you should consider using a hybrid technology approach. The use of web technologies to build "native" mobile apps is a journey with a lot of choices to make and questions to answer. This presentation tells you, how we made our decisions and what options we had been looking at. It also introduces the Lungo-Angular-Bridge we use to bring together the best of Lungo and Angular to make mobile apps that rock.TRANSCRIPT
![Page 1: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/1.jpg)
From web sitesto web appsto mobile apps
An interesting journey
![Page 2: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/2.jpg)
The past: Web sites
![Page 3: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/3.jpg)
Today: Web apps
![Page 4: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/4.jpg)
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
![Page 5: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/5.jpg)
Going mobile
With web technologies
![Page 6: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/6.jpg)
Pick one
First fundamental question:
HTML / CSS / JSvs.
Pure JavaScript
![Page 7: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/7.jpg)
Pick one
First fundamental decision:
HTML / CSS / JSvs.
Pure JavaScript
![Page 8: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/8.jpg)
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
![Page 9: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/9.jpg)
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
![Page 10: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/10.jpg)
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
![Page 11: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/11.jpg)
Our stack
Rails-APIAngular JS
LungoPhoneGap
![Page 12: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/12.jpg)
Our stack
Rails-APIAngular JS
Lungo-Angular-BridgeLungo
PhoneGap
![Page 13: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/13.jpg)
What's the bridge?
Lungo Angular
Routing
![Page 14: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/14.jpg)
Two choices:
● I want the Lungo routing○ The Angular-Lungo-Adapter is for you
● I want the Angular routing○ There is nothing for that
![Page 15: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/15.jpg)
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...
![Page 16: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/16.jpg)
Lungo-Angular-BridgeBatteries included!
https://github.com/centralway/lungo-angular-bridge
![Page 17: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/17.jpg)
● 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
![Page 18: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/18.jpg)
Batteries included - get going!
![Page 19: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/19.jpg)
Demo time!Fasten your seatbelts
![Page 20: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/20.jpg)
Experiences & Learnings from us
![Page 21: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/21.jpg)
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!"
![Page 22: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/22.jpg)
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
![Page 23: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/23.jpg)
In the trenches
The pitfalls of mobile development
![Page 24: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/24.jpg)
<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
![Page 25: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/25.jpg)
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
![Page 26: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/26.jpg)
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
![Page 27: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/27.jpg)
Round 2: "HTML5 routing"$locationProvider.html5Mode(true);
![Page 28: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/28.jpg)
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 ("/...")
![Page 29: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/29.jpg)
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
![Page 30: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/30.jpg)
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
![Page 31: From website to mobile app - a journey](https://reader033.vdocuments.net/reader033/viewer/2022042813/54949494ac79590e2e8b4c53/html5/thumbnails/31.jpg)