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. View Slide

2. What’s new in Ext JS 6?
   Lee Boonstra, Sencha Inc.
   @ladysign
   

   View Slide

3. Sales Engineer, Sencha Inc.
   

   View Slide

4. Lee Boonstra
   Sales Engineer & Trainer
   Sencha
   @ladysign
   http://www.ladysign-apps.com
   

   View Slide

5. I  <3  JavaScript!  
   

   View Slide

6. I  <3  JavaScript!  
   

   View Slide

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!
   

   View Slide

8. What’s new in Ext JS 6?
   •  Ext JS 6 Toolkits
   •  Microloader changes
   •  Pivot Grid
   •  App templates
   •  Theming with Fashion
   

   View Slide

9. History
   

   View Slide

10. History
    

    View Slide

11. History
    

    View Slide

12. History
    

    View Slide

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

    View Slide

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+
    

    View Slide

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

    View Slide

16. Performance on a phone
    

    View Slide

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

    View Slide

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  
    

    View Slide

19. 2015: Ext JS 6
    •  Merge both frameworks
    •  Apps can run on any device
    •  One code base
    •  Touch & Mouse/Keyboard
    support
    

    View Slide

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

    View Slide

21. Toolkits
    

    View Slide

22. Core
    Classic Modern
    Classic & Modern Toolkits
    

    View Slide

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+  
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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)  
    

    View Slide

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

    View Slide

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

    View Slide

30. DEMO
    

    View Slide

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  
    

    View Slide

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  
    

    View Slide

33. Microloader
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

46. DEMO
    

    View Slide

47. Pivot Grids
    

    View Slide

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
    

    View Slide

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?
    

    View Slide

50. Summarized Data Using Pivot Grid
    

    View Slide

51. Pivot Grid – Axes & Aggregator
    Left Axis
    Top Axis
    Aggregator
    

    View Slide

52. Axes Configurations
    

    View Slide

53. Aggregator Configurations
    Examples:
    •  Sum
    •  Average
    •  Min
    •  Max
    •  Count
    •  Own?
    

    View Slide

54. DEMO
    

    View Slide

55. App Templates
    

    View Slide

56. Software in a day
    

    View Slide

57. View Slide

58. View Slide

59. Sencha App Templates
    •  Like Twitter Bootstrap app
    templates.
    •  Quick start with a full
    application
    •  Beyond KitchenSink
    •  Responsive, pre packaged
    themes
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. Questions?
    

    View Slide

66. Buy Ext JS 5 Now – Be ready for Ext JS 6!
    

    View Slide

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.  
    

    View Slide

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

    View Slide