$30 off During Our Annual Pro Sale. View Details »

Migration to Ext JS 6 - Roadshow 2016 presentation

Migration to Ext JS 6 - Roadshow 2016 presentation

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

Lee Boonstra

March 16, 2016
Tweet

More Decks by Lee Boonstra

Other Decks in Technology

Transcript

  1. 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!
  2. 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!
  3. 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!
  4. 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!
  5. 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
  6. 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
  7. 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!
  8. CONFIDENTIAL • Sencha Inc. ©2015 Custom Builds / Dynamic Loading!

    Ext JS 3 & below •  ext-all.js! •  ext-all.css! •  Manually ordering of scripts in <head>! ! Ext JS 6 •  Microloader! •  Custom builds with Sencha Cmd! ! 13!
  9. CONFIDENTIAL • Sencha Inc. ©2015 MVC Architecture! Ext JS 3

    & below •  Spaghetti code! ! Ext JS 6 •  Advanced class system! •  MVVM or MVC! •  Models! 14!
  10. 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!
  11. 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!
  12. 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!
  13. CONFIDENTIAL • Sencha Inc. ©2015 19! ARIA support! •  DOM

    attributes provide semantic information! •  Keyboard Navigation! •  Focus Management! •  High Contrast Theme!
  14. CONFIDENTIAL • Sencha Inc. ©2015 20! Latest framework! •  Browser

    support! •  Performance updates! •  Memory optimization!
  15. CONFIDENTIAL • Sencha Inc. ©2015 Tooling! Productivity and quality improvements:!

    ! •  Sencha Cmd! •  Sencha Architect! •  Sencha Inspector! •  IDE plugins! •  Sencha Test! ! 21!
  16. CONFIDENTIAL • Sencha Inc. ©2015 Key approach for Ext JS

    3 & below! 24! Component Model View ViewModel ViewController
  17. 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!
  18. CONFIDENTIAL • Sencha Inc. ©2015 39! The data will be

    in ViewModel The data will be in ViewModel
  19. 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
  20. 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
  21. 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
  22. CONFIDENTIAL • Sencha Inc. ©2015 Method implementation in the View

    Controller! 47! app/view/company/GridController.js! Ext JS 3 migration!
  23. 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
  24. CONFIDENTIAL • Sencha Inc. ©2015 Ext JS 4 to Ext

    JS 6! 51! Ext JS 3 Ext JS 6 Ext JS 5 Ext JS 4
  25. 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
  26. 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!
  27. CONFIDENTIAL • Sencha Inc. ©2015 Touch support! Ext JS 4

    and below •  Browser default! Ext JS 6 •  Event normalization! •  Gestures (pinch, swipe…)! •  Touch themes! 57!
  28. 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!
  29. 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
  30. 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
  31. CONFIDENTIAL • Sencha Inc. ©2015 Migration in Action! 62! for

    Sencha Touch 2 / Ext JS 4 it’s pretty similar…!
  32. CONFIDENTIAL • Sencha Inc. ©2015 3 types of migration! • 

    Simple migration (keep MVC pattern)! •  Advanced migration (move to MVVM pattern)! •  Advanced migration + universal app! 63!
  33. 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!
  34. 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!
  35. 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!
  36. 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!
  37. CONFIDENTIAL • Sencha Inc. ©2015 sencha app refresh! •  Run

    on the command-line:! 69! Simple migration!
  38. CONFIDENTIAL • Sencha Inc. ©2015 ERRORS!! •  Let’s fix the

    errors! •  IMAGE ERRRORS IN CMD + BROWSER! 70! Simple migration ! [ERR] ERROR! [ERR] ERROR! WAIT? WHAT?!!!
  39. 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! !
  40. 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!
  41. 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!
  42. 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!
  43. 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!
  44. 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!
  45. 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!
  46. 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
  47. CONFIDENTIAL • Sencha Inc. ©2015 MVVM is more scalable! 80!

    ViewModel View ViewController Model Advanced migration! ViewModel View ViewController Model ViewModel View ViewController
  48. 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!!
  49. 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!
  50. 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!
  51. 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!
  52. 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!
  53. CONFIDENTIAL • Sencha Inc. ©2015 Modify the Store! 87! Set

    an alias app/store/Settings.js! Advanced migration!
  54. 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!
  55. 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!
  56. CONFIDENTIAL • Sencha Inc. ©2015 A store can be bound

    to a view! bind: { store: ‘{settings}’ } ! 90! Bind syntax Advanced migration!
  57. 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!
  58. CONFIDENTIAL • Sencha Inc. ©2015 Generate a universal Ext JS

    6 app with the same namespace! 93! Universal app migration!
  59. 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!
  60. 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!
  61. 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!
  62. CONFIDENTIAL • Sencha Inc. ©2015 Serve the right experience! 97!

    <title>MyApp</title> <script type="text/javascript"> var Ext = Ext || {}; // Ext namespace won't be defined yet... Ext.beforeLoad = function (tags) { var s = location.search, // the query string (ex "?foo=1&bar") profile; if (s.match(/\bdesktop\b/)) { profile = 'desktopprofile'; } else if (s.match(/\biphone\b/)) { profile = 'iphoneprofile'; } else { profile = tags.desktop ? 'desktopprofile' : 'iphoneprofile'; } Ext.manifest = profile; }; </script> index.html! Universal app migration!
  63. 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!
  64. 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
  65. CONFIDENTIAL • Sencha Inc. ©2015 Ext JS 5 to Ext

    JS 6! 101! Ext JS 3 Ext JS 6 Ext JS 5 Ext JS 4
  66. CONFIDENTIAL • Sencha Inc. ©2015 Create universal apps! •  Various

    toolkits, apps for! - all devices! - all screen sizes! - all platforms! - all browsers! 103!
  67. 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!
  68. 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!
  69. 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!
  70. 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!
  71. 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!
  72. 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!
  73. 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!