This document discusses developing web apps using the Sencha Touch framework. It begins by outlining the opportunities and constraints of mobile development, noting areas of focus like screen size and performance. It then introduces the Sencha Touch framework, describing its class system, MVC architecture, and live coding sessions. The framework aims to provide a predictable and familiar development experience while taking advantage of mobile capabilities like natural user interactions.

1. Developing Web Apps
USING SENCHA TOUCH
FRAMEWORK

2. Hell
o!
Frank
Mainzer
frank.mainzer@centric.eu
Silviu
Durduc
@iamsilviu

3. Designing for Mobile 1

4. Natural constraints
in mobile
1. GROWTH = OPPORTUNITY
2. CONSTRAINTS = FOCUS
3. CAPABILITIES = INNOVATION

5. GROWTH = Opportunity
Mobile Web growth has outpaced desktop Web growth 8x
Global mobile data traffic has grown 26x over next 5 years
PC DESKTOP INTERNET MOBILE CONSUMER
100M+ 1B+ 10B+
1990 2000 2010 2020
Source: Morgan Stanley Research

6. Motorola Razr2006
GROWTH = Opportunity

7. Steve
Jobs
29 June 2007
GROWTH = Opportunity

8. CONSTRAINTS= FOCUS
The things that help us
Take advantage of that opportunity!
 SCREEN SIZE
 PERFORMANCE
 USABILITY

9. 320 x
480
1024 X 768
 SCREEN SIZE
 PERFORMANCE
 USABILITY
CONSTRAINTS = FOCUS

11. CONSTRAINTS = FOCUS

12. FOCUS
CONSTRAINTS = FOCUS

13. speed
Loading…
Please wait!
 SCREEN SIZE
 PERFORMANCE
 USABILITY
CONSTRAINTS = FOCUS

14. USABILITY
 SCREEN SIZE
 PERFORMANCE
 USABILITY
CONSTRAINTS = FOCUS

15. Capabilities = innovation

16.  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;
Natural User Inter
NUI
capabilities= innovation

17. Take advantage of this
NEW WAY OF INTERACTING!
capabilities= innovation

18. 2
Sencha Touch
framework

19. Sencha Touch framework
• Classes
• MVC
• Live Session

20. Sencha Class system
PREDICTABLE | PROGRAMMER FAMILIARITY | FLEXIBILITY
App Specific Code
Widgets & Layouts
Event System
Data Package
Class System

21. Learning Curve
• Consistent
Learn
• Familiar
• Debuggable
Develop
• Testable
• Automatic dependency
Deploy resolution
Sencha classsystem

22. Coding convention
NameSpace.group[.subgroup].ClassName
 One class per file;
 File name matches class name
Ext.chart.Label = Ext/chart/Label.js
Ext.data.writer.Xml = Ext/data/writer/Xml.js
Sencha classsystem

23. Class Definition
Ext.define (“NameSpace.group.ClassName ”,{
init : function (){},
getName : function(){ return this.name; }
});
New (instantiating)
Me = Ext.create (“NameSpace.group.ClassName ”);
Me. getName ();
Sencha classsystem

24. Sencha MVC (MODEL-VIEW–CONTROLLER)
Keep the logic out of your
views
Teamwork
Organized, best practices
followed
spaghetti avoided

25. Model
• Loads and manages the application data;
• Usually in response to requests from the view.
FIELDS (Schema) DATA
ID int 1445 Sebastian 11/12/2010
Customer string 1446 John 10/09/2011
JoinDate date 1447 Emil 10/08/2009
Sencha MVC

26. View
• Manages the display of information and
UI controls.
Sencha MVC

27. Controller
• Listens for inputs from the user;
• Updates Model and View.
Sencha MVC

28. file structure
Sencha MVC

29. 3
Live Session
may turn out to be a disaster!

30. etting Started
compass
+
Sencha SDK
command line tool
Live Session

32. Opportunity
Wrapping up Focus
Innovation

33. Thank you!
Q&A

34. Diamond Sponsors
Platinum Sponsors Gold Sponsors
Training Partners Media Partners Other Partners