Intro to sencha touch 2
-
Upload
patrick-sheridan -
Category
Technology
-
view
3.248 -
download
0
description
Transcript of Intro to sencha touch 2
![Page 1: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/1.jpg)
![Page 2: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/2.jpg)
About us
![Page 3: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/3.jpg)
#WIN
-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/
![Page 4: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/4.jpg)
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
• 2.0 is killing it!
![Page 5: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/5.jpg)
New to Sencha Touch 2.0
• Improved Class system (from Ext JS 4.0)
• Faster layouts
• Faster startup speed
• Smoother scrolling
• Updated rendering process
![Page 6: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/6.jpg)
New to Sencha Touch 2.0
• DataView can render components
• Way better documentation
• High quality examples
• Updated MVC
![Page 7: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/7.jpg)
A peek under the hood
• Full Component lifecycle
• Well designed class inheritance model
• Observable event model
• Components and elements
• Elaborate Container model
• Configureable layout managers
![Page 8: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/8.jpg)
Robust class system
• Simple class registration
• Automatic Name Spacing
• Class dependency system
• Dynamic class loading
Ext.Base
MyClass
Mixin Mixin
![Page 9: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/9.jpg)
The SenchaCon app team
Development Design
![Page 10: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/10.jpg)
The SenchaCon app team
Development Design
![Page 11: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/11.jpg)
The SenchaCon app team
Development Design
![Page 12: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/12.jpg)
The SenchaCon app team
Development Design
![Page 13: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/13.jpg)
The SenchaCon app team
Development Design
![Page 14: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/14.jpg)
The SenchaCon app supporters
Web API Sencha Engineers
![Page 15: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/15.jpg)
The SenchaCon app supporters
Web API Sencha Engineers
![Page 16: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/16.jpg)
The SenchaCon app supporters
Web API Sencha Engineers
![Page 17: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/17.jpg)
The SenchaCon app supporters
Web API Sencha Engineers
![Page 18: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/18.jpg)
The SenchaCon app supporters
Web API Sencha Engineers
![Page 19: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/19.jpg)
The SenchaCon app supporters
Web API Sencha Engineers
![Page 20: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/20.jpg)
The SenchaCon app
• Uses Sencha Touch 2
• 35 classes
• Takes advantage of Ext Loader (debug)
• Implements MVC (extensively!)
![Page 21: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/21.jpg)
The SenchaCon app
• Uses Sencha Touch 2
• 35 classes
• Takes advantage of Ext Loader (debug)
• Implements MVC (extensively!)
![Page 22: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/22.jpg)
The SenchaCon app
• Leverages Local Storage
• Uses app cache (offline storage)
• Implements ComponentQuery
• Not a single component with a static id!
![Page 23: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/23.jpg)
The SenchaCon app
![Page 24: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/24.jpg)
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
![Page 25: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/25.jpg)
Breaking the ice
• Develop individual views & models in their own sandbox
• Views should work independently
• One HTML file per view for testing
• Test fired events via Webkit console
• Allowed for us to divide and conquer
![Page 26: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/26.jpg)
Pass #1
• Initial development done in Sencha touch 1.0
• Used MVC
• Router
• History
• Best practices for extending components
• Paved the way for the Sencha Touch 2.0 migration
![Page 27: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/27.jpg)
![Page 28: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/28.jpg)
![Page 29: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/29.jpg)
![Page 30: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/30.jpg)
![Page 31: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/31.jpg)
![Page 32: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/32.jpg)
Enter Sencha Touch 2!
![Page 33: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/33.jpg)
Migrate to the new class system
![Page 34: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/34.jpg)
Migrate to the new class system
![Page 35: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/35.jpg)
Sencha Touch 2.0 migration
• Change the namespace to match the new MVC pattern
• Views
• Models
• Controllers
• Utilities
![Page 36: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/36.jpg)
Quick MVC thoughts
• Controller is at the center
• Controller subscribes to events from the view
• Controller updates the model
• Model drives the view
Model
Controller
View
![Page 37: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/37.jpg)
Quick MVC thoughts
• Application extends Controller!
• Controllers can talk to the application via events or direct methods calls
ModelView
Controller
AppController
![Page 38: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/38.jpg)
Multi-controller application
ModelView ModelView
Controller Controller
AppController
![Page 39: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/39.jpg)
The class architecture
SchedulePanelViewport
Viewport
SessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
SessionDetail
SessionDetail
SessionSpeakers
List
SpeakersList
SpeakerSpeakerDetail
SpeakerDetail
DataManager Util
![Page 40: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/40.jpg)
![Page 41: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/41.jpg)
![Page 42: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/42.jpg)
![Page 43: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/43.jpg)
Building the Viewport
Viewport
App
History store
Viewport
![Page 44: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/44.jpg)
![Page 45: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/45.jpg)
![Page 46: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/46.jpg)
![Page 47: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/47.jpg)
![Page 48: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/48.jpg)
Building navigation
Viewport NavBar
App
NavBar
History store
Viewport
![Page 49: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/49.jpg)
![Page 50: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/50.jpg)
![Page 51: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/51.jpg)
Adding the schedule panel
SchedulePanelViewport NavBar
NavBar SchedulePanel
App
History store
Viewport
![Page 52: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/52.jpg)
![Page 53: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/53.jpg)
![Page 54: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/54.jpg)
![Page 55: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/55.jpg)
Adding the sessions list
SchedulePanelViewport
Viewport
SessionSessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
![Page 56: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/56.jpg)
![Page 57: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/57.jpg)
![Page 58: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/58.jpg)
![Page 59: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/59.jpg)
Adding the schedule panel
SchedulePanelViewport
Viewport
SessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
SessionDetail
SessionDetail
Session
![Page 60: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/60.jpg)
A highly optimized view!
![Page 61: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/61.jpg)
![Page 62: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/62.jpg)
![Page 63: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/63.jpg)
![Page 64: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/64.jpg)
![Page 65: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/65.jpg)
Adding session speaker details
SchedulePanelViewport
Viewport
SessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
SessionDetailSession
SpeakerDetail
SpeakerDetail
SessionDetail
Speaker
![Page 66: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/66.jpg)
Adding session speaker details
![Page 67: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/67.jpg)
![Page 68: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/68.jpg)
![Page 69: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/69.jpg)
Adding session speaker details
SchedulePanelViewport
Viewport
SessionsList
SessionsList
NavBar
NavBar SchedulePanel
App
SessionDetail
SessionDetail
SessionSpeakers
List
SpeakersList
SpeakerSpeakerDetail
SpeakerDetail
![Page 70: Intro to sencha touch 2](https://reader033.fdocuments.us/reader033/viewer/2022060108/554f90fcb4c905435d8b5090/html5/thumbnails/70.jpg)
Questions?
• Contact info:
• twitter :
• @moduscreate
• @_jdg
Thank you!