What's new in Ext JS 6

Learn how to use Ext JS 6 to create applications for all screens. What's new in the framework and how can you migrate?

Transcript

2. What’s new in Ext JS 6? Lee Boonstra, Sencha Inc. @ladysign
3. Sales Engineer, Sencha Inc.
4. Lee Boonstra Sales Engineer & Trainer Sencha @ladysign http://www.ladysign-apps.com
5. I  <3  JavaScript!  
6. I  <3  JavaScript!  
7. I  <3  JavaScript!   Purposes of JS: •  Enrich websites •  Build web applications •  Create native phone, tablet & desktop apps with Cordova •  Generate PDFs with JavaScript •  Create real-time web applications and web servers with Node JS •  Create browser chat and video apps with WebRTC •  Create 3D games with WebGL •  Web scarping & screenshotting with Phantom JS! • Compile Sass Stylesheets with Sencha Fashion!
8. What’s new in Ext JS 6? •  Ext JS 6 Toolkits •  Microloader changes •  Pivot Grid •  App templates •  Theming with Fashion
9. History
10. History
11. History
12. History
13. Desktop Computers 2011 Ext JS 4.x •  UI components •  Class System •  Dynamic Loading •  MVC Architecture
14. Phones & Tablets 2012 Sencha Touch 2.x •  Light weight apps •  Everything HTML5 & CSS3 •  Touch Only apps •  Touch components •  Offline support •  iOS4+, Android 2.3+
15. Evolution of touch screens 2014 Ext JS 5.x •  Touch Support •  Responsive Design •  MVVM Architecture
16. Performance on a phone
17. Ext JS + Sencha Touch Can’t share code….
18. Ext  JS  1-­‐4   Ext  JS  5.x   Ext JS 6 Sencha  Touch  1   Sencha  Touch  2   Merge of the frameworks One single code base Serve the right app for the right experience Advanced theming system Mouse & Keyboard support 2007   2009   2014   2015   2010   2012  
19. 2015: Ext JS 6 •  Merge both frameworks •  Apps can run on any device •  One code base •  Touch & Mouse/Keyboard support
20. Framework Stack DOM Class / Loader Data MVC / VM Utilities Views (Components)
21. Toolkits
22. Core Classic Modern Classic & Modern Toolkits
23. Classic Toolkit •  Advanced  enterprise  components,   (legacy  browser  components)   •  OpImized  for  desktop  and  tablet   experience   •  Best  performing  grid  component  for   huge  datasets   •  Responsive  Design   •  IE8+  
24. Generate Classic       sencha  generate  app     -­‐-­‐classic  MyApp  ../mypath  
25. •  High  performance  lightweight  applicaIon   framework   •  Device  Themes  for  each  plaTorm   •  Smooth  scrolling  and  animaIons   •  MulI-­‐touch  gestures  and  adapIve   layouts   •  Android  2.3+,  iOS  4+,  Windows  Phone,  BB   Modern Toolkit
26. Generate Modern       sencha  generate  app     -­‐-­‐modern  MyApp  ../mypath  
27. Which toolkit should you use? We  need  to  run  on   legacy  browsers   We  are  only   targeIng   smart  phones   We  want  the   best  experience   on  any  device!   CLASSIC  TOOLKIT   MODERN  TOOLKIT   UNIVERSAL  (BOTH)  
28. •  One  code  base,  both  toolkits.   •  One  single  URL   •  Microloader  can  serve  the  right   experience  for  the  right  device   •  Build  profiles   Universal App
29. Generate Universal       sencha  generate  app   MyApp  ../mypath  
30. DEMO
31. Why do you want to upgrade? We  want  the  latest   framework  for  our   desktop  apps.   We  want  to  use  VCs   and  databinding  for   our  phone  apps.   We  want  the   best  experience   on  any  device!   EXT  JS  5   SENCHA  TOUCH   BOTH  
32. EXT JS 6 can do… We  want  the  latest   framework  for  our   desktop  apps.   We  want  to  use  VCs   and  databinding  for   our  phone  apps.   We  want  the   best  experience   on  any  device!   Ext  6,  Classic  Toolkit   Ext  6,  Modern  Toolkit   Ext  6,  Universal  App  
33. Microloader
34. The Microloader •  Loads JavaScript, CSS and images •  Filters assets based on Platform •  Handles LocalStorage Caching •  Manages both Full and Delta patching •  Monitors HTML5 Application Cache
35. app.json.js properties "js":  [          {                  "path":  "app.js",  //  location  of  asset                  "bundle":  true,  //  container  of  bundles  assets                  "includeInBundle":  true,  //  include  this  file  in  the  bundle                  "platform":  ["ios"],  //  platform(s)  in  which  to  load  this  asset                  "bootstrap":  true,  //  development  only  file.  Not  used  in  built  version                  "update":  "full",  //  localstorage  cache  update  strategy                    "remote":  true  //  copied  into  build  if  available          }   ]  
36. app.json.css properties "css":  [          {                  "path":  "app.css",  //  location  of  asset                  "bootstrap":  true,  //  development  only  file.                    //  platform(s)  in  which  to  load  this  asset                  "platform":  ["desktop",  "chrome",  "windows"],                  "update":  "full",  //  localstorage  cache  update  strategy                  "remote":  true  //  copied  into  build  if  available          }   ]  
37. platformTags •  phone •  tablet •  desktop •  safari •  chrome •  ie10 •  firefox •  touch •  ios •  android •  blackberry •  windows •  tizen
38. platformTags in JS if  (Ext.platformTags.desktop)  {          Ext.create({                  xtype:  'panel',                  title:  'Some  Rather  Descriptive  Title'          });   }  else  {          Ext.create({                  xtype:  'panel',                  title:  'Short  Title'          });   }  
39. app.json.resources properties //  List  of  resources  to  copy  into  the  build   ”resources":  [          ”custom-­‐data.json”   ]  
40. app.json environment properties "production":  {   },     "testing":  {   },     "development":  {          "css":  {                  "path":  "dev-­‐styles.css"                }   }  
41. app.json.loader properties "loader":  {          //  true  (allow  cache),  false,  or  the  value  to  use  as  a  cache  buster          "cache":  "${build.timestamp}",          //  parameter  to  use  when  cache  is  not  true          "cacheParam":  "_dc"   }  
42. app.json.cache properties "cache":  {          //  global  toggle  for  local  storage  caching          "enable":  false,          //  string  path  relative  to  base  for  deltas          "deltas":  "deltas"   }  
43. Build Targets   "builds":  {          "classic":  {                  "toolkit":  "classic",                  "theme":  "theme-­‐neptune"          },                      "modern":  {                "toolkit":  "modern",                "theme":  "theme-­‐neptune"          }   }     build profile
44. index.html <script  id      =  "microloader"                  type  =  "text/javascript"                  src    =  "bootstrap.js">  
45. 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
46. DEMO
47. Pivot Grids
48. What is a Pivot Grid? • A data summarization tool • Enables fast summarization of large data sets • Provides a simple way to perform basic analytics
49. The classic grid… • What is John Doe's total order amount? • What are the total order amounts by country? • How did sales people perform in a specific year?
50. Summarized Data Using Pivot Grid
51. Pivot Grid – Axes & Aggregator Left Axis Top Axis Aggregator
52. Axes Configurations
53. Aggregator Configurations Examples: •  Sum •  Average •  Min •  Max •  Count •  Own?
54. DEMO
55. App Templates
56. Software in a day
59. Sencha App Templates •  Like Twitter Bootstrap app templates. •  Quick start with a full application •  Beyond KitchenSink •  Responsive, pre packaged themes
65. Questions?
66. Buy Ext JS 5 Now – Be ready for Ext JS 6!
67. Why  would  you  choose  the  modern  toolkit  for  desktop  apps?    >  Performance  reasons.  The  Modern  (Sencha  Touch)  toolkit,  has  a  layout  engine  which  uses  CSS3  i.s.o.  JS.   Will  the  modern  toolkit  /  themes  have  RTL?    >  Not  at  release.  But  eventually.   I  didn’t  see  the  Tizen  theme  listed.  Did  we  drop  it?    >  Not  officially.  It’s  just  not  there  yet.  On  request  we  will  add  it.   Will  the  new  Classic  theme,  extend  from  Neptune  and  have  the  same  vars?    >  Yes.  
68. Thank you! Lee Boonstra @ladysign lee@sencha.com