Developing Web Apps USING SENCHA TOUCH     FRAMEWORK
Hell                            o!FrankMainzerfrank.mainzer@centric.euSilviuDurduc@iamsilviu
Designing for Mobile   1
Natural constraintsin mobile1. GROWTH         = OPPORTUNITY2. CONSTRAINTS    = FOCUS3. CAPABILITIES   = INNOVATION
GROWTH = Opportunity   Mobile Web growth has outpaced desktop Web growth 8x   Global mobile data traffic has grown 26x ove...
Motorola Razr2006           GROWTH = Opportunity
Steve      Jobs29 June 2007    GROWTH = Opportunity
CONSTRAINTS= FOCUSThe things that help us Take advantage of that opportunity!            SCREEN SIZE            PERFORMA...
320 x                              4801024 X 768              SCREEN SIZE              PERFORMANCE              USABILI...
CONSTRAINTS = FOCUS
FOCUS        CONSTRAINTS = FOCUS
speed        Loading…        Please wait!         SCREEN SIZE         PERFORMANCE         USABILITY                    ...
USABILITY             SCREEN SIZE             PERFORMANCE             USABILITY                            CONSTRAINTS ...
Capabilities = innovation
 Content is the UI; Reduce the distance as much as possible between user and content; Enable direct manipulation of obj...
Take advantage of this    NEW WAY OF INTERACTING!                          capabilities= innovation
2Sencha Touch  framework
Sencha Touch   framework         • Classes         • MVC         • Live Session
Sencha Class systemPREDICTABLE | PROGRAMMER FAMILIARITY | FLEXIBILITY                         App Specific Code           ...
Learning                Curve        • ConsistentLearn        • Familiar        • DebuggableDevelop        • Testable     ...
Coding convention NameSpace.group[.subgroup].ClassName One class per file; File name matches class nameExt.chart.Label =...
Class DefinitionExt.define (“NameSpace.group.ClassName ”,{      init : function (){},      getName : function(){ return th...
Sencha MVC    (MODEL-VIEW–CONTROLLER) Keep the logic out of your                      views                      Teamwork ...
Model• Loads and manages the application data;• Usually in response to requests from the view. FIELDS (Schema)          DA...
View• Manages the display of information and  UI controls.                                           Sencha MVC
Controller• Listens for inputs from the user;• Updates Model and View.                                      Sencha MVC
file structure                 Sencha MVC
3       Live Sessionmay turn out to be a disaster!
etting Started      compass                +                     Sencha SDK                    command line tool          ...
OpportunityWrapping up   Focus                 Innovation
Thank you!  Q&A
Diamond SponsorsPlatinum Sponsors                    Gold SponsorsTraining Partners   Media Partners          Other Partners
Frank Mainzer & Silviu Durduc - Developing mobile app using Sencha Touch
Frank Mainzer & Silviu Durduc - Developing mobile app using Sencha Touch
Upcoming SlideShare
Loading in …5
×

Frank Mainzer & Silviu Durduc - Developing mobile app using Sencha Touch

408
-1

Published on

Published in: Spiritual
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
408
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Frank Mainzer & Silviu Durduc - Developing mobile app using Sencha Touch

  1. 1. Developing Web Apps USING SENCHA TOUCH FRAMEWORK
  2. 2. Hell o!FrankMainzerfrank.mainzer@centric.euSilviuDurduc@iamsilviu
  3. 3. Designing for Mobile 1
  4. 4. Natural constraintsin mobile1. GROWTH = OPPORTUNITY2. CONSTRAINTS = FOCUS3. CAPABILITIES = INNOVATION
  5. 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 2020Source: Morgan Stanley Research
  6. 6. Motorola Razr2006 GROWTH = Opportunity
  7. 7. Steve Jobs29 June 2007 GROWTH = Opportunity
  8. 8. CONSTRAINTS= FOCUSThe things that help us Take advantage of that opportunity!  SCREEN SIZE  PERFORMANCE  USABILITY
  9. 9. 320 x 4801024 X 768  SCREEN SIZE  PERFORMANCE  USABILITY CONSTRAINTS = FOCUS
  10. 10. CONSTRAINTS = FOCUS
  11. 11. FOCUS CONSTRAINTS = FOCUS
  12. 12. speed Loading… Please wait!  SCREEN SIZE  PERFORMANCE  USABILITY CONSTRAINTS = FOCUS
  13. 13. USABILITY  SCREEN SIZE  PERFORMANCE  USABILITY CONSTRAINTS = FOCUS
  14. 14. Capabilities = innovation
  15. 15.  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
  16. 16. Take advantage of this NEW WAY OF INTERACTING! capabilities= innovation
  17. 17. 2Sencha Touch framework
  18. 18. Sencha Touch framework • Classes • MVC • Live Session
  19. 19. Sencha Class systemPREDICTABLE | PROGRAMMER FAMILIARITY | FLEXIBILITY App Specific Code Widgets & Layouts Event System Data Package Class System
  20. 20. Learning Curve • ConsistentLearn • Familiar • DebuggableDevelop • Testable • Automatic dependencyDeploy resolution Sencha classsystem
  21. 21. Coding convention NameSpace.group[.subgroup].ClassName One class per file; File name matches class nameExt.chart.Label = Ext/chart/Label.jsExt.data.writer.Xml = Ext/data/writer/Xml.js Sencha classsystem
  22. 22. Class DefinitionExt.define (“NameSpace.group.ClassName ”,{ init : function (){}, getName : function(){ return this.name; }});New (instantiating)Me = Ext.create (“NameSpace.group.ClassName ”);Me. getName (); Sencha classsystem
  23. 23. Sencha MVC (MODEL-VIEW–CONTROLLER) Keep the logic out of your views Teamwork Organized, best practices followed spaghetti avoided
  24. 24. 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
  25. 25. View• Manages the display of information and UI controls. Sencha MVC
  26. 26. Controller• Listens for inputs from the user;• Updates Model and View. Sencha MVC
  27. 27. file structure Sencha MVC
  28. 28. 3 Live Sessionmay turn out to be a disaster!
  29. 29. etting Started compass + Sencha SDK command line tool Live Session
  30. 30. OpportunityWrapping up Focus Innovation
  31. 31. Thank you! Q&A
  32. 32. Diamond SponsorsPlatinum Sponsors Gold SponsorsTraining Partners Media Partners Other Partners
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×