From website to mobile app - a journey

  • 1,719 views
Uploaded on

When you are about to make the step from developing web apps to making mobile apps, you should consider using a hybrid technology approach. …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,719
On Slideshare
0
From Embeds
0
Number of Embeds
6

Actions

Shares
Downloads
7
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. From web sitesto web appsto mobile apps An interesting journey
  • 2. The past: Web sites
  • 3. Today: Web apps
  • 4. 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
  • 5. Going mobileWith web technologies
  • 6. Pick one First fundamental question: HTML / CSS / JS vs. Pure JavaScript
  • 7. Pick one First fundamental decision: HTML / CSS / JS vs. Pure JavaScript
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. Our stack Rails-API Angular JS Lungo PhoneGap
  • 12. Our stack Rails-API Angular JS Lungo-Angular-Bridge Lungo PhoneGap
  • 13. Whats the bridge? Lungo Angular Routing
  • 14. Two choices:● I want the Lungo routing ○ The Angular-Lungo-Adapter is for you● I want the Angular routing ○ There is nothing for that
  • 15. Two choices:● I want the Lungo routing ○ The Angular-Lungo-Adapter is for you● I want the Angular routing ○ There was nothing for thatCentralway proudly presents...
  • 16. Lungo-Angular-Bridge Batteries included!https://github.com/centralway/lungo- angular-bridge
  • 17. LAB - 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
  • 18. Batteries included - get going!
  • 19. Demo time!Fasten your seatbelts
  • 20. Experiences & Learnings from us
  • 21. Things you may hear● "But its soo slooooow"● "What if you need something native?"● "How does deployment work?"● "But it wont look&feel native!"
  • 22. Things you may say● "But its soo slooooow"○ Only in a few cases, e.g. SVG on iPhone 4● "What if you need something native?"○ You can do that >> Phonegap Plugins● "How does deployment work?"○ Either manually or via App Stores● "But it wont look&feel native!"○ This depends solely on the UI Framework used - e.g. Lungo makes it feel native
  • 23. In the trenchesThe pitfalls of mobile development
  • 24. Round 1: iframes vs. iOS<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
  • 25. Round 1: iframes vs. iOS● 4 possible solutions a. using "access" rule in Config.xml b. using "InApp-Browser" (window.open) c. specify target="_self" for iframe d. using ChildBrowser plugin
  • 26. Round 1: iframe vs. iOS● 4 possible solutions a. using "access" rule in Config.xml b. using "InApp-Browser" (window.open) c. specify target="_self" for iframe d. using ChildBrowser plugin
  • 27. Round 2: "HTML5 routing"$locationProvider.html5Mode(true);
  • 28. 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 ("/...")
  • 29. General conclusions● PhoneGap plugins <3 ○ when it doesnt exist in PhoneGap ○ when it is too slow in HTML / CSS / JS● Active communities & many resources● Web is a powerful platform
  • 30. 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