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
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
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
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