Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UI5con 2018: UI5 Evolution - The Core Changes

212 views

Published on

Join UI5 on its journey to evolve into a state-of-the-art Universal JavaScript Framework. While keeping the enterprise-proven qualities you see how fundamental changes are applied to the Core of and throughout the framework.

Featuring a layered architecture, Asynchronous Module Definition (AMD), clear dependencies, new module loaders, async variants replacing sync API, and more. Learn how you benefit from the modularization of UI5 and its complementary build and development tooling.

Understand the paradigm shift introduced by UI5 Evolution, embrace the new capabilities and leverage them for your current and future projects.

Published in: Software
  • Be the first to comment

  • Be the first to like this

UI5con 2018: UI5 Evolution - The Core Changes

  1. 1. Andreas Ecker, SAP SE June 22, 2018 UI5 Evolution The Core Changes
  2. 2. 2 Evolution
  3. 3. 3 fast modular future- proof open compat- ible GOALS
  4. 4. 4 think evo use evo
  5. 5. 5 “The evolution is already there in today’s UI5 codebase and can be used for applications: declare your dependencies, use the new asynchronous APIs and orchestrate your code execution!”
  6. 6. 6 “To carefully split our codebase in a compatible way, to provide a state-of-the-art build and development tooling and to redefine the individual layers to make them usable in a more fine granular way.”
  7. 7. 7 “UI5 today is quite monolithic! Although it has been designed for modularization, there is a tight coupling between and within the Core, the Rendering & Controls and the Programming Model!”
  8. 8. 8 “Split the different parts of UI5 into distinct yet modular layers: the Core, the Rendering & Controls and the Programming Model and allow for an individual and fine-modular consumption!”
  9. 9. 9 Modular Core Build and Development Tooling Rendering &Controls Prog. Models
  10. 10. 10 Modular Core Build and Development Tooling Rendering &Controls Prog. Models
  11. 11. 11 “Establish a future-proof foundation for code organization and dependency management, enabling applications to run with just the minimum amount of resources!”
  12. 12. 12 “Collection of Bricks” Restructure the Core modules by splitting them into a more fine granular module set for individual use. Introduce AMD-like module syntax to enforce dependency declaration and to get rid of Globals. Applies also to controls and libraries. Universal JavaScript Independence of DOM and jQuery. Lower layers of the Core are usable in DOM-less environments like Node.js or Workers to enable e.g. compile- time pre-processing of XMLViews. Higher layers incl. controls could get rid of jQuery. MODULAR CORE
  13. 13. UI5 Evolution Initial Framework + Apps Module API ( jquery.sap.* ) UI5 Globals 1.52 legacy
  14. 14. UI5 Evolution Initial Framework + Apps Preparing Framework + Apps Module API ( jquery.sap.* ) UI5 1.52 legacy internal Module dependencies Module API 1.54 GlobalsGlobals uibase
  15. 15. UI5 Evolution Initial Framework + Apps Preparing Framework + Apps Module API ( jquery.sap.* ) UI5 Preparing Framework + Apps 1.52 legacy internal Stubbing layer internal Module dependencies Module API 1.54 1.56 GlobalsGlobals uibase
  16. 16. UI5 Evolution Initial Framework + Apps Preparing Framework + Apps Module API ( jquery.sap.* ) UI5 Preparing Framework + Apps 1.52 legacy internal public Stubbing layer Migrating Apps internal Module dependencies Module API Target Framework + Apps 1.58 1.54 1.56 GlobalsGlobals uibase
  17. 17. Get rid of sync XHR (typically via synchronous API). They block the main thread, disallow execution of code in the meantime or of other requests. Task … Task …Pending Promise Task … Promise Task … Async APIs
  18. 18. 18 “Collection of Bricks” Restructure the Core modules by splitting them into a more fine granular module set for individual use. Introduce AMD-like module syntax to enforce dependency declaration and to get rid of Globals. Applies also to controls and libraries. Asynchronous APIs & Loader Deprecate sync XHR! Establish asynchro- nous APIs for loading Libraries,Components, Views & Controllers, i18n files. Async XMLView processing. Enable module loader to be basically AMD compatible. Become ready for latest web features. Universal JavaScript Independence of DOM and jQuery. Lower layers of the Core are usable in DOM-less environments like Node.js or Workers to enable e.g. compile- time pre-processing of XMLViews. Higher layers incl. controls could get rid of jQuery. Emerging technologies Allow for evolving features such as ES6 modules or ES6 language features. Be open to support TypeScript for upper levels or support transpiled code. For the framework we are mainly locked to ES5 due to browser shipment matrix. MODULAR CORE
  19. 19. UI5 Evolution Initial Apps jquery.sap.global UI5 1.52 legacy jquery.sap.declare() jquery.sap.require() AMDspec sap.ui.define() sap.ui.require() • sync • async (preload)
  20. 20. UI5 Evolution Initial Apps jquery.sap.global UI5 Migrating Apps ui5loader 1.52 legacy Private Interface jquery.sap.global Legacy Apps sap.ui.define() sap.ui.require() 1.54 jquery.sap.declare() jquery.sap.require() compat • sync • async (experimental) AMDspec jquery.sap.declare() jquery.sap.require() sap.ui.define() sap.ui.require() • sync • async (preload)
  21. 21. UI5 Evolution Initial Apps jquery.sap.global UI5 Migrating Apps ui5loader 1.52 legacy Migrating Apps Private Interface jquery.sap.global 1.56 Legacy Apps ui5loader sap.ui.define() sap.ui.require() 1.54 jquery.sap.declare() jquery.sap.require() sap.ui.define() sap.ui.require() sap.ui.loader.config( {async: true}) compat public define() require() sap.ui.loader.config( {amd: true}) • sync • async (experimental) • sync • async (config) AMDspec jquery.sap.declare() jquery.sap.require() sap.ui.define() sap.ui.require() • sync • async (preload)
  22. 22. Demo: UI5 Loader
  23. 23. Demo: UI5 Loader
  24. 24. 24 sap.ui.core openui5-sample-app sap.m openui5-sample-app Preload Self-Contained ≈ 480 KB (gzip)≈ 1.100 KB (gzip) Bundling ~ 1.100 kB (gzip) ~ 480 kB (gzip) today! sap.ui.core sap.m
  25. 25. Demo: Preload Bundling Demo: Self-Contained Bundling
  26. 26. Demo: Preload Bundling preloads (library, component)
  27. 27. Demo: Self-Contained Bundling self-contained
  28. 28. 28 Tree shakingFeature-based ≈ 480 KB (gzip) Bundling Examples: Browser, (Mobile) Platform, Keyboard Handling, Power user, ... future? sap.ui.core sap.m sap.ui.core sap.m openui5-sample-app Optional, add’tl optimization: (needs ES6 modules) openui5-sample-app
  29. 29. 29 ≈ 480 KB (gzip) Bundling future? sap.ui.core sap.m Full App openui5-sample-app
  30. 30. 30 Code Splitting ≈ 480 KB (gzip) Bundling future? sap.ui.core sap.m Start-up openui5-sample-app Remaining
  31. 31. 31 http/2 Bundling Disclaimer: Experimental! Kudos: Frank Weigel
  32. 32. Demo: http/2 Bundling (experimental) http/2 dynamic bundling
  33. 33. 33 Asynchronous Loader • A basic AMD compatible ui5loader ships • sap.ui.loader more robust, with public config() Asynchronous APIs • Replaced many sync APIs by async alternatives • Async XMLTemplateProcessor (optional) ( • Reduced sync calls, coupled renderer + control • OpenUI5 sample app starts up fully async • Harmonized global factory APIs (all async) 1.52 1.54 1.56 1.54 1.56 “Collection of Bricks” • Promote sap.ui.define() and sap.ui.require() • New modules, internal behind compat layer • Stubbing, so apps work in modular environment • Avoid hard dependencies via lazy instanceof • Fine-granular modules become public (replacing legacy jquery.sap.* modules) • Remove calls to legacy jquery.sap.* API Universal JavaScript • jQuery removed in lower layers or pushed upwards • DOM-less "base" core and a ”ui" layer 1.54 1.56 1.58 1.58
  34. 34. 34 think evo use evo
  35. 35. Contact information: Andreas Ecker Product Owner UI5 Core and Runtime andreas.ecker@sap.com Thank you.
  36. 36. Contact information: Andreas Ecker Product Owner UI5 Core and Runtime andreas.ecker@sap.com Think evo!

×