Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

UI5con 2019 - Keynote for Bangalore

422 Aufrufe

Veröffentlicht am

UI5con 2019 - Keynote: Welcome, ROOT, Fiori 3 Concept, Renovated UI Stack, UI5 Evolution, UI5 Tooling Ecosystem, Challenges of a Modern Web Stack, UI5 Web Components, UI5 Evolution for Rendering & Controls

Links:
https://blogs.sap.com/2018/04/26/ui5ers-buzz-29-asynchronify-your-app/
https://blogs.sap.com/2018/11/19/ui5ers-buzz-38-modularization-of-the-sapui5-core/
https://blogs.sap.com/2018/12/17/ui5ers-buzz-40-ui5-evolution-the-modular-core/
https://blogs.sap.com/2018/12/18/ui5ers-buzz-41-best-practices-for-async-loading-in-ui5/
https://blogs.sap.com/2018/12/27/ui5ers-buzz-41-ui5-evolution-the-build-and-development-tooling/

Docu:
https://openui5.hana.ondemand.com/#/topic/91f23a736f4d1014b6dd926db0e91070 (Modules and Dependencies)
https://openui5.hana.ondemand.com/#/topic/a075ed88ef324261bca41813a6ac4a1c (jQuery.sap Replacement)
https://openui5.hana.ondemand.com/#/topic/491bd9c70b9f4c4d913c8c7b4a970833 (Async Factories Functions)
https://openui5.hana.ondemand.com/#/topic/676b636446c94eada183b1218a824717 (Use Async Loading)
https://openui5.hana.ondemand.com/#/topic/493a15aa978d4fe9a67ea9407166eb01.html (Is your app ready for async?)

Veröffentlicht in: Software
  • Did you try ⇒ www.HelpWriting.net ⇐?. They know how to do an amazing essay, research papers or dissertations.
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Positions Available Now! We currently have several openings for writing workers. ◆◆◆ http://ishbv.com/easywriter/pdf
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Gehören Sie zu den Ersten, denen das gefällt!

UI5con 2019 - Keynote for Bangalore

  1. 1. Mitesh Shah (SAP Labs India) July 4, 2019 Welcome 2019
  2. 2. 2 Stefan Beck is the Chief Product Owner of SAPUI5, part of the project from the very beginning and enthusiastic to meet you at UI5con. Peter Muessig is one of the initiators who started the Phoenix project (a.k.a. OpenUI5/SAPUI5). Today, he is working as Chief Development Architect for UI5.
  3. 3. Stefan Beck (SAP SE) Peter Muessig (SAP SE) July 4, 2019 Keynote 2019
  4. 4. 4 Enables to upskill from anywhere in the world, at a time that suits your schedule! OPENSAP
  5. 5. 5 Evolved Web Apps with SAPUI5 Michael Graf, Margot Wollny, Arnd vom Hofe and UI5 experts Enrollments 13945 First Day 18435 Last Day 17% Success Rate* 12% Female 88% Male 95% Professionals Learners from more than 108 countries. The top 5 countries are: 2712 Discussion Posts “Hi, I would like to congratulate also, this was the best Open SAP course that I have taken. There was nice exercise which really helps to understand and practice the development. The most I like the challenges, which was good to do and learn topic in more details. Than you . ” “For the SAPUI5 experts team ! Thank you very much for the course! in my opinion it was perfect, i am a begginer in UI5 and now i have conditions to continue improving my knowlege in this area. The content was good and the time to conclude the exercises was appropriate….” 9% United States 28% India 19% Germany 4% Brasil 3% Spain compared to an average of 4-7% reported by academic MOOC providers 2696 Records of Achievement ThisinformationiscorrectasofMonth,20## Youngest participant 18 Oldest participant 79 *based on half-way enrollments yrs yrs
  6. 6. 6 UI5 is on a mission to assist the inventors of the WWW… BACK TO THE ROOTS
  7. 7. 7 ROOT – Data Analysis Framework Modular Scientific Framework  Developed by CERN and research community  Big Data Processing  Statistical Analysis  Visualization and Storage Why UI5?  Open Source and Apache License, Version 2  Long Term Support Where can UI5 help?  Shift from X11 desktop apps to web apps  Effective handling of mass data  Model-View-Controller and Control Set
  8. 8. 8 The evolution of SAP Fiori to a consistent and intuitive UI… FIORI 3 CONCEPT
  9. 9. 9 SAP Fiori 3 is our new target design, which evolves the SAP Fiori design language for all SAP products to fully support the Intelligent Suite. SAP Fiori 3 This is the current state of planning and may be changed by SAP at any time without notice. Flexible, simple, and convenient, with machine intelligence guiding users to make their work easier
  10. 10. 10 The Evolution of SAP Fiori Casual User Self Services Power User SAP Fiori 2013 SAP Fiori 2.0 2016 SAP Fiori 3 This is the current state of planning and may be changed by SAP at any time without notice. Conversational with SAP CoPilot Consistent Intelligent Intuitive now
  11. 11. 11 Improve architecture, runtime behavior and dev efficiency for Fiori apps… RENOVATED FIORI UI STACK
  12. 12. 12 Renovated Fiori UI Stack Stateful Fiori Apps based on Fiori Elements  Enhance Fiori for stateful Power User Apps OData V4  Cross-Service Navigation  JSON Payload format  Specific HTTP choreographies  Many small round-offs and improvements Meta Data Driven Controls  On control level and protocol agnostic  Reusable building blocks Faster and consistent  Consistent concepts  Optimal caching strategy
  13. 13. 13 Continuous innovation of framework, tools and the programming model… UI5 EVOLUTION
  14. 14. 14 Declare your dependencies!Master async and be progressive! Orchestrate your code execution!Stop using deprecated APIs! We need you!2018
  15. 15. 15 G/L Line Items Reference App "evolutionized"! Samsung Galaxy S7
  16. 16. 16 G/L Line Items Reference App "evolutionized"! Samsung Galaxy S7
  17. 17. 18 Performance Gain ~60% ~40-50% ~30% First Paint Initial Load Download Size
  18. 18. 19 UI5 Evolution Concepts UI5con 2017 UI5con 2018 UI5con 2019
  19. 19. 20 UI5 Evolution Concepts UI5con 2017 UI5con 2018 UI5con 2019
  20. 20. 21 UI5 Evolution Concepts UI5con 2017 UI5con 2018 UI5con 2019
  21. 21. 22 UI5 Evolution Concepts UI5con 2017 UI5con 2018 UI5con 2019
  22. 22. 23 UI5 Evolution Concepts UI5con 2017 UI5con 2018 UI5con 2019
  23. 23. 24 UI5 Evolution Concepts UI5con 2017 UI5con 2018 UI5con 2019
  24. 24. 25 UI5 Evolution Concepts UI5con 2017 UI5con 2018 UI5con 2019 UI5 1.60
  25. 25. 26 UI5 Evolution Concepts UI5con 2017 UI5con 2018 UI5con 2019 UI5 1.60
  26. 26. 27 UI5 Evolution Concepts UI5con 2017 UI5con 2018 UI5con 2019 UI5 1.60
  27. 27. 28 UI5 Evolution Concepts UI5con 2017 UI5con 2018 UI5con 2019 UI5 1.60 UI5 1.61
  28. 28. 29 UI5 Evolution Concepts UI5con 2017 UI5con 2018 UI5con 2019 UI5 1.60 UI5 1.61
  29. 29. 30 UI5 Tooling Tooling Open-Source CLI Tooling :  Build and development tools for UI5 applications, reuse components and libraries Easy Integration:  Via CLI into arbitrary Editors and Build Tools  Standard build for UI5 projects in SAP Web IDE New Kids on the Block:  New Karma UI5 Plugin to simplify testing  Migration tooling to update the UI5 codebase Open and Extensible Toolchain:  Extend the UI5 builder via custom tasks  Extend the UI5 server via express middleware Migration Karma
  30. 30. 31 To accelerate innovation, we all need to work together… A NEW ECOSYSTEM IS GROWING…
  31. 31. 32 UI5
  32. 32. 33 UI5 and TypeScript Project:  https://github.com/SAP/ui5-typescript/ Description:  Enables TypeScript support for UI5 framework and control libraries (e.g. for type checks)  Better IDE integration for UI5 projects (enables content assist)  Generates the TypeScript definitions based on the JSDoc of UI5 Kudos to:  Shahar Soel (SAP Web IDE) +
  33. 33. 34 UI5
  34. 34. 35 Replace proprietary framework features with web standards CHALLENGES OF A MODERN WEB STACK
  35. 35. 36 20192014 Web Stack Evolution: "More Web Standards, Less Frameworks!" ECMAScript 5 Browser Events HTML Elements Rendering Data Services Internationalization Theming (via Less) UI5 Components UI5 Controls (UI Elements) Modules Web Components CSS Variables Custom Elements Modules ECMAScript 7 Browser Events HTML Elements Rendering Data Services Internationalization Custom UI Elements Web Standards Framework
  36. 36. 37 UI5
  37. 37. 38 "The enterprise-flavored sugar on top of native APIs!" UI5 WEB COMPONENTS
  38. 38. 39 Easy consumption of UI5 controls reimplemented as Web Components for UI framework agnostic usage Share fundamental UI5 qualities with others to provide enterprise- grade features, Fiori UX and themeability Designed for small footprint since Web Components are based on native APIs rather than UI5 control framework Targeting for Web Developers who need the flexibility to use custom HTML tags instead of UI5 controls What are UI5 Web Components? Consistency
  39. 39. 40 Easy consumption of UI5 controls reimplemented as Web Components for UI framework agnostic usage Share fundamental UI5 qualities with others to provide enterprise- grade features, Fiori UX and themeability Designed for small footprint since Web Components are based on native APIs rather than UI5 control framework Targeting for Web Developers who need the flexibility to use custom HTML tags instead of UI5 controls What are UI5 Web Components? Web Standards
  40. 40. 41 Easy consumption of UI5 controls reimplemented as Web Components for UI framework agnostic usage Share fundamental UI5 qualities with others to provide enterprise- grade features, Fiori UX and themeability Designed for small footprint since Web Components are based on native APIs rather than UI5 control framework Targeting for Web Developers who need the flexibility to use custom HTML tags instead of UI5 controls What are UI5 Web Components? Lightweight
  41. 41. 42 Easy consumption of UI5 controls reimplemented as Web Components for UI framework agnostic usage Share fundamental UI5 qualities with others to provide enterprise- grade features, Fiori UX and themeability Designed for small footprint since Web Components are based on native APIs rather than UI5 control framework Targeting for Web Developers who need the flexibility to use custom HTML tags instead of UI5 controls What are UI5 Web Components? Web Developers
  42. 42. 43 Get Started – Visit our Playground The GitHub project hosts the Playground application as GitHub page:  Discover and get started with the new UI5 Web Components  Explore the code in the GitHub repository, the examples in the Playground and the integration possibilities in other frameworks in the demo applications  Read more about the features of each Web Component in their documentation  Connect with our community (e.g. Slack: #webcomponents), help us to improve them or report issues
  43. 43. 44 Fiori 3 Reference App Show case for Fiori 3 related controls with UI5 Web Components:  UI5 Web Components are used as UI elements  React is used as programming model to implement the application flow  BUT: React using and Web Components together is a bit cumbersome as of today  Attaching to Custom Events  Handling of Boolean Properties  Auto Completion (via TypeScript)
  44. 44. 45 UI5 Web Components for React The GitHub project hosts the Playground application as GitHub page:  Fiori 3 compliant React library built on top of the UI5 Web Components  Allows to use UI5 Web Components as if they were native React components  Provides layouts and some more complex components on top of UI5 Web Components
  45. 45. 46 Release Timelines UI5con 2018 UI5con 2019 Feb 2019
  46. 46. 47 ”Increase the performance and the maintainability of UI5 controls!" UI5 EVOLUTION FOR RENDERING & CONTROLS
  47. 47. 48 Benefits:  Increase Performance and Maintainability  Reduce code of UI5 controls (no custom setters)  Simplify side-by-side use-cases (other fwrks) Rendering Syntax:  Compatible with V1 Renderer Syntax  Incremental DOM like API for V2 Renderer  No manual DOM patching needed Rendering Engine:  Apply the initial mark-up via innerHTML  Update the UI elements via DOM patching  Increase FPS for mass control-updates DOM-based Rendering V2 V2 V2 V2 V2 V2 V2 V1 V2 V2 V2 V2 V1 V1 Updated on Next Rendering CycleDirty Node requires Update Codename: Semantic Rendering UI5 1.67
  48. 48. 49 Benefits:  Increase Performance and Maintainability  Reduce code of UI5 controls (no custom setters)  Simplify side-by-side use-cases (other fwrks) Rendering Syntax:  Compatible with V1 Renderer Syntax  Incremental DOM like API for V2 Renderer  No manual DOM patching needed Rendering Engine:  Apply the initial mark-up via innerHTML  Update the UI elements via DOM patching  Increase FPS for mass control-updates DOM-based Rendering Codename: Semantic Rendering + UI5 1.67
  49. 49. 50 UI5 Evolution UI stack renovation UI5 Web Components Fiori 3 FOCUS TOPICS
  50. 50. 51 …migrate your Renderers! …help us to extend the ecosystem! …enjoy UI5con! …apply the UI5 Evolution Concepts! Now, it’s your turn to…
  51. 51. Thank you. Contact information: Stefan Beck Chief Product Owner UI5 stefan.beck@sap.com Peter Muessig Chief Development Architect UI5 peter.muessig@sap.com @pmuessig

×