Sandeep: Ext JS 6 - From desktops to smartphones

Learn how to use the latest version of Sencha Ext JS to create applications for all screens from desktop to smartphones. We will create a single application targeting all screens and talk about how to maximize code sharing while ensuring the best possible user experience across all devices.

Transcript

1. Sandeep Adwankar
   sandeep@sencha.com
   Sencha Inc. ©2015
   Ext JS 6 – From Desktops
   to Smartphones
   

   View Slide

2. The Device Continuum
   

   View Slide

3. The Browser Continuum
   

   View Slide

4. • Desktop UX is NOT optimal on a phone
   • Phone UX is NOT optimal on a desktop
   • Tablets are “up for grabs”
   User Experience
   

   View Slide

5. Every JavaScript Library is
   NOT a Framework
   Cobbling together a bunch of
   libraries DON’T make them a
   Framework
   Don’t provide elegant way to
   cover desktops, tablets and
   smartphones
   Other Technology Choices
   

   View Slide

6. Framework Stack
   DOM
   Class / Loader
   Data
   MVC / VM
   Utilities
   Views
   (Components)
   

   View Slide

7. Legacy Framework Divide
   ?
   

   View Slide

8. !==  
   Universal Stack
   Views
   (Components)
   Views
   (Components)
   Core
   Classic Modern
   DOM
   Class / Loader
   Data
   MVC / VM
   Utilities
   DOM
   Class / Loader
   Data
   MVC / VM
   Utilities
   

   View Slide

9. Give you the tools you
   need to create amazing
   experiences…
   On all devices!
   Ext JS Mission Statement
   

   View Slide

10. Universal
    Stack Enables
    Universal Applications
    

    View Slide

11. Package Structure
    modern
    core
    classic
    ext
    charts
    ux
    theme-*
    theme-*
    theme-*
    theme-*
    theme-*
    theme-*
    

    View Slide

12. Traditional -> Universal
    app  
    resources  
    sass  
    model  
    view  
    controller  
    /  
    src  
    resources  
    sass  
    model  
    view  
    controller  
    classic  
    modern  
    classic  
    app.json  
    Toolkit-specific
    content
    Shared
    content
    

    View Slide

13. Toolkit Specifics
    src  
    resources  
    sass  
    model  
    view  
    controller  
    classic  
    Ah.. I see
    uses
    ?
    

    View Slide

14. Universal Application
    app
    resources
    sass
    classic
    modern
    /
    app.json
    sencha  generate  app  -­‐ext  MyApp  apps/myapp  
    

    View Slide

15. app.json
     
    "builds":  {  
           "classic":  {  
                   "toolkit":  "classic",  
                   "theme":  "theme-­‐neptune"  
           },  
               
           "modern":  {  
                 "toolkit":  "modern",  
                 "theme":  "theme-­‐neptune"  
           }  
    }  
     
    build profile
    

    View Slide

16. index.html
                   type  =  "text/javascript"  
                   src    =  "bootstrap.js">  
    

    View Slide

17. index.html
    Ext.beforeLoad  =  function  (tags)  {  
           var  profile  =  tags.desktop  ?  'classic'  :  'modern';  
     
           //  var  profile  =  tags.phone  ?  'modern'  :  'classic';  
     
           if  (location.search.match(/\bclassic\b/))  {  
                   profile  =  'classic';  
           }  else  if  (location.search.match(/\bmodern\b/))  {  
                   profile  =  'modern';  
           }  
     
           Ext.manifest  =  profile;  
    };  
    platforms
    

    View Slide

18. Dev Mode
    

    View Slide

19. App Watch
    sencha  app  watch  classic  
     
    "builds":  {  
           "classic":  {  
                   "toolkit":  "classic",  
                   "theme":  "theme-­‐neptune"  
           },  
               
           "modern":  {  
                 "toolkit":  "modern",  
                 "theme":  "theme-­‐neptune"  
           }  
    }  
     
    sencha  app  watch  modern  
    required
    

    View Slide

20. Development Build
    sencha  app  build  classic  development  
     
    "builds":  {  
           "classic":  {  
                   "toolkit":  "classic",  
                   "theme":  "theme-­‐neptune"  
           },  
               
           "modern":  {  
                 "toolkit":  "modern",  
                 "theme":  "theme-­‐neptune"  
           }  
    }  
     
    sencha  app  build  modern  development  
    optional
    sencha  app  build  development  
    build
    environment
    

    View Slide

21. Alternatives
    

    View Slide

22. Classic Application
    app
    resources
    sass
    classic
    modern
    /
    app.json
    sencha  generate  app  -­‐ext  -­‐classic  MyApp  apps/myapp  
    

    View Slide

23. Modern Application
    app
    resources
    sass
    modern
    classic
    /
    app.json
    sencha  generate  app  -­‐ext  -­‐modern  MyApp  apps/myapp  
    

    View Slide

24. Framework Builds
    build
    ext-6.0.0.zip
    ext-all.js
    ext-all-debug.js
    ext-modern-all.js
    ext-modern-all-debug.js
    

    View Slide

25. Demo
    

    View Slide

26. Tools
    

    View Slide

27. JetBrains Plugin for Sencha
    •  Supports latest versions of all commercial JetBrains IDEs
    (WebStorm 10, IntelliJ 14.1, etc...)
    •  Works with non-minified versions of:
    •  Ext JS 4+
    •  Touch 2+
    •  No additional project dependencies
    •  Works with custom classes and overrides in addition to Ext JS
    framework classes
    •  No update needed when upgrading the framework version
    

    View Slide

28. JetBrains Plugin for Sencha
    •  Features
    •  Code Completion
    •  Code Inspection
    •  Code Navigation
    •  Code Generation
    •  Refactoring
    •  Template Creation
    •  Spellchecking
    

    View Slide

29. Sencha Inspector
    •  Features
    •  Inspect Component Tree
    •  Inspect Data Stores
    •  Inspect Layouts
    •  Inspect Events
    •  Inspect MVC/MVVM
    •  Inspect Theme
    

    View Slide

30. Q & A
    

    View Slide