O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

UI5 Evolution Overview 2018

1.264 visualizações

Publicada em

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

OVERVIEW: UI5 Evolution, the innovation project of UI5: History, Modular Core, Build Tooling, Rendering & Controls, Programming Models, we need you!

Publicada em: Software
  • Hello! I can recommend a site that has helped me. It's called ⇒ www.HelpWriting.net ⇐ So make sure to check it out!
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • If u need a hand in making your writing assignments - visit ⇒ www.HelpWriting.net ⇐ for more detailed information.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Seja a primeira pessoa a gostar disto

UI5 Evolution Overview 2018

  1. 1. Evolution
  2. 2. What is “UI5 Evolution”? It is “UI5’s innovation project” to solve today’s problems and to advance the framework, tooling and controls! It is the successor of project “Cheetah” defining the innovation key pillars.
  3. 3. Brief History of Time 2009 Project Phoenix was started with the goal to provide an open, flexible and platform agnostic UI layer. 2011 Strong momentum at SAP, renamed to SAPUI5, new Multi-Channel Delivery to ABAP, Java, Cloud. 2016 Fiori 2.0, Blackbird, Project Cheetah initiated to define the innovation key pillars and roadmap. 2014 OpenUI5, Web IDE, Fiori, SFIN support for SAPHIRE (entry to S/4H), strong growth (Sofia) …
  4. 4. Innovation Key Pillars Perfor-mance Modular- ization Standards & Trends Openness Compa-tibility
  5. 5. The Problem “UI5 today is monolithic! Although it has been designed for modularization, there is a tight coupling between and within Core, Rendering & Controls and Programming Model!”
  6. 6. The Solution “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!”
  7. 7. Modular Core Build and Development Tools Rendering& Controls Programming Models
  8. 8. Modular Core “Establish a future-proof foundation for code organization and dependency management, enabling applications to run with just the minimum amount of resources!”
  9. 9. 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 “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. Emerging technologies Benefit from evolving features such as ES6 modules or ES6 language features. Be open to supportTypeScript in upper layers or support transpiled code. For the framework we are mainly locked to ES5 due to browser shipment matrix. Asynchronous Loader & APIs Deprecate sync XHR! Enable module loader to be basically AMD compatible. Establish asynchronous APIs for loading Libraries, Components, Views & Controllers, i18n files. Enable asynchronous XMLView processing. Become ready for latest web features.
  10. 10. Modular Core Build and Development Tools Rendering& Controls Programming Models “Collection of Bricks” Asynchronous Loader & APIs Universal JavaScript Emerging Technologies
  11. 11. Build & Development Tooling “Create an open-source Node.js based build & development environment to support both application developers and framework developers!”
  12. 12. Build & Development Tooling Agnostic Build Modules Build modules shall be independent from a specific task runner to recycle them for arbitrary JavaScript environments like Node, Grunt, Gulp, etc. and to replace the existing in-house, Maven-based tool chain. Command Line Interface Implement a simplistic CLI which assists developers during build and development lifecycle based on a dedicated set of standard build modules.The CLI will also include a set of migration tools to assist apps to migrate to the new feature set. Self-contained packages Generate a self- contained package for the application ready for deployment. Leverage dependency management and sophisticated bundling to only include required and optimized resources. Option to generate dep- cache info for http/2 environments. Open, extensible tool chain 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.
  13. 13. Available as Open Source!!
  14. 14. Modular Core Build and Development Tools Rendering& Controls Programming Models “Collection of Bricks” Asynchronous Loader & APIs Universal JavaScript Emerging Technologies Agnostic Build Modules Command Line Interface Self-contained packages Open and extensible tool chain
  15. 15. Rendering & Controls “Define a modern control framework which simplifies the creation of agnostic, declarative, universal and themable controls which can be used with a minimalistic footprint!”
  16. 16. Rendering & Controls Lightweight Controls Implement new Control foundation, which is individually usable and requires just a minimalistic Core. Rework the “bread and butter” controls. Lightweight Controls should replace the similar old Control. Allow a side-by-side usage with the old Controls. Declarative Renderers Introduce a template-like declaration of Control renderers, which improve the agnostic usage of a renderer for different technologies. Add dependencies from a renderer to the CSS of the Control to allow for a determination of necessary CSS. Rendering Technology Introduce a modern rendering technology, which allows for an optimal re-rendering of Controls without the need to implement custom setters manually (minimize Control footprint by reduction of code). Integrate async rendering. Simplified Composition Reduce the overhead of Control composition by merging the indivi-dual Control renderers and behaviors at build time without writing manual glue code. Should ensure to get rid of variations of Controls, as of today having 500+ Controls just for slight diffs.
  17. 17. Rendering Core (minimalistic subset of UI5 Core) Lightweight Control Renderer Rendering Technology String streaming lit-html Behavior Declarative Renderer Render Context CSS Rendering & Controls UI5 classic
  18. 18. Modular Core Build and Development Tools Rendering& Controls Programming Models “Collection of Bricks” Asynchronous Loader & APIs Universal JavaScript Emerging Technologies Agnostic Build Modules Command Line Interface Self-contained packages Open and extensible tool chain Lightweight Controls Declarative Renderers Rendering Technology Control Set & Composition
  19. 19. Programming Models “Continue support for existing UI5 programming model, but move closer to de- facto standards and support trends to enable reuse of individual UI5 layers for other programming models!”
  20. 20. Programming Models UI5 classic Continuous support, but will also be affected by new APIs. A compatibility layer will ensure that legacy applications (being timeless) continue to work with UI5 Evolution and can partially benefit from improvements made in the Core and the Rendering layer. Web Components New default API for the UI5 Controls: easy to integrate, requiring a minimal footprint. Share fundamental UI5 qualities with others (Fiori UX, enterprise grade, …) Usage of latest browser standards like ES6 classes, Custom Elements, Shadow DOM and other features. Others Support for other frameworks like Angular, React andVue by providing the UI5 Controls as Web Components or Lightweight Controls. For such frameworks, there is no need for the features of the programming model of UI5 and thus usage of the UI5 Controls is sufficient. …
  21. 21. Rendering Core (minimalistic subset of UI5 Core) Lightweight Control Renderer Rendering Technology String streaming lit-html Behavior Declarative Renderer Render Context CSS Programming Models UI5 classic UI5 Web Components
  22. 22. Modular Core Build and Development Tools Rendering& Controls Programming Models “Collection of Bricks” Asynchronous Loader & APIs Universal JavaScript Emerging Technologies Agnostic Build Modules Command Line Interface Self-contained packages Open and extensible tool chain Lightweight Controls Declarative Renderers Rendering Technology Control Set & Composition UI5 classic Web Components … Others
  23. 23. But – there is one more thing! “Humans are learning from Nature and implementing it’s solutions. The evolution is a great concept of Nature and comes with an essential feature we yet miss! Curious??”
  24. 24. Declare your dependencies!Master async and be progressive! Orchestrate your code execution!Stop using deprecated APIs! We need you!
  25. 25. Thank You! Contact Information: Peter Muessig Lead Architect UI5 peter.muessig@sap.com @pmuessig Andreas Ecker Product Owner UI5 Core and Runtime andreas.ecker@sap.com

×