HTML5 and Sencha Touch

2,590 views

Published on

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,590
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
65
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 and Sencha Touch

  1. 1. Wednesday, December 7, 11
  2. 2. About usWednesday, December 7, 11
  3. 3. What is HTML5 A collection of technologies sparking a revolution of innovation and application development across the web!Wednesday, December 7, 11
  4. 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 featuresWednesday, December 7, 11
  5. 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. 6. HTML5 brings • Better HTML semantics • Offline storage • Device access • Better connectivity • Multimedia • Native graphics access • Better performance • CSS3Wednesday, December 7, 11
  7. 7. Better HTML Semantics • Richer set of HTML tags • Microdata • MicroformatsWednesday, December 7, 11
  8. 8. Offline Storage • App cache • Local storage • Session storage • Web databaseWednesday, December 7, 11
  9. 9. Device Access • Geo Location • Accelerometer • Audio input/Camera • Compass (iOS 5)Wednesday, December 7, 11
  10. 10. Better connectivity • Native web socketsWednesday, December 7, 11
  11. 11. Multimedia • Audio • Video • h.264 / WebMWednesday, December 7, 11
  12. 12. Native Graphics access • SVG, Canvas, VML • CSS3 3D animations • WebGLWednesday, December 7, 11
  13. 13. Better performance • WebWorkers • Threaded JavaScript • XHR2 • Blob • Chunked data • Cross domain requestsWednesday, December 7, 11
  14. 14. CSS3 • Better and faster layouts • Native transitions • hardware accelerated 3D • Gradients • Web Open Font FormatWednesday, December 7, 11
  15. 15. Why HTML5?Wednesday, December 7, 11 ?
  16. 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
  17. 17. Available technologiesWednesday, December 7, 11
  18. 18. Available technologiesWednesday, December 7, 11
  19. 19. Available technologiesWednesday, December 7, 11
  20. 20. Available technologiesWednesday, December 7, 11
  21. 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 StandardsWednesday, December 7, 11
  22. 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 PanelWednesday, December 7, 11
  23. 23. Robust class system • Simple class registration Ext.Base • Automatic Name Spacing Mixin Mixin • Class dependency system • Dynamic class loading MyClassWednesday, December 7, 11
  24. 24. Lots of widgets Text field Number field Spinner Slider Checkbox DatePicker Password Select Toggle field URL field Radio field Email field TextareaWednesday, December 7, 11
  25. 25. Date Picker & Select fieldWednesday, December 7, 11
  26. 26. SheetsWednesday, December 7, 11
  27. 27. Message BoxWednesday, December 7, 11
  28. 28. List View Grouping bar Index bar Disclosure iconWednesday, December 7, 11
  29. 29. MapsWednesday, December 7, 11
  30. 30. Sencha Touch is highly customizableWednesday, December 7, 11
  31. 31. Bloomberg Business weekWednesday, December 7, 11
  32. 32. BlueCross BlueShieldWednesday, December 7, 11
  33. 33. Modus OthelloWednesday, December 7, 11
  34. 34. The SenchaCon app • Uses Sencha Touch 2 • 35 classes • Takes advantage of Loader (debug) • Implements MVC (extensively!)Wednesday, December 7, 11
  35. 35. The SenchaCon app • Uses Sencha Touch 2 • 35 classes • Takes advantage of Loader (debug) • Implements MVC (extensively!)Wednesday, December 7, 11
  36. 36. The SenchaCon app team Development DesignWednesday, December 7, 11
  37. 37. The SenchaCon app • Leverages Local Storage • Uses app cache (offline storage) • Custom UI classes • Custom designWednesday, December 7, 11
  38. 38. The SenchaCon appWednesday, December 7, 11
  39. 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.0Wednesday, December 7, 11
  40. 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 viewWednesday, December 7, 11
  41. 41. Quick MVC thoughts App Controller • Application extends Controller! • Controllers can talk to the application via events or direct Controller methods calls View ModelWednesday, December 7, 11
  42. 42. Multi-controller application App Controller Controller Controller View Model View ModelWednesday, December 7, 11
  43. 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 DetailWednesday, December 7, 11
  44. 44. My Books manning.com/garcia2 manning.com/garcia3Wednesday, December 7, 11
  45. 45. Questions? • Contact info: • twitter: • @moduscreate Thank you! • @_jdg • jay@moduscreate.comWednesday, December 7, 11

×