frank mainzer & silviu durduc - developing mobile app using sencha touch
TRANSCRIPT
Developing Web Apps
USING SENCHA TOUCH
FRAMEWORK
1Designing for Mobile
1. GROWTH
2. CONSTRAINTS
3. CAPABILITIES
Natural constraints in mobile
= OPPORTUNITY
= FOCUS
= INNOVATION
GROWTH = OpportunityMobile Web growth has outpaced desktop Web growth 8x
Global mobile data traffic has grown 26x over next 5 years
PC
100M+
DESKTOP INTERNET
1B+
MOBILE CONSUMER
10B+
1990 2000 2010 2020
Source: Morgan Stanley Research
Motorola Razr 2006
GROWTH = Opportunity
29 June 2007
GROWTH = Opportunity
Steve Jobs
CONSTRAINTS = FOCUS
The things that help us Take advantage of that opportunity!
SCREEN SIZE PERFORMANCE USABILITY
1024 X 768
320 x
480
SCREEN SIZE PERFORMANCE USABILITY
CONSTRAINTS = FOCUS
CONSTRAINTS = FOCUS
FOCUS
CONSTRAINTS = FOCUS
SCREEN SIZE PERFORMANCE USABILITY
speed
Loading…
Please wait!
CONSTRAINTS = FOCUS
SCREEN SIZE PERFORMANCE USABILITY
USABILITY
CONSTRAINTS = FOCUS
Capabilities = innovation
Natural User Interfaces
NUI
Content is the UI;
Reduce the distance as much as possible between user and content;
Enable direct manipulation of objects and content;
Guessable, predictable, realistic;
Reduce visuals that are not content;
Make the content the action and direct action with content;
capabilities= innovation
Take advantage of thisNEW WAY OF INTERACTING!
capabilities= innovation
2
Sencha Touchframework
• Classes
• MVC
• Live Session
Sencha Touch framework
Sencha Class systemPREDICTABLE | PROGRAMMER FAMILIARITY | FLEXIBILITY
Class System
Data Package
Event System
Widgets & Layouts
App Specific Code
Learning Curve
Sencha class system
• Consistent
• FamiliarLearn
• Debuggable
• TestableDevelop
• Automatic dependency resolution
Deploy
Sencha class system
Coding convention
NameSpace.group[.subgroup].ClassName
One class per file;
File name matches class name
Ext .chart .Labe l = Ext/chart/Labe l . js
Ext .data .wr i ter .Xml = Ext/data/wri ter/Xml . js
Class DefinitionEx t .de f i ne ( “NameSpace .group .C lassName ” , {
i n i t : f unc t i on ( ){} ,
getName : func t i on ( ){ re turn th i s .name ; }
} ) ;
New (instantiating)
Me = Ex t . create ( “NameSpace .group .C lassName ” ) ;
Me .ge tName ( ) ;
Sencha class system
Sencha MVC (MODEL-VIEW–CONTROLLER)
Keep the logic out of your
views
Teamwork
Organized, best practices
followed
spaghetti avoided
Model
• Loads and manages the app l i ca t i on da ta ;
• Usua l l y i n response to reques ts f rom the v i ew .
Sencha MVC
ID int
Customer string
JoinDate date
1445 Sebastian 11/12/2010
1446 John 10/09/2011
1447 Emil 10/08/2009
F I E L D S ( S c he m a ) D A T A
Sencha MVC
View
• Manages the d i sp lay o f i n format ion and
UI con tro l s .
Sencha MVC
Controller
• L i s tens for i npu ts f rom the user ;
• Updates Mode l and V iew .
file structure
Sencha MVC
Live Session
3
This may turn out to be a disaster!
Getting Started
compass
Sencha SDK command line tool
+
Live Session
Wrapping up
Opportunity
Focus
Innovation
Thank you!
Q&A
Diamond Sponsors
Platinum Sponsors Gold Sponsors
Training Partners Media Partners Other Partners