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
2. The Device Continuum
3. The Browser Continuum
4. • Desktop UX is NOT optimal on a phone • Phone UX is NOT optimal on a desktop • Tablets are “up for grabs” User Experience
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
6. Framework Stack DOM Class / Loader Data MVC / VM Utilities Views (Components)
7. Legacy Framework Divide ?
8. !==   Universal Stack Views (Components) Views (Components) Core Classic Modern DOM Class / Loader Data MVC / VM Utilities DOM Class / Loader Data MVC / VM Utilities
9. Give you the tools you need to create amazing experiences… On all devices! Ext JS Mission Statement
10. Universal Stack Enables Universal Applications
11. Package Structure modern core classic ext charts ux theme-* theme-* theme-* theme-* theme-* theme-*
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
13. Toolkit Specifics src   resources   sass   model   view   controller   classic   Ah.. I see uses ?
14. Universal Application app resources sass classic modern / app.json sencha  generate  app  -­‐ext  MyApp  apps/myapp  
15. app.json   "builds":  {          "classic":  {                  "toolkit":  "classic",                  "theme":  "theme-­‐neptune"          },                      "modern":  {                "toolkit":  "modern",                "theme":  "theme-­‐neptune"          }   }     build profile
16. index.html <script  id      =  "microloader"                  type  =  "text/javascript"                  src    =  "bootstrap.js">  
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
18. Dev Mode
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
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
21. Alternatives
22. Classic Application app resources sass classic modern / app.json sencha  generate  app  -­‐ext  -­‐classic  MyApp  apps/myapp  
23. Modern Application app resources sass modern classic / app.json sencha  generate  app  -­‐ext  -­‐modern  MyApp  apps/myapp  
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
25. Demo
26. Tools
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
28. JetBrains Plugin for Sencha •  Features •  Code Completion •  Code Inspection •  Code Navigation •  Code Generation •  Refactoring •  Template Creation •  Spellchecking
29. Sencha Inspector •  Features •  Inspect Component Tree •  Inspect Data Stores •  Inspect Layouts •  Inspect Events •  Inspect MVC/MVVM •  Inspect Theme
30. Q & A