Building Cross Platform Mobile Apps with Sencha Touch

A recent talk I did at the inaugural London Sencha Touch User Group.

Transcript

1. Building Cross Platform Mobile Apps with Sencha Touch! Rob Squires! Jan 2012!
2. Rob Squires! Developer @uv_d! LAMP, Sencha! NodeJS , CouchDB! @rob_squires!
3. Today! Basics of Sencha Touch! ! Look at cross platform challenges! ! Share some code! !
4. Context!
5. Mobile Betting App! Web service driven! White labeled! Deployed cross-platform! Web! iOS! Android!
6. Vanilla Sencha Touch App! app.js!
7. Vanilla Sencha Touch App! controller/Main.js!
8. Vanilla Sencha Touch App! view/Main.js!
9. Approaching Cross Platform!
10. Breakdown! Platform! Web! Android! iOS! Blackberry! others…! Form Factor! Phone! Tablet! others…!
11. Challenges! Native Languages + Deployment! Device APIs! UI Design Patterns! Duplication!
12. Challenges! Native Languages + Deployment! Device APIs! UI Design Patterns! Duplication!
13. Device APIs!
14. Device APIs! HTML5 + Javascript! ! ! iOS! ! ! Android!
15. Phonegap! Proxies native code! Javascript navigator & document objects! Plugins! Kick-starts a web view!
16. Vanilla ST + Phonegap! http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap! ??!
17. Vanilla ST + Phonegap! controller/Main.js!
18. UI Design Patterns!
19. Interface Guidelines! iOS Human Interface Guidelines! Android Design Patterns! Others..! ! Designing Mobile Interfaces - O’Reilly!
20. Great resource! www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design!
21. Look & Feel - Differences!
22. Look & Feel - Facebook! http://www.zdnet.com/blog/facebook/facebook-for-android- passes-facebook-for-iphone-dau/6440
23. Look & Feel in ST! Theming with CSS! Very effective! Vimeo Awards! Chefkoch.de!
24. Look & Feel in ST! Theming with CSS! Very effective!
25. Look & Feel in ST! ios   android   web   app   app.css   Sass! (.scss)! Juicy! CSS!! Compass! sencha  
26. Interaction! Back buttons! Contextual Controls!
27. Back’s not cross platform!
28. Back in ST! controller/Main.js!
29. Back again! Abstract UI events! Starting with HW : “App-back” controller/Main.js!
30. Back again! view/Main.js!
31. Back again! Device.js!
32. Contextual Controls! iOS! ! Android!
33. Contextual Controls - Evernote! iOS App! Android App!
34. Contextual Controls in ST! view/Main.js! ouch!!
35. Platform specific views! Split view components based on platform!
36. Ext.Loader! Define! ! Require! ! Create!
37. Summing Up! Cross platform could be endless! ! Choose your APIs! ! Write platform specific code in context! !
38. Thanks! Time for questions?! ! @rob_squires! @uv_d!