Migration to Ext JS 6 - Roadshow 2016 presentation

Migration to Ext JS 6 - Roadshow 2016 presentation by Lee Boonstra & Olga Petrova, Sales Engineers DACH

Transcript

1. View Slide

2. Migration to Ext JS 6!
   Lee Boonstra!
   @ladysign - http://www.ladysign-apps.com!
   Sales Engineer / Trainer EMEA!
   

   View Slide

3. Migration to Ext JS 6!
   Olga Petrova !
   Sales Engineers DACH!
   

   View Slide

4. CONFIDENTIAL • Sencha Inc. ©2015
   Agenda!
   •  Pros and cons of staying on legacy!
   •  Why move to Ext JS 6!
   •  Improvements: !
   •  Ext JS 4!
   •  Ext JS 5!
   •  Ext JS 6!
   •  Migration in action!
   4!
   

   View Slide

5. CONFIDENTIAL • Sencha Inc. ©2015
   Why do people stick to older Sencha versions?!
   •  Demand for new apps, takes resources!
   •  Application seems stable!
   •  Application is complex!
   •  Original developers are not in the company anymore!
   

   View Slide

6. CONFIDENTIAL • Sencha Inc. ©2015
   Risks!
   •  Browsers push automated updates!
   •  Hard to maintain and support!
   •  No Sencha support!
   •  Performance, memory usage !
   •  Doesn’t work on mobile!
   •  No access to new Sencha features!
   •  Changing business demands!
   6!
   

   View Slide

7. CONFIDENTIAL • Sencha Inc. ©2015
   Pros & Cons of developing in legacy Ext JS versions!
   Pros
   •  Least effort (short term)!
   •  Current team has legacy Ext JS skills!
   Cons
   •  Does not remove risks!
   •  The longer you leave migration, the
   more risk increases!
   •  Investing in an app that has to be
   migrated!
   •  Isn’t optimized for mobile!
   7!
   

   View Slide

8. CONFIDENTIAL • Sencha Inc. ©2015
   Ext JS Advantages overview!
   8!
   •  Custom Builds / Dynamic Loading
   •  Advanced Class System
   •  MVC Architecture
   •  Advanced Charts
   •  Sass Themes
   •  MVVM Architecture
   •  Responsive Design
   •  Touch Support
   •  Data package improvements
   •  Universal Apps
   •  Fashion: JS theme compilaDon
   •  Asynchronous JavaScript: Promises
   Ext JS 4
   New Components
   ARIA support
   Browser support
   Performance and memory opDmizaDon
   Tooling (Cmd, Architect, Plugins, Inspector, Test)
   Ext JS 5
   Ext JS 6
   Ext JS 3
   

   View Slide

9. CONFIDENTIAL • Sencha Inc. ©2015
   Ext JS 3 to Ext JS 6!
   9!
   

   View Slide

10. CONFIDENTIAL • Sencha Inc. ©2015
    Migration Steps!
    Step by Step Directly move to 6
    10!
    Ext JS 3
    Ext JS 6
    Ext JS 5
    Ext JS 4
    Ext JS 3
    Ext JS 6
    Ext JS 5
    Ext JS 4
    

    View Slide

11. CONFIDENTIAL • Sencha Inc. ©2015
    We recommend:!
    11!
    Ext JS 3
    Ext JS 6
    Ext JS 5
    Ext JS 4
    •  Direct move to Ext JS 6!
    

    View Slide

12. CONFIDENTIAL • Sencha Inc. ©2015
    Improvements compared to!
    Ext JS 3!
    12!
    

    View Slide

13. CONFIDENTIAL • Sencha Inc. ©2015
    Custom Builds / Dynamic Loading!
    Ext JS 3 & below
    •  ext-all.js!
    •  ext-all.css!
    •  Manually ordering of scripts in
    !
    !
    Ext JS 6
    •  Microloader!
    •  Custom builds with Sencha Cmd!
    !
    13!
    

    View Slide

14. CONFIDENTIAL • Sencha Inc. ©2015
    MVC Architecture!
    Ext JS 3 & below
    •  Spaghetti code!
    !
    Ext JS 6
    •  Advanced class system!
    •  MVVM or MVC!
    •  Models!
    14!
    

    View Slide

15. CONFIDENTIAL • Sencha Inc. ©2015
    Charts!
    Ext JS 3 & below
    •  Flash based!
    •  Limited!
    !
    Ext JS 6
    •  SVG & Canvas –based!
    •  Broad range of chart types!
    •  Run on mobile devices!
    •  Support touch gestures!
    !
    15!
    

    View Slide

16. CONFIDENTIAL • Sencha Inc. ©2015
    Theming!
    Ext JS 3 & below
    .x-grid3-row {

    border: 1px !important;

    font-size: 16px !important;

    }
    !
    Ext JS 6
    •  Sass themes!
    •  Sharable packages!
    •  Theme inheritance!
    16!
    

    View Slide

17. CONFIDENTIAL • Sencha Inc. ©2015
    Continuous Improvements!
    17!
    …because some things improve all the time.!
    

    View Slide

18. CONFIDENTIAL • Sencha Inc. ©2015
    •  Dashboard!
    •  Tree Grid!
    •  Infinitive Grid!
    •  Widget Column!
    •  Widgets!
    •  Pivot Grid!
    •  Excel Exporter!
    •  Spreadsheet Model!
    •  Clipboard!
    ! 18!
    •  Multi Selector!
    •  Toast Window!
    •  New Charts!
    •  Chart Themes!
    •  New Themes!
    •  Modern Toolkit Components!
    •  Routing!
    New Components / Features!
    

    View Slide

19. CONFIDENTIAL • Sencha Inc. ©2015 19!
    ARIA support!
    •  DOM attributes provide semantic information!
    •  Keyboard Navigation!
    •  Focus Management!
    •  High Contrast Theme!
    

    View Slide

20. CONFIDENTIAL • Sencha Inc. ©2015 20!
    Latest framework!
    •  Browser support!
    •  Performance updates!
    •  Memory optimization!
    

    View Slide

21. CONFIDENTIAL • Sencha Inc. ©2015
    Tooling!
    Productivity and quality improvements:!
    !
    •  Sencha Cmd!
    •  Sencha Architect!
    •  Sencha Inspector!
    •  IDE plugins!
    •  Sencha Test!
    !
    21!
    

    View Slide

22. CONFIDENTIAL • Sencha Inc. ©2015
    Migration in Action!
    22!
    

    View Slide

23. CONFIDENTIAL • Sencha Inc. ©2015 23!
    Divide and Rule - Separation of concerns!
    

    View Slide

24. CONFIDENTIAL • Sencha Inc. ©2015
    Key approach for Ext JS 3 & below!
    24!
    Component
    Model View ViewModel ViewController
    

    View Slide

25. CONFIDENTIAL • Sencha Inc. ©2015
    Key approach for Ext JS 3 & below!
    •  Data Layer -> Model!
    •  Component Definition -> View!
    •  Data between View and Model -> ViewModel!
    •  Business logic, Event handlers -> ViewController !
    25!
    

    View Slide

26. CONFIDENTIAL • Sencha Inc. ©2015
    For each re-usable component!
    26!
    

    View Slide

27. CONFIDENTIAL • Sencha Inc. ©2015
    Components & Classes can inherit from each other!
    27!
    

    View Slide

28. CONFIDENTIAL • Sencha Inc. ©2015
    Ext JS 3.x Grid example!
    28!
    

    View Slide

29. CONFIDENTIAL • Sencha Inc. ©2015
    Generate a fresh new Ext JS 6 project!
    29!
    

    View Slide

30. CONFIDENTIAL • Sencha Inc. ©2015 30!
    

    View Slide

31. CONFIDENTIAL • Sencha Inc. ©2015 31!
    Model
    (Model DefiniDon)
    

    View Slide

32. CONFIDENTIAL • Sencha Inc. ©2015
    Entity(Model Definition)!
    32!
    app/model/Company.js!
    Ext JS 3 migration!
    Ext.data.Model
    

    View Slide

33. CONFIDENTIAL • Sencha Inc. ©2015 33!
    Model
    (Store DefiniDon)
    

    View Slide

34. CONFIDENTIAL • Sencha Inc. ©2015
    Store Definition!
    34!
    app/store/Companies.js!
    Ext JS 3 migration!
    Ext.data.ArrayStore
    Link to the Model
    

    View Slide

35. CONFIDENTIAL • Sencha Inc. ©2015 35!
    View
    

    View Slide

36. CONFIDENTIAL • Sencha Inc. ©2015
    View (Grid Definition)!
    36!
    app/view/company/Grid.js!
    Ext JS 3 migration!
    

    View Slide

37. CONFIDENTIAL • Sencha Inc. ©2015 37!
    Viewport will
    Render the grid.
    

    View Slide

38. CONFIDENTIAL • Sencha Inc. ©2015
    View (Viewport)!
    38!
    app/view/main/Main.js!
    Ext JS 3 migration!
    Create an instance
    of the grid.
    

    View Slide

39. CONFIDENTIAL • Sencha Inc. ©2015 39!
    The data will be in
    ViewModel
    The data will be in
    ViewModel
    

    View Slide

40. CONFIDENTIAL • Sencha Inc. ©2015
    ViewModel!
    40!
    app/view/company/GridModel.js!
    Ext JS 3 migration!
    Ext.app.ViewModel
    Data in VM
    Alias
    

    View Slide

41. CONFIDENTIAL • Sencha Inc. ©2015 41!
    We will link the store
    via DataBinding
    

    View Slide

42. CONFIDENTIAL • Sencha Inc. ©2015
    Databinding!
    42!
    app/view/company/Grid.js!
    Ext JS 3 migration!
    Bind syntax,
    to bind the Store
    to the View
    Wire up the VM
    

    View Slide

43. CONFIDENTIAL • Sencha Inc. ©2015 43!
    Move implementaDon
    to VC
    Move implementaDon
    to VC
    

    View Slide

44. CONFIDENTIAL • Sencha Inc. ©2015
    View Controller!
    44!
    app/view/company/GridController.js!
    Ext JS 3 migration!
    Alias
    

    View Slide

45. CONFIDENTIAL • Sencha Inc. ©2015
    Wiring up the VC!
    45!
    app/view/company/Grid.js!
    Ext JS 3 migration!
    Wire up the VC
    The event method
    header is in the View
    The event method
    header is in the View
    

    View Slide

46. CONFIDENTIAL • Sencha Inc. ©2015
    Events in MVVM!
    46!
    app/view/company/Grid.js!
    Ext JS 3 migration!
    The event method
    header is in the View
    The event method
    header is in the View
    

    View Slide

47. CONFIDENTIAL • Sencha Inc. ©2015
    Method implementation in the View Controller!
    47!
    app/view/company/GridController.js!
    Ext JS 3 migration!
    

    View Slide

48. CONFIDENTIAL • Sencha Inc. ©2015
    Final Result!
    48!
    http://github.com/olga-petrova/Migration_3.4_to_6
    

    View Slide

49. CONFIDENTIAL • Sencha Inc. ©2015
    Ext JS 4 to Ext JS 6!
    49!
    

    View Slide

50. CONFIDENTIAL • Sencha Inc. ©2015
    Ext JS Advantages overview!
    50!
    •  Custom Builds / Dynamic Loading
    •  Advanced Class System
    •  MVC Architecture
    •  Advanced Charts
    •  Sass Themes
    •  MVVM Architecture
    •  Responsive Design
    •  Touch Support
    •  Data package improvements
    •  Universal Apps
    •  Fashion: JS theme compilaDon
    •  Asynchronous JavaScript: Promises
    Ext JS 4
    New Components
    ARIA support
    Browser support
    Performance and memory opDmizaDon
    Tooling (Cmd, Architect, Plugins, Inspector, Test)
    Ext JS 5
    Ext JS 6
    Ext JS 3
    

    View Slide

51. CONFIDENTIAL • Sencha Inc. ©2015
    Ext JS 4 to Ext JS 6!
    51!
    Ext JS 3
    Ext JS 6
    Ext JS 5
    Ext JS 4
    

    View Slide

52. CONFIDENTIAL • Sencha Inc. ©2015
    Sencha Touch 2 to Ext JS 6!
    52!
    

    View Slide

53. CONFIDENTIAL • Sencha Inc. ©2015
    Ext JS Advantages overview!
    53!
    •  MVVM Architecture
    •  MVVM Architecture
    •  Data package improvements
    •  Advanced Charts
    •  Advanced Theming
    •  Mouse & Keyboard support
    •  Universal Apps
    •  Fashion: JS theme compilaDon
    •  Asynchronous JavaScript: Promises New Components
    ARIA support
    Browser support
    Performance and memory opDmizaDon
    Tooling (Cmd, Architect, Plugins, Inspector, Test)
    Ext JS 6
    Sencha Touch 2
    

    View Slide

54. CONFIDENTIAL • Sencha Inc. ©2015
    Sencha Touch 2 to Ext JS 6!
    54!
    Sencha Touch 2
    Ext JS 6
    

    View Slide

55. CONFIDENTIAL • Sencha Inc. ©2015
    Improvements compared to!
    Ext JS 4!
    55!
    

    View Slide

56. CONFIDENTIAL • Sencha Inc. ©2015
    Responsive Design!
    Ext JS 4 and below
    •  Viewport resizes!
    Ext JS 6
    •  Responsive Design with CSS or JS!
    •  Device Profiles!
    56!
    

    View Slide

57. CONFIDENTIAL • Sencha Inc. ©2015
    Touch support!
    Ext JS 4 and below
    •  Browser default!
    Ext JS 6
    •  Event normalization!
    •  Gestures (pinch, swipe…)!
    •  Touch themes!
    57!
    

    View Slide

58. CONFIDENTIAL • Sencha Inc. ©2015
    Ext JS 4 and below
    •  Every fields needs to be declared in
    Model!
    •  Model Relations was difficult!
    Ext JS 6
    •  Set fields for converted data only!
    •  Custom field types / validations!
    •  Simplified Associations!
    •  Chained Stores!
    !
    58!
    Data package improvements!
    

    View Slide

59. CONFIDENTIAL • Sencha Inc. ©2015
    Improvements compared to!
    Sencha Touch 2!
    59!
    

    View Slide

60. CONFIDENTIAL • Sencha Inc. ©2015
    Mouse & Keyboard support!
    Sencha Touch 2 & below
    •  Odd behavior on a desktop!
    !
    Ext JS 6
    •  Modern toolkit on a desktop:!
    •  List can scroll with a mouse!
    •  Keyboard navigation!
    60!
    Introduced in Ext JS 6
    

    View Slide

61. CONFIDENTIAL • Sencha Inc. ©2015
    Advanced Themes (packages) & new themes!
    Sencha Touch 2 & below
    •  Default!
    •  Cupertino!
    •  Mountain View!
    •  Tizen!
    •  Blackberry!
    !
    Ext JS 6
    •  Neptune!
    •  Triton!
    •  Cupertino!
    •  Mountain View!
    61!
    Introduced in Ext JS 6
    

    View Slide

62. CONFIDENTIAL • Sencha Inc. ©2015
    Migration in Action!
    62!
    for Sencha Touch 2 / Ext JS 4 it’s pretty similar…!
    

    View Slide

63. CONFIDENTIAL • Sencha Inc. ©2015
    3 types of migration!
    •  Simple migration (keep MVC pattern)!
    •  Advanced migration (move to MVVM pattern)!
    •  Advanced migration + universal app!
    63!
    

    View Slide

64. CONFIDENTIAL • Sencha Inc. ©2015
    Simple migration (keep MVC pattern)!
    64!
    

    View Slide

65. CONFIDENTIAL • Sencha Inc. ©2015
    Generate a fresh new Ext JS 6 project, with the same namespace!
    65!
    Modern only (Migrating Sencha Touch mobile app)!
    Classic only (Migrating Ext JS desktop app)!
    Simple migration!
    

    View Slide

66. CONFIDENTIAL • Sencha Inc. ©2015
    Copy files over!
    •  Copy over the app folder from Ext JS 4/ ST2
    project!
    •  Copy over app.js from Ext JS 4 / ST project!
    !
    66!
    Simple migration!
    

    View Slide

67. CONFIDENTIAL • Sencha Inc. ©2015
    Manually merge app.json & index.html!
    •  Take changes in app.json & index.html over manually!
    (links to external StyleSheets, JS files etc…)!
    67!
    Simple migration!
    

    View Slide

68. CONFIDENTIAL • Sencha Inc. ©2015
    A new theme?!
    •  Ext JS 4 users, might want to switch to Triton.!
    •  Sencha Touch 2 users: there’s no default theme anymore.!
    !
    68!
    Simple migration!
    

    View Slide

69. CONFIDENTIAL • Sencha Inc. ©2015
    sencha app refresh!
    •  Run on the command-line:!
    69!
    Simple migration!
    

    View Slide

70. CONFIDENTIAL • Sencha Inc. ©2015
    ERRORS!!
    •  Let’s fix the errors!
    •  IMAGE ERRRORS IN CMD + BROWSER!
    70!
    Simple migration !
    [ERR] ERROR!
    [ERR] ERROR!
    WAIT? WHAT?!!!
    

    View Slide

71. CONFIDENTIAL • Sencha Inc. ©2015
    Those errors are actually good…!
    •  You can fix it!!
    71!
    Simple migration!
    TIP!!
    http://docs.sencha.com/extjs/6.0/6.0.0-classic/!
    http://docs.sencha.com/extjs/6.0/6.0.0-modern/!
    http://docs.sencha.com/extjs/5.0/api_diffs/
    500_diff_changes.html!
    !
    

    View Slide

72. CONFIDENTIAL • Sencha Inc. ©2015
    Some examples!
    •  [ERR] C2008: Requirement had no matching files (Ext.data.UuidGenerator)
    – myapp/app/model/MyModel:5:7
    Look in the API Docs, and see: Ext.data.UuidGenerator is deprecated, !
    use Ext.data.identifier.Uuid instead.!
    !
    •  root in the Proxy reader is deprecated. Use rootProperty instead.!
    !
    •  Ext JS 6 Stores don’t automatically set the storeId to the name of the class!
    !
    !
    72!
    Simple migration!
    

    View Slide

73. CONFIDENTIAL • Sencha Inc. ©2015
    Ext JS 4 Specific: Viewport!
    •  When you generate a new project, the microloader expects the new viewport is: !
    app/view/main/Main.js!
    !
    Therefore, your browser errors this:!
    GET http://localhost:1841/myapp/app/view/main/Main.js?_dc=1402907827207
    404 (Not Found) bootstrap.js:511
    [E] [Ext.Loader] Some requested files failed to load.
    •  Fix, this by renaming the Viewport.js file or setting the mainView, property in app.js!
    73!
    Simple migration!
    

    View Slide

74. CONFIDENTIAL • Sencha Inc. ©2015
    Ext JS 4 Specific: Charts!
    •  Charts in Ext JS 6 are packages. You can choose to take the legacy SVG charts or the
    modern Canvas charts. When you see this error:!
    !
    [ERR] com.sencha.exceptions.ExNotFound: Unknown definition for
    dependency : Ext.chart.Chart
    !
    Use this fix in app.json:!
    "requires": [
    "charts" //ext-charts for legacy charts
    ],
    74!
    Simple migration!
    

    View Slide

75. CONFIDENTIAL • Sencha Inc. ©2015
    Clean up the Ext.data.Model!
    •  No longer you need to define every field in the fields array!
    •  You retrieve the data from a feed!
    •  You set fields, only for data conversion!
    75!
    Simple migration!
    

    View Slide

76. CONFIDENTIAL • Sencha Inc. ©2015
    Sencha Touch Specific!
    •  launch() in the Controller is deprecated. Use onLaunch() instead!
    !
    •  Pictos icons are replaced by FontAwesome, you can set it like this:!
    iconCls: ‘x-fa fa-cog’
    !
    •  Sencha Touch validations are now called validators
    TIP: http://docs.sencha.com/extjs/6.0/api_diffs/600_modern_diff.html!
    76!
    Simple migration!
    

    View Slide

77. CONFIDENTIAL • Sencha Inc. ©2015
    Advanced migration !
    (move to MVVM pattern)!
    77!
    

    View Slide

78. CONFIDENTIAL • Sencha Inc. ©2015
    MVVM Architecture!
    Ext JS 4 / Sencha Touch 2: MVC Ext JS 6: MVC + VM (databinding)
    78!
    Controller
    Model
    View
    VM
    View
    Model VC
    Databinding!
    Methods!
    Events!
    Advanced migration!
    Methods!
    Events!
    

    View Slide

79. CONFIDENTIAL • Sencha Inc. ©2015
    MVC!
    79!
    Advanced migration!
    Controller 2
    Model 2
    View 2 Model 3
    View 3
    Controller 1
    Model 1
    View 1
    Controller 3
    

    View Slide

80. CONFIDENTIAL • Sencha Inc. ©2015
    MVVM is more scalable!
    80!
    ViewModel View ViewController
    Model
    Advanced migration!
    ViewModel View ViewController
    Model
    ViewModel View ViewController
    

    View Slide

81. CONFIDENTIAL • Sencha Inc. ©2015
    Key approach for Ext JS 4 & Sencha Touch 2!
    Ext JS 4 / Sencha Touch 2: MVC Ext JS 6: MVC + VM
    81!
    Model
    View
    VM
    VC
    Model
    View
    Controller
    Advanced migration!
    New!!
    New!!
    

    View Slide

82. CONFIDENTIAL • Sencha Inc. ©2015
    Key approach for Ext JS 4 & Sencha Touch 2!
    •  Create view subfolders!
    •  Create a ViewModel (Ext.app.ViewModel), wire up the data (stores)!
    •  Migrate Global Controllers to ViewControllers (Ext.app.ViewController)
    •  Link VC and VM to View!
    •  TIP: Generate a view with Sencha Cmd (sencha generate view MyView), generates the
    subfolder with the 3 classes.!
    82!
    Advanced migration!
    

    View Slide

83. CONFIDENTIAL • Sencha Inc. ©2015
    Create for every view a subfolder!
    83!
    Advanced migration!
    

    View Slide

84. CONFIDENTIAL • Sencha Inc. ©2015
    Migrate Global Controllers to ViewControllers!
    84!
    Ext.app.ViewController
    Set an alias
    Take over the methods
    app/view/main/MainController.js!
    Advanced migration!
    

    View Slide

85. CONFIDENTIAL • Sencha Inc. ©2015
    There are various new ways to query for components!
    VIEW VIEW CONTROLLER / VIEW MODEL
    •  Ext.ComponentQuery.query(‘myxtype’)[0]
    •  .down(‘myxtype’)
    •  .up(‘myxtype’)
    •  this.lookupReference(‘myview’);
    •  this.getView()
    •  this.getViewModel()
    •  this.getViewController()
    85!
    •  xtype: ‘myxtype’
    •  reference: ‘myview’
    Advanced migration!
    

    View Slide

86. CONFIDENTIAL • Sencha Inc. ©2015
    Wire up the VC to the View!
    86!
    Link to the VC
    via the alias
    Views can listen
    to events
    app/view/main/Main.js!
    Advanced migration!
    

    View Slide

87. CONFIDENTIAL • Sencha Inc. ©2015
    Modify the Store!
    87!
    Set an alias
    app/store/Settings.js!
    Advanced migration!
    

    View Slide

88. CONFIDENTIAL • Sencha Inc. ©2015
    Create a ViewModel!
    88!
    Ext.app.ViewModel
    Set an alias
    Wire up the store
    app/view/main/MainModel.js!
    Advanced migration!
    

    View Slide

89. CONFIDENTIAL • Sencha Inc. ©2015
    Wire up the VM to the View!
    89!
    Link to the VM
    via the alias
    app/view/main/Main.js!
    Advanced migration!
    

    View Slide

90. CONFIDENTIAL • Sencha Inc. ©2015
    A store can be bound to a view!
    bind: {
    store: ‘{settings}’
    }
    !
    90!
    Bind syntax
    Advanced migration!
    

    View Slide

91. CONFIDENTIAL • Sencha Inc. ©2015
    Universal app migration!
    91!
    

    View Slide

92. CONFIDENTIAL • Sencha Inc. ©2015
    Universal apps. Views from various toolkits!
    •  Classic toolkit!
    -  Advanced desktop components!
    -  Legacy browser support!
    •  Modern toolkit!
    -  Simple DOM, CSS3 based!
    -  Fast performing !
    -  Modern browsers!
    -  Components for Touch/Mobile!
    -  Components for Mouse/Keyboard!
    92!
    Universal app migration!
    

    View Slide

93. CONFIDENTIAL • Sencha Inc. ©2015
    Generate a universal Ext JS 6 app with the same namespace!
    93!
    Universal app migration!
    

    View Slide

94. CONFIDENTIAL • Sencha Inc. ©2015
    Copy over the existing code!
    •  Copy over the Ext JS 4 / 5 contents of app to the classic/src folder!
    •  Copy over the Sencha Touch contents of app folder to the modern/src folder!
    •  (You can follow the approach of MVVM migration)!
    94!
    Universal app migration!
    

    View Slide

95. CONFIDENTIAL • Sencha Inc. ©2015
    The magic is in the generated app.json file!
    95!
    "classpath": [
    "app",
    "${toolkit.name}/src"
    ],!
    Looks into app folder first
    If not found,
    check the toolkit/src
    Universal app migration!
    

    View Slide

96. CONFIDENTIAL • Sencha Inc. ©2015
    app.json contains build targets!
    96!
    "builds": {
    "desktopprofile": {
    "toolkit": "classic",
    "theme": "theme-triton“,
    },
    "iphoneprofile": {
    "toolkit": "modern",
    "theme": "theme-cupertino",
    }
    },!
    Every profile can have a
    Toolkit and a Theme.
    You will need to
    create builds
    for every profile.
    sencha app build
    Universal app migration!
    

    View Slide

97. CONFIDENTIAL • Sencha Inc. ©2015
    Serve the right experience!
    97!
    MyApp
    <br/>var Ext = Ext || {}; // Ext namespace won't be defined yet...<br/>Ext.beforeLoad = function (tags) {<br/>var s = location.search, // the query string (ex "?foo=1&bar")<br/>profile;<br/>if (s.match(/\bdesktop\b/)) {<br/>profile = 'desktopprofile';<br/>}<br/>else if (s.match(/\biphone\b/)) {<br/>profile = 'iphoneprofile';<br/>}<br/>else {<br/>profile = tags.desktop ? 'desktopprofile' : 'iphoneprofile';<br/>}<br/>Ext.manifest = profile;<br/>};<br/>
    index.html!
    Universal app migration!
    

    View Slide

98. CONFIDENTIAL • Sencha Inc. ©2015
    Final Result!
    98!
    •  https://www.sencha.com/blog/how-to-upgrade-a-sencha-
    touch-app-to-ext-js-6-modern-toolkit-part-1/
    •  https://www.sencha.com/blog/how-to-upgrade-a-sencha-
    touch-app-to-ext-js-6-modern-toolkit-part-2/
    •  https://www.sencha.com/blog/how-to-upgrade-a-sencha-
    touch-app-to-ext-js-6-modern-toolkit-part-3/
    Universal app migration!
    

    View Slide

99. CONFIDENTIAL • Sencha Inc. ©2015
    Ext JS 5 to Ext JS 6!
    99!
    

    View Slide

100. CONFIDENTIAL • Sencha Inc. ©2015
     Ext JS Advantages overview!
     100!
     •  Custom Builds / Dynamic Loading
     •  Advanced Class System
     •  MVC Architecture
     •  Advanced Charts
     •  Sass Themes
     •  MVVM Architecture
     •  Responsive Design
     •  Touch Support
     •  Data package improvements
     •  Universal Apps
     •  Fashion: JS theme compilaDon
     •  Asynchronous JavaScript: Promises
     Ext JS 4
     New Components
     ARIA support
     Browser support
     Performance and memory opDmizaDon
     Tooling (Cmd, Architect, Plugins, Inspector, Test)
     Ext JS 5
     Ext JS 6
     Ext JS 3
     

     View Slide

101. CONFIDENTIAL • Sencha Inc. ©2015
     Ext JS 5 to Ext JS 6!
     101!
     Ext JS 3
     Ext JS 6
     Ext JS 5
     Ext JS 4
     

     View Slide

102. CONFIDENTIAL • Sencha Inc. ©2015
     Improvements compared to!
     Ext JS 5!
     102!
     

     View Slide

103. CONFIDENTIAL • Sencha Inc. ©2015
     Create universal apps!
     •  Various toolkits, apps for!
     - all devices!
     - all screen sizes!
     - all platforms!
     - all browsers!
     103!
     

     View Slide

104. CONFIDENTIAL • Sencha Inc. ©2015
     Fast theme compilation!
     Ext JS 4, 5 & Sencha Touch 2
     •  Sloooowwwww compilation!
     •  Requires Ruby to be installed!
     •  Requires Ruby knowledge!
     !
     Ext JS 6
     •  Fashion: JS based theme compilation!
     •  Compile order improvements!
     •  Write your own extensions with JS!
     •  Debug!
     104!
     

     View Slide

105. CONFIDENTIAL • Sencha Inc. ©2015
     Asynchronous JavaScript: Promises!
     Ext JS 5 & below
     •  Callbacks…!
     !
     !
     Ext JS 6
     •  Chainable promises!
     •  Ext.Promise & Ext.Deferred!
     •  EC6 A+ Spec!
     •  Integrated in Ext.Ajax!
     105!
     

     View Slide

106. CONFIDENTIAL • Sencha Inc. ©2015
     Migration in Action!
     106!
     

     View Slide

107. CONFIDENTIAL • Sencha Inc. ©2015
     Ext JS 6 is backwards compatible with Ext JS 5!
     107!
     •  It shares the same core!
     •  You just need to re-generate the project with the Ext JS 6 sdk & copy over!
     •  Additionally you want to switch to Triton theme in app.json!
     •  You might want to create universal views!
     

     View Slide

108. CONFIDENTIAL • Sencha Inc. ©2015
     Training!
     •  Comprehensive training programs for developers of all experience levels!
     •  Helps with overcoming learning curve!
     •  Delivered onsite, public, and online!
     !
     108!
     

     View Slide

109. CONFIDENTIAL • Sencha Inc. ©2015
     Professional Services!
     The Sencha Professional Services team stands ready to provide you and your team
     with hands-on expert assistance in the use of Sencha frameworks and tools!
     109!
     Enterprise mentoring and architectural planning!
     Embedded development expertise!
     Code review and best practices knowledge transfer!
     Custom application and component development!
     

     View Slide

110. CONFIDENTIAL • Sencha Inc. ©2015
     Support & Maintenance!
     •  Subscription-based support and maintenance service available to commercial
     license holders, provides access to software patches and updates!
     •  Technical advice for all stages of application development process, from design
     through to deployment!
     110!
     Free upgrade to next major release!
     Access to Premium Forums!
     Early access to custom bug fixes!
     Access to online ticketing system!
     Performance tuning!
     Remote troubleshooting!
     

     View Slide

111. CONFIDENTIAL • Sencha Inc. ©2015
     Conclusion & Resources!
     •  http://speakerdeck.com/savelee/!
     •  http://docs.sencha.com/extjs/6.0/whats_new/
     whats_new.html!
     •  http://github.com/olga-petrova/Migration_3.4_to_6!
     •  https://www.sencha.com/blog/how-to-upgrade-a-
     sencha-touch-app-to-ext-js-6-modern-toolkit-
     part-1/!
     111!
     

     View Slide

112. 112!
     Questions?!
     

     View Slide

113. 113!
     Coffee
     !!
     

     View Slide