Presented at HoustonJS http://www.meetup.com/houston-js/events/203757092/ On the fence about building hybrid apps? Let me convince you to take the leap. I’ll discuss the process we use at Poetic Systems and demonstrate with a live coding example.

1. Building Hybrid
apps with
Ember

2. @jakecraige

3. Photo © 2012 J. Ronald Lee. jronaldlee.com Why?

4. Cross P l a t f o r m

5. WEB

6. Easy & Fast

7. It’s the Future http://1.bp.blogspot.com/_RHK3n3Uireo/TEUDDQK0Y4I/AAAAAAAAAR4/7g3a7t2xQ1s/s1600/destination_moon3.jpg

8. Hybrid
vs.
Native

9. Native
Walmart Amazon Instagram

10. Native
Android: RelativeLayout
iOS: UINavigationBar
Walmart Amazon Instagram

11. Native
Android: TabHost
iOS: UITabBar
Walmart Amazon Instagram

12. Native
Android: ListView
iOS: UITableView
Walmart Amazon Instagram

13. Hybrid
Worth It EventAssist BeautyNow

14. Hybrid
Sticky Header
Worth It EventAssist BeautyNow

15. Hybrid
Sticky Footer
Worth It EventAssist BeautyNow

16. Hybrid
html UL
Worth It EventAssist BeautyNow

17. Hybrid
html UL, DIV
Worth It EventAssist BeautyNow

18. Hybrid
html UL, DIV, SPANs?
Worth It EventAssist BeautyNow

19. Hybrid
html UL, DIV, SPANs?
WHATEVER
Worth It EventAssist BeautyNow

20. html UL, DIV, SPANs? CSS
Hybrid
Worth It EventAssist BeautyNow

21. Convince theBoss

22. Why? Recap
• Cross Platform
• Web
• Easy & Fast
• The Future

23. What do we need?

24. Framework

25. I’m a framework
http://carefullycrafted.net/images/Ember.js_Logo_and_Mascot.png

26. I’m a framework
It’s lonely out here.
In Defense of Frameworks - http://youtu.be/jScLjUlLTLI
http://carefullycrafted.net/images/Ember.js_Logo_and_Mascot.png

27. Native

28. Cordova
Web to Native
http://wpmedia.digitoffee.com//2014/02/PhoneGapLogo.png
http://cordova.apache.org/images/cordova_bot.png

29. http://wpmedia.digitoffee.com//2014/02/PhoneGapLogo.png
http://cordova.apache.org/images/cordova_bot.png
Cordova

30. Builds

31. http://nodejs.org/images/logo.svg

32. Excellent build tooling
http://nodejs.org/images/logo.svg

33. Automation

34. ember-cli
http://thau.me/wp-content/uploads/2014/01/tomster-under-construction.png

35. ember-cli
& ember-cli-cordova
http://thau.me/wp-content/uploads/2014/01/tomster-under-construction.png

36. ember-cli
& ember-cli-cordova
http://thau.me/wp-content/uploads/2014/01/tomster-under-construction.png

37. Tooling Recap
• Ember
• Cordova
• ember-cli
• ember-cli-cordova

38. Let's build a
Coffee App

39. Let's build a
Coffee App

40. App Setup

42. Application
Code

44. Build
Deploy
&

46. Thanks, Questions?
@jakecraige https://github.com/jakecraige/ordrr