More Related Content
What's hot
What's hot (20)
Similar to UI5con 2019 - Keynote for Bangalore
Similar to UI5con 2019 - Keynote for Bangalore (20)
Recently uploaded
Recently uploaded (20)
UI5con 2019 - Keynote for Bangalore
- 1. Mitesh Shah (SAP Labs India) July 4, 2019 Welcome 2019
- 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. Stefan Beck (SAP SE) Peter Muessig (SAP SE) July 4, 2019 Keynote 2019
- 4. 4 Enables to upskill from anywhere in the world, at a time that suits your schedule! OPENSAP
- 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 UI5 is on a mission to assist the inventors of the WWW… BACK TO THE ROOTS
- 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 The evolution of SAP Fiori to a consistent and intuitive UI… FIORI 3 CONCEPT
- 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 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 Improve architecture, runtime behavior and dev efficiency for Fiori apps… RENOVATED FIORI UI STACK
- 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 Continuous innovation of framework, tools and the programming model… UI5 EVOLUTION
- 14. 14 Declare your dependencies!Master async and be progressive! Orchestrate your code execution!Stop using deprecated APIs! We need you!2018
- 15. 15 G/L Line Items Reference App "evolutionized"! Samsung Galaxy S7
- 16. 16 G/L Line Items Reference App "evolutionized"! Samsung Galaxy S7
- 17. 18 Performance Gain ~60% ~40-50% ~30% First Paint Initial Load Download Size
- 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. 31 To accelerate innovation, we all need to work together… A NEW ECOSYSTEM IS GROWING…
- 31. 32 UI5
- 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. 34 UI5
- 34. 35 Replace proprietary framework features with web standards CHALLENGES OF A MODERN WEB STACK
- 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. 37 UI5
- 37. 38 "The enterprise-flavored sugar on top of native APIs!" UI5 WEB COMPONENTS
- 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. 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. 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. 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. 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. 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. 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
- 46. 47 ”Increase the performance and the maintainability of UI5 controls!" UI5 EVOLUTION FOR RENDERING & CONTROLS
- 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. 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. 50 UI5 Evolution UI stack renovation UI5 Web Components Fiori 3 FOCUS TOPICS
- 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. 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