UI5con 2017 - UI5 Evolution
•6 gefällt mir•4,710 views
Melden
Teilen
Downloaden Sie, um offline zu lesen
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.
Recomendados
Más contenido relacionado
Was ist angesagt?
Was ist angesagt?(20)
Similar a UI5con 2017 - UI5 Evolution
Similar a UI5con 2017 - UI5 Evolution(20)
Último
Último(20)
UI5con 2017 - UI5 Evolution
- 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 What is UI5 Evolution?
- 3. 3 This is the innovation project of UI5 !
- 4. 4 Why do we do UI5 Evolution?
- 5. 5 To be the enterprise grade UI technology of choice for SAP … … and beyond !
- 7. 7 UI5 Evolution Build Tooling Modular Core Rendering & Controls Prog. Models Focus Areas Layered Architecture
- 8. 8 UI5 Evolution Build Tooling Modular Core Rendering & Controls Prog. Models Layered Architecture
- 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 Demo
- 11. 11 …
- 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 Layered Architecture UI5 Evolution Modular Core “Collection of bricks” Feature Clusters Dependency Declaration Universal JavaScript Build Tooling Rendering & Controls Prog. Models
- 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 Demo
- 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 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 “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 Demo
- 21. 21
- 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 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 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 Demo
- 26. 26
- 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 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…
- 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!
Hinweis der Redaktion
- UI5 evolution is the successor of project Cheetah and the innovation project of UI5.
- Start with the Duplo Block Split into separate pieces => Modularization Build the jet => Performance Add the train => Trends Why do we not do this together with the community? - We need to learn what to do? We need a plan what to do and provide the basement/structures! - We need to see how we can do that?
- 15min – 20min
- The Whys: “Remove sync XHR, leverage dependency analysis for existing bundling tools, standard module loaders, HTTP/2, etc.!” “Make independent of DOM API and jQuery to structure and maintain code in a clean, layered architecture!” “Universal Core allows for build time optimizations such as XML templating!” “Allows to reduce footprint by picking and combining the individual parts needed, instead of a larger, monolithic code!” “Helps to renovate the libraries concept – remove the runtime overhead!”
- Demo: Showcase new module structure / Migration tooling (explain) => compatibility!
- jquery.sap.* modules will be split into individual modules and used inside jquery.sap.* modules to ensure compatibility for legacy scenarios
- 20min-25min Explain the importance of the build tooling
- The Whys: “Plays a central role for performance; a lot of runtime aspects shift to compile-time!” “Supports developers in entire lifecycle, e.g. generating apps from sources, testing or scaffolding projects and assets!” “Establish a familiar environment for developers, which can be easily enhanced with additional tools!” “Is to become open-source and uses open-source to benefit from de facto standard tooling and innovations!” “Bridges the gaps of today‘s Node.js tooling for large software projects and fulfills enterprise scaling requirements!” --- Environment: CLI for simplistic and standard usage / individual build modules for integration aspects and custom usage Continuous Transition Identify features of existing Maven build tools to be converted and complemented by node.js solutions. Reference apps Provide and evolve sample apps that perfectly align with the development activities for a modular core and build tooling. Low complexity while showcasing all practical use cases. Developing apps Generate a running app from sources, across code repos, unmodified and not relocated. For a maximum of debugging capabilities and improved developer efficiency. Deploying apps Generate a self-contained application ready for deployment. Leverage dependency management and sophisticated bundling to only include required, optimized resources. Hybrid mobile apps Demonstrate practical deployment of such a self-contained app package via Apache Cordova framework.
- Demo: Comparision of preload and custom build…
- Self-contained build => 1/3 size of preload build.
- 25min-30min
- Composition: aggregates standard controls or other composites -> lower the amount of controls to provide The Whys: “Strict separation between rendering & programming model!” “Rendering layer should be agnostic to support arbitrary programming models – without the overhead of using the UI5 programming model!” “Reduce the amount of controls; establish better composition support without overhead!” “Allow the usage of the rendering during runtime and compile-time!” “Shift rendering to Web Workers!”
- Demo: Showcase how the handlebars based rendering
- Example of declarative renderer based on Handlebars
- 35min
- Demo: Showcase a Fiori application with new codebase
- Fiori Elements application runs on top of Evolution code base.