HTML5 and Sencha Touch
3 likes1,522 views
The document provides an overview of HTML5 and the Sencha Touch framework for developing mobile applications. Some key points covered include: - HTML5 is a collection of technologies that enable innovative web applications across mobile and desktop. It allows for offline storage, device access, better connectivity and multimedia compared to earlier standards. - Sencha Touch is a mobile-centric HTML5 framework that provides components, containers and other tools to build cross-platform mobile apps using web technologies like HTML5, CSS and JavaScript. - It features a robust class system and many pre-built widgets. The framework also supports layout managers and customizable designs. - Examples are given of real-world apps developed with Sencha Touch, including how they
HTML5 and Sencha Touch
- 1. Wednesday, December 7, 11
- 2. About us Wednesday, December 7, 11
- 3. What is HTML5 A collection of technologies sparking a revolution of innovation and application development across the web! Wednesday, December 7, 11
- 4. Why HTML5? • Power behind the best next generation applications! • Mobile and desktop web • Is slowly killing Adobe Flash & Silverlight • Biggest Leap in web technologies • Latestversions of all major browsers support Most HTML5 features Wednesday, December 7, 11
- 5. Latest news -Danny Winokur, Adobe’s vice president and general manager of interactive development http://bits.blogs.nytimes.com/2011/11/09/adobe-to-kill-mobile-flash-focus-on-html5/ Wednesday, December 7, 11
- 6. HTML5 brings • Better HTML semantics • Offline storage • Device access • Better connectivity • Multimedia • Native graphics access • Better performance • CSS3 Wednesday, December 7, 11
- 7. Better HTML Semantics • Richer set of HTML tags • Microdata • Microformats Wednesday, December 7, 11
- 8. Offline Storage • App cache • Local storage • Session storage • Web database Wednesday, December 7, 11
- 9. Device Access • Geo Location • Accelerometer • Audio input/Camera • Compass (iOS 5) Wednesday, December 7, 11
- 10. Better connectivity • Native web sockets Wednesday, December 7, 11
- 11. Multimedia • Audio • Video • h.264 / WebM Wednesday, December 7, 11
- 12. Native Graphics access • SVG, Canvas, VML • CSS3 3D animations • WebGL Wednesday, December 7, 11
- 13. Better performance • WebWorkers • Threaded JavaScript • XHR2 • Blob • Chunked data • Cross domain requests Wednesday, December 7, 11
- 14. CSS3 • Better and faster layouts • Native transitions • hardware accelerated 3D • Gradients • Web Open Font Format Wednesday, December 7, 11
- 15. Why HTML5? Wednesday, December 7, 11 ?
- 16. Choose HTML5 if: • Developing an app with limited resources • Application is to live on mobile devices • Deploy an application without the limitations of app stores • Application must be accessible anywhere • Want to leverage existing skill sets (HTML5, CSS, JavaScript) Wednesday, December 7, 11
- 21. What is Sencha Touch • The first and best mobile- centric HTML 5 framework • Provides the foundation to develop kick ass cross platform mobile Web apps • Built on the best Web Standards Wednesday, December 7, 11
- 22. A peek under the hood Initialization • Full Component lifecycle • Well designed class inheritance model Render Destruction • Observable event model AbstractComponent • Components and elements Component container.AbstractContainer • Elaborate Container model Container • Configureable layout managers panel.AbstractPanel Panel Wednesday, December 7, 11
- 23. Robust class system • Simple class registration Ext.Base • Automatic Name Spacing Mixin Mixin • Class dependency system • Dynamic class loading MyClass Wednesday, December 7, 11
- 24. Lots of widgets Text field Number field Spinner Slider Checkbox DatePicker Password Select Toggle field URL field Radio field Email field Textarea Wednesday, December 7, 11
- 25. Date Picker & Select field Wednesday, December 7, 11
- 27. Message Box Wednesday, December 7, 11
- 28. List View Grouping bar Index bar Disclosure icon Wednesday, December 7, 11
- 29. Maps Wednesday, December 7, 11
- 30. Sencha Touch is highly customizable Wednesday, December 7, 11
- 31. Bloomberg Business week Wednesday, December 7, 11
- 32. BlueCross BlueShield Wednesday, December 7, 11
- 33. Modus Othello Wednesday, December 7, 11
- 34. The SenchaCon app • Uses Sencha Touch 2 • 35 classes • Takes advantage of Loader (debug) • Implements MVC (extensively!) Wednesday, December 7, 11
- 35. The SenchaCon app • Uses Sencha Touch 2 • 35 classes • Takes advantage of Loader (debug) • Implements MVC (extensively!) Wednesday, December 7, 11
- 36. The SenchaCon app team Development Design Wednesday, December 7, 11
- 37. The SenchaCon app • Leverages Local Storage • Uses app cache (offline storage) • Custom UI classes • Custom design Wednesday, December 7, 11
- 38. The SenchaCon app Wednesday, December 7, 11
- 39. The SenchaCon app • Highly optimized custom components • Reusability kept in mind throughout code base • Code developed with minification in mind • Minified with Sencha SDK Tools 2.0 Wednesday, December 7, 11
- 40. Sencha Touch MVC at a glance • Controller is at the center Controller • Controller subscribes to events from the view • Controller updates the model View Model • Model drives the view Wednesday, December 7, 11
- 41. Quick MVC thoughts App Controller • Application extends Controller! • Controllers can talk to the application via events or direct Controller methods calls View Model Wednesday, December 7, 11
- 42. Multi-controller application App Controller Controller Controller View Model View Model Wednesday, December 7, 11
- 43. The MVC class architecture Data Util Manager App Schedule Sessions Session Speakers Speaker Viewport NavBar Panel List Detail List Detail Schedule Sessions Session Speakers Speaker Viewport NavBar Session Speaker Panel List Detail List Detail Wednesday, December 7, 11
- 44. My Books manning.com/garcia2 manning.com/garcia3 Wednesday, December 7, 11
- 45. Questions? • Contact info: • twitter: • @moduscreate Thank you! • @_jdg • jay@moduscreate.com Wednesday, December 7, 11