An introduction to Sencha Touch

A talk I gave at London Sencha Touch user group January 2012, giving a brief overview into Sencha Touch, what it can do for you and why and when you should be using it.

Transcript

1. An introduction to Sencha Touch @patrickhamann January 2012 Friday, 27 January 12
2. What we’ll be covering •What is Sencha Touch •What it can do for you •When and when not to use it •Tips Friday, 27 January 12
3. Lots of frameworks Friday, 27 January 12
4. What is it? Friday, 27 January 12
5. A HTML5 Javascript framework •Built with open web standards •Utilising HTML5 Javascript API’s •Targeted at Mobile webkit: •iOS, Android, Blackberry and Palm •Write once, run everywhere •Plays nice with Phonegap Friday, 27 January 12
6. The new mobile web application Source: James Pearce Friday, 27 January 12
7. Traditional vs Mobile application stack Rendering UI UI Business Storage UI UI Business Storage Security Storage Sync Friday, 27 January 12
8. UI Toolkit UI Toolkit •Components - Lists, tabs, buttons, overlays •Touch events - Native, Event management, physics •Fully customisable and theme-able with SASS Friday, 27 January 12
9. Application logic Application architecture •MVC - Model, view, controller •Ext4 - Class system (Sencha Touch 2) •Extendable Friday, 27 January 12
10. Storage Data everywhere! •Offline storage - in-memory, session or persistent local •Ajax and JSONP •RESTful Readers & Proxies Friday, 27 January 12
11. Demo time. Friday, 27 January 12
12. Navigation and tabs Friday, 27 January 12
13. Lists Friday, 27 January 12
14. Forms Friday, 27 January 12
15. Carousel Friday, 27 January 12
16. Overlays and action sheets Friday, 27 January 12
17. Overlays and action sheets Friday, 27 January 12
18. Layouts Fit Card hbox vbox Source: Craig Walker Friday, 27 January 12
19. Theming Source: David Kaneda Friday, 27 January 12
20. Theming Source: James Pearce Friday, 27 January 12
21. Phonegap •Package for native deployment •Open source •WebUIView •Creates javascript access to native API’s •Camera, Sensors, file, network http://www.phonegap.com Friday, 27 January 12
22. When can i use it? So when can i use it? Friday, 27 January 12
23. Think first •Bandwidth? •Latency? - Does your data change? •Native vs Web? •Processor? Friday, 27 January 12
24. Why you should •Cross-platform •Touch events and gestures •Data manipulation •Native experience •JS engines are getting fast, very fast Friday, 27 January 12
25. Getting started & tips Friday, 27 January 12
26. Getting started •Read the documentation - it’s amazing •Ask in the forums •Read the source •Learn to love SASS •Test on mobiles, soon and often •Be an active member of this user group! Friday, 27 January 12
27. Performance is key •Build tools - concatenate, minify & compress •Cache - appCache manifest, local data •Watch your DOM - destroy everything •Remove un-used library css Friday, 27 January 12
28. Go forth and make! Friday, 27 January 12
29. Thankyou. Any questions? @patrickhamann Friday, 27 January 12