Peter Muessig & Andreas Ecker, SAP
June 30, 2017
UI5
Evolution
DISCLAIMER: No guarantees about future features! The whole ...
2
What is UI5 Evolution?
3
This is the
innovation project
of UI5 !
4
Why do we do UI5 Evolution?
5
To be the enterprise grade UI
technology of choice for SAP …
… and beyond !
6
Modularization
Performance
Trends
Compatibility
Openness
Qualities
7
UI5 Evolution
Build Tooling
Modular Core
Rendering & Controls
Prog. Models
Focus Areas  Layered Architecture
8
UI5 Evolution
Build Tooling
Modular Core
Rendering & Controls
Prog. Models
Layered Architecture
9
“Establish a future-proof foundation for code organization and dependency
management, enabling applications to run with ...
10
Demo
11
…
12
Layered Architecture
UI5 Evolution
Modular
Core
“Collection
of bricks”
Feature
Clusters
Dependency
Declaration
Universa...
13
Layered Architecture
UI5 Evolution
Modular
Core
“Collection
of bricks”
Feature
Clusters
Dependency
Declaration
Universa...
14
“Create an open-source Node.js based build & development environment to
support application developers and framework de...
15
Demo
16
https://github.com/SAP/openui5-sample-app
library-preload:
sap-ui-custom:
17
Layered Architecture
UI5 Evolution
Build Tooling
Modular
Core
“Collection
of bricks”
Feature
Clusters
Dependency
Declar...
18
Layered Architecture
UI5 Evolution
Modular
Core
“Collection
of bricks”
Feature
Clusters
Dependency
Declaration
Universa...
19
“Decouple the rendering & controls from the programming model and make it
individually and universally usable!”
Static ...
20
Demo
21
22
Layered Architecture
UI5 Evolution
Build Tooling
Modular
Core
Rendering
&Controls
Static
Control
Renderers
Static
Contr...
23
Layered Architecture
UI5 Evolution
Modular
Core
“Collection
of bricks”
Feature
Clusters
Dependency
Declaration
Universa...
24
Continue support for existing programming model and support trends to enable
reuse of individual UI5 layers for other p...
25
Demo
26
27
Layered Architecture
UI5 Evolution
Build Tooling
Modular
Core
Rendering
&Controls
Prog.
Models
UI5
(classic)
UI5
(react...
28
Layered Architecture
UI5 Evolution
Modular
Core
“Collection
of bricks”
Feature
Clusters
Dependency
Declaration
Universa...
29
Let’s evolve …
Thank you.
Contact information:
Peter Muessig
@pmuessig
Andreas Ecker
You are welcome to give feedback for this session
in...
Nächste SlideShare
Wird geladen in …5
×

UI5con 2017 - UI5 Evolution

1.580 Aufrufe

Veröffentlicht am

Slides from the session at UI5con@SAP 2017.

DISCLAIMER: No guarantees about future features! The whole topic is work in progress and anything might change at any time!

OVERVIEW: This session will provide an overview about the UI5 Evolution topic. UI5 Evolution is thought as the innovation project of OpenUI5/SAPUI5 which focuses on evolution of the Modular Core, Build Tooling, Rendering & Controls and Programming Model. Our challenge will be to do this innovation in a compatible way so that also existing applications will be able to partially benefit.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

UI5con 2017 - UI5 Evolution

  1. 1. Peter Muessig & Andreas Ecker, SAP June 30, 2017 UI5 Evolution DISCLAIMER: No guarantees about future features! The whole topic is work in progress and anything might change at any time!
  2. 2. 2 What is UI5 Evolution?
  3. 3. 3 This is the innovation project of UI5 !
  4. 4. 4 Why do we do UI5 Evolution?
  5. 5. 5 To be the enterprise grade UI technology of choice for SAP … … and beyond !
  6. 6. 6 Modularization Performance Trends Compatibility Openness Qualities
  7. 7. 7 UI5 Evolution Build Tooling Modular Core Rendering & Controls Prog. Models Focus Areas  Layered Architecture
  8. 8. 8 UI5 Evolution Build Tooling Modular Core Rendering & Controls Prog. Models Layered Architecture
  9. 9. 9 “Establish a future-proof foundation for code organization and dependency management, enabling applications to run with just the minimum amount of resources!” Deprecation of Sync XHR Introduce async alternatives to address risk of Google Chrome changes. Create more powerful foundation with clear dependency declaration. Independence of DOM and jQuery Lower layers of the Core become agnostic to typical browser environments; monolithic code gets broken up. Universal Core Runs not only in browser- based environments, but also in DOM-less ones (Node.js, Web Workers). Allows compile-time pre- processing on Node.js (e.g. XML Templates). Modular Architecture Get rid of Globals, Modules reorganized. Not just the Core but the framework and libraries are modular and apply best practice patterns. Embrace emerging technologies Benefit from evolving features such as ES6 modules or ES6 language features. Be open to support TypeScript for upper levels or support transpiled code. Configuration Options Includes environment information and runtime feature detection to further structure the codebase and make it flexible in a parameterized way. Modular Core
  10. 10. 10 Demo
  11. 11. 11 …
  12. 12. 12 Layered Architecture UI5 Evolution Modular Core “Collection of bricks” Feature Clusters Dependency Declaration Universal JavaScript Build Tooling Rendering & Controls Prog. Models
  13. 13. 13 Layered Architecture UI5 Evolution Modular Core “Collection of bricks” Feature Clusters Dependency Declaration Universal JavaScript Build Tooling Rendering & Controls Prog. Models
  14. 14. 14 “Create an open-source Node.js based build & development environment to support application developers and framework developers!” Self-contained packages Generate a self-contained application ready for deployment. Leverage dependency management and sophisticated bundling to only include required, optimized resources. Advanced packaging Feature-based builds to optimize beyond module level by code manipulations. Integration scenarios (e.g. FLP) to be addressed by dynamic bundling & loading mechanisms. Migration tools Support existing applications to migrate to the new asynchronous alternatives of the Modular Core by converting classic modules to UI5 AMD modules and to clean-up Globals. Command Line Interface Implement a simplistic CLI which assists developers during build and development lifecycle based on a dedicated set of standard build modules. Enhance Toolchain Complete app lifecycle aspects such as initial creation of a individual, pre-configured app project; improve dev experience for minimal round-trip (e.g. watch & reload) and provide additional compile-time optimizations. Agnostic build modules Build modules shall be independent from a specific task runner to recycle them for arbitrary JavaScript environments like Node, Grunt, Gulp, … and should be even more used to replace the existing in-house Maven based toolchain. Build Tooling
  15. 15. 15 Demo
  16. 16. 16 https://github.com/SAP/openui5-sample-app library-preload: sap-ui-custom:
  17. 17. 17 Layered Architecture UI5 Evolution Build Tooling Modular Core “Collection of bricks” Feature Clusters Dependency Declaration Universal JavaScript Open Source & Node.js based Agnostic Build Modules Developer & Operational Productivity Bundling & Loading Rendering & Controls Prog. Models
  18. 18. 18 Layered Architecture UI5 Evolution Modular Core “Collection of bricks” Feature Clusters Dependency Declaration Universal JavaScript Rendering & Controls Prog. Models Build Tooling Open Source & Node.js based Agnostic Build Modules Developer & Operational Productivity Bundling & Loading
  19. 19. 19 “Decouple the rendering & controls from the programming model and make it individually and universally usable!” Static Renderer Separate the API & behavior from the renderer; only the renderer should interact with the DOM; establish a clear interface between programming model and control renderers New Renderer Syntax Define a new declarative syntax for the renderers which improves their readability and simplifies the usage of tools on top of them Rework of B’n’B Controls The bread & butter controls of UI5 should be re-implemented with the new renderer syntax; showcase that new concepts work to replace the existing rendering and protects developers from common pitfalls of today Simplified Composition Reduce the overhead of control composition by merging the individual control renderers and behaviors at build time without writing manual glue code Side-by-side Integration The new rendering should be usable side-by-side with the old rendering; direct comparison of rendering approaches; should support smooth transition to new rendering framework without breaking existing applications Agnostic Proof Verify the new renderers and behaviors can be used within other programming models to proof the agnosticity Rendering & Controls
  20. 20. 20 Demo
  21. 21. 21
  22. 22. 22 Layered Architecture UI5 Evolution Build Tooling Modular Core Rendering &Controls Static Control Renderers Static Control Behavior Declarative Renderer Syntax “Collection of bricks” Feature Clusters Dependency Declaration Universal JavaScript Open Source & Node.js based Agnostic Build Modules Developer & Operational Productivity Bundling & Loading Simplified Composite Controls Prog. Models
  23. 23. 23 Layered Architecture UI5 Evolution Modular Core “Collection of bricks” Feature Clusters Dependency Declaration Universal JavaScript Prog. Models Build Tooling Open Source & Node.js based Agnostic Build Modules Developer & Operational Productivity Bundling & Loading Rendering &Controls Static Control Renderers Static Control Behavior Declarative Renderer Syntax Simplified Composite Controls
  24. 24. 24 Continue support for existing programming model and support trends to enable reuse of individual UI5 layers for other programming models… UI5 classic Will be fully supported by UI5 evolution but will only partially benefit from improvements as e.g. the modules have not been updated properly. UI5 reactive Not yet decided, but during the Cheetah project we noticed that reactive paradigms simplify the data flow inside applications and is a clear benefit for highly interactive applications. Programming Models Reuse individual layers Other programming models should be able to reuse individual pieces (e.g. the core and the rendering) of UI5 without the need to pull all pieces. UI5 classic (migrated) Will benefit as much as possible from UI5 evolution as the modules have been migrated and adopted to the UI5 AMD syntax.
  25. 25. 25 Demo
  26. 26. 26
  27. 27. 27 Layered Architecture UI5 Evolution Build Tooling Modular Core Rendering &Controls Prog. Models UI5 (classic) UI5 (reactive) Others Static Control Renderers Static Control Behavior Declarative Renderer Syntax “Collection of bricks” Feature Clusters Dependency Declaration Universal JavaScript Open Source & Node.js based Agnostic Build Modules Developer & Operational Productivity Bundling & Loading Simplified Composite Controls …
  28. 28. 28 Layered Architecture UI5 Evolution Modular Core “Collection of bricks” Feature Clusters Dependency Declaration Universal JavaScript Build Tooling Open Source & Node.js based Agnostic Build Modules Developer & Operational Productivity Bundling & Loading Rendering &Controls Static Control Renderers Static Control Behavior Declarative Renderer Syntax Simplified Composite Controls Prog. Models UI5 (classic) UI5 (reactive) Others…
  29. 29. 29 Let’s evolve …
  30. 30. Thank you. Contact information: Peter Muessig @pmuessig Andreas Ecker You are welcome to give feedback for this session in the UI5con Event App DISCLAIMER: No guarantees about future features! The whole topic is work in progress and anything might change at any time!

×