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

1. What’s new in Ext JS 6? Lee Boonstra, Sencha Inc. @ladysign
2. What’s new in Ext JS 6? •  Ext JS 6 Toolkits •  Universal Apps •  Microloader changes •  Promises •  New Triton Theme •  Fashion, fast JS theme compilation
3. History
4. History
5. History
6. History
7. Desktop Computers 2011 Ext JS 4.x •  UI components •  Class System •  Dynamic Loading •  MVC Architecture
8. Phones & Tablets 2012 Sencha Touch 2.x •  Light weight apps •  Everything HTML5 & CSS3 •  Touch Only apps •  Touch components •  Offline support •  iOS4+, Android 2.3+
9. Evolution of touch screens 2014 Ext JS 5.x •  Touch Support •  Responsive Design •  MVVM Architecture
10. Performance on a phone
11. Ext JS + Sencha Touch Can’t share code….
12. 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  
13. 2015: Ext JS 6 •  Merge both frameworks •  Apps can run on any device •  One code base •  Touch & Mouse/Keyboard support •  MVVM Architecture •  Promises •  Treelist component •  Advanced theming •  Microloader changes
14. Framework Stack DOM Class / Loader Data MVC / VM Utilities Views (Components)
15. Toolkits
16. Core Classic Modern Classic & Modern Toolkits
17. Classic Toolkit •  Advanced  enterprise  components,   (legacy  browser  components)   •  OpImized  for  desktop  and  tablet   experience   •  Best  performing  grid  component  for   huge  datasets   •  Responsive  Design   •  IE8+  
18. Classic Toolkit: Supported Browsers Desktop •  IE8+ (Strict DOCTYPE) •  Firefox and Firefox ESR (Latest 2 Versions) •  Chrome (Latest 2 Versions) •  Safari 7+ •  Opera (Latest 2 Versions) Mobile •  Safari 7+ (iPad) •  Android 4.0+ Chrome •  Android 4.4+ Native •  Windows 8 Touch Screen - IE10+
19. Generate Classic       sencha  generate  app     -­‐-­‐classic  MyApp  ../mypath  
20. •  High  performance  lightweight  applicaIon   framework   •  Device  Themes  for  each  plaTorm   •  Smooth  scrolling  and  animaIons   •  MulI-­‐touch  gestures  and  adapIve   layouts   •  iOS,  Android,  Windows  Phone,  BlackBerry   Modern Toolkit
21. Modern Toolkit: Supported Browsers Desktop •  IE11+ •  Firefox and Firefox ESR (Latest 2 Versions) •  Chrome (Latest 2 Versions) •  Safari 7+ Mobile •  IE11+ •  Safari 7+ •  Android 4.0+ Chrome •  Android 4.4+ Native
22. Generate Modern       sencha  generate  app     -­‐-­‐modern  MyApp  ../mypath  
23. 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)  
24. •  One  code  base,  both  toolkits.   •  One  single  URL   •  Microloader  can  serve  the  right   experience  for  the  right  device   •  Build  profiles   Universal App
25. Generate Universal       sencha  generate  app   MyApp  ../mypath  
26. DEMO
27. 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  
28. 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  
29. Components
30. Modern Grid •  Touch grid is part of modern toolkit. •  In Sencha Touch this was only part of the Touch bundle.
31. Classic: Grid Spreadsheet features •  Range selection •  Copy to clipboard plugin •  Extensible, drag corner •  Keyboard Aria support
32. TreeList component •  New Component: Treelist (xtype: treelist) •  Usecase: Menu lists •  Micro mode: top level icon •  Treelist renders all nodes in its TreeStore •  Available in both toolkits
33. Charts
34. 3D Column Charts (type bar3d)
35. Chart Events
36. Example 1 "plugins:"{" 2 """"""""ptype:"'chartitemevents'," 3 """"""""moveEvents:"true" 4 "}," 5 " 6 "series:"[{" 7 """"""""type:"'line'," 8 """"""""xField:"'month'," 9 """"""""yField:"'high'," 10 """"""""marker:"{" 11 """"""""""""radius:"4" 12 """"""""}," 13 """"""""listeners:"{" 14 """"""""""""itemclick:"function(chart,"item){"}" 15 """"""""}" 16 "}],"
37. PIE 3D •  Pie Chart improvements •  Supports: •  Labels •  Legend •  Highlighting •  Tooltips •  Bevels •  Improved Shading
38. ItemEdit plugin •  Drag & resize bar items •  Drag and move scatter items
39. Microloader
40. 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
41. 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          }   ]  
42. 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          }   ]  
43. platformTags •  phone •  tablet •  desktop •  safari •  chrome •  ie10 •  firefox •  touch •  ios •  android •  blackberry •  windows •  tizen
44. platformTags in JS if  (Ext.platformTags.desktop)  {          Ext.create({                  xtype:  'panel',                  title:  'Some  Rather  Descriptive  Title'          });   }  else  {          Ext.create({                  xtype:  'panel',                  title:  'Short  Title'          });   }  
45. app.json.resources properties //  List  of  resources  to  copy  into  the  build   ”resources":  [          ”custom-­‐data.json”   ]  
46. app.json environment properties "production":  {   },     "testing":  {   },     "development":  {          "css":  {                  "path":  "dev-­‐styles.css"                }   }  
47. 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"   }  
48. app.json.cache properties "cache":  {          //  global  toggle  for  local  storage  caching          "enable":  false,          //  string  path  relative  to  base  for  deltas          "deltas":  "deltas"   }  
49. Build Targets   "builds":  {          "classic":  {                  "toolkit":  "classic",                  "theme":  "theme-­‐neptune"          },                      "modern":  {                "toolkit":  "modern",                "theme":  "theme-­‐neptune"          }   }     build profile
50. index.html <script  id      =  "microloader"                  type  =  "text/javascript"                  src    =  "bootstrap.js">  
51. 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
52. DEMO
53. Questions?
54. 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.  
55. Thank you! Lee Boonstra @ladysign lee@sencha.com