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
   

   View Slide

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
   

   View Slide

3. History
   

   View Slide

4. History
   

   View Slide

5. History
   

   View Slide

6. History
   

   View Slide

7. Desktop Computers
   2011
   Ext JS 4.x
   •  UI components
   •  Class System
   •  Dynamic Loading
   •  MVC Architecture
   

   View Slide

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+
   

   View Slide

9. Evolution of touch screens
   2014
   Ext JS 5.x
   •  Touch Support
   •  Responsive Design
   •  MVVM Architecture
   

   View Slide

10. Performance on a phone
    

    View Slide

11. Ext JS + Sencha Touch
    Can’t share code….
    

    View Slide

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  
    

    View Slide

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
    

    View Slide

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

    View Slide

15. Toolkits
    

    View Slide

16. Core
    Classic Modern
    Classic & Modern Toolkits
    

    View Slide

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+  
    

    View Slide

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+
    

    View Slide

19. Generate Classic
     
     
     
    sencha  generate  app    
    -­‐-­‐classic  MyApp  ../mypath  
    

    View Slide

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
    

    View Slide

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
    

    View Slide

22. Generate Modern
     
     
     
    sencha  generate  app    
    -­‐-­‐modern  MyApp  ../mypath  
    

    View Slide

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)  
    

    View Slide

24. •  One  code  base,  both  toolkits.  
    •  One  single  URL  
    •  Microloader  can  serve  the  right  
    experience  for  the  right  device  
    •  Build  profiles  
    Universal App
    

    View Slide

25. Generate Universal
     
     
     
    sencha  generate  app  
    MyApp  ../mypath  
    

    View Slide

26. DEMO
    

    View Slide

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  
    

    View Slide

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  
    

    View Slide

29. Components
    

    View Slide

30. Modern Grid
    •  Touch grid is part of modern
    toolkit.
    •  In Sencha Touch this was only
    part of the Touch bundle.
    

    View Slide

31. Classic: Grid Spreadsheet features
    •  Range selection
    •  Copy to clipboard plugin
    •  Extensible, drag corner
    •  Keyboard Aria support
    

    View Slide

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
    

    View Slide

33. Charts
    

    View Slide

34. 3D Column Charts (type bar3d)
    

    View Slide

35. Chart Events
    

    View Slide

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 "}],"
    

    View Slide

37. PIE 3D
    •  Pie Chart improvements
    •  Supports:
    •  Labels
    •  Legend
    •  Highlighting
    •  Tooltips
    •  Bevels
    •  Improved Shading
    

    View Slide

38. ItemEdit plugin
    •  Drag & resize bar items
    •  Drag and move scatter items
    

    View Slide

39. Microloader
    

    View Slide

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
    

    View Slide

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  
           }  
    ]  
    

    View Slide

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  
           }  
    ]  
    

    View Slide

43. platformTags
    •  phone
    •  tablet
    •  desktop
    •  safari
    •  chrome
    •  ie10
    •  firefox
    •  touch
    •  ios
    •  android
    •  blackberry
    •  windows
    •  tizen
    

    View Slide

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'  
           });  
    }  
    

    View Slide

45. app.json.resources properties
    //  List  of  resources  to  copy  into  the  build  
    ”resources":  [  
           ”custom-­‐data.json”  
    ]  
    

    View Slide

46. app.json environment properties
    "production":  {  
    },  
     
    "testing":  {  
    },  
     
    "development":  {  
           "css":  {  
                   "path":  "dev-­‐styles.css"        
           }  
    }  
    

    View Slide

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"  
    }  
    

    View Slide

48. app.json.cache properties
    "cache":  {  
           //  global  toggle  for  local  storage  caching  
           "enable":  false,  
           //  string  path  relative  to  base  for  deltas  
           "deltas":  "deltas"  
    }  
    

    View Slide

49. Build Targets
     
    "builds":  {  
           "classic":  {  
                   "toolkit":  "classic",  
                   "theme":  "theme-­‐neptune"  
           },  
               
           "modern":  {  
                 "toolkit":  "modern",  
                 "theme":  "theme-­‐neptune"  
           }  
    }  
     
    build profile
    

    View Slide

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

    View Slide

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
    

    View Slide

52. DEMO
    

    View Slide

53. Questions?
    

    View Slide

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.  
    

    View Slide

55. Thank you!
    Lee Boonstra @ladysign
    lee@sencha.com
    

    View Slide