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.

UI5 Tooling & Ecosystem

431 Aufrufe

Veröffentlicht am

The modern CLI-based development experience to develop, run and test UI5 applications and libraries.

Explains the UI5 Tooling and describes the motivation, architecture and some insights into the usage. In addition, the extensibility concept is explained and a the Ecosystem Showcase is linked. It also explains UI5 Tooling 2.0 which now can use SAPUI5 from NPM and the new features of the UI5 Tooling 2.0. It also explains other parts around Yeoman and TypeScript definitions as well as s very brief and early outlook to a more modern dev experience using OSS tools like TypeScript, Babel, ...

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

  • Gehören Sie zu den Ersten, denen das gefällt!

UI5 Tooling & Ecosystem

  1. 1. PETER MUESSIG, MARGOT WOLLNY APR 01, 2020 UI5 TOOLING & ECOSYSTEM The modern CLI-based development experience to develop, run and test UI5 applications and libraries
  2. 2. 2PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ
  3. 3. 3PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ UI5
  4. 4. 4PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ “Development Efficiency is Key!”
  5. 5. 5PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ UI5 Tooling The UI5 Tooling is developed as an open source project based on Node.js. It offers a modular, configurable, and extensible command line interface tailored for efficient development of applications, libraries, and reuse components with the UI5 framework. >_ Not the official logo, yet! ;-)
  6. 6. 6PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ Increase the developer experience and thus the developer efficiency. Motivation Support for any IDE of choice Flexible and extensible Enable modern language features Reuse of open source tooling Easy to integrate
  7. 7. 7PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ Architectural Overview M Server Middleware T Builder Task Command Line Web Browser node.js script … SAP Business Application Studio SAP Web IDE LocalUI5 Tooling Project File System Server Logger Builder CLI MMM TTT M T
  8. 8. 9PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ Types define how a project can be configured and how it is built. The UI5 Tooling distinguishes between the following types: Project Types Application Defines the main or root project. In a project’s dependency tree, there should only be one project of type application. Theme-library Defines a project with theming resources for the controls of one or multiple libraries. Library Defines a project with the aim to share code across multiple projects in UI5 (e.g. for controls, reuse components). Module Defines a non-UI5 project like a third party library. During build, it is copied without modification.
  9. 9. 10PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ Prerequisites & Installation # Global installation of the UI5 CLI npm install --global @ui5/cli # Verify installation ui5 --help 10 or higher Or other Node.js package manager that relies on package.json files
  10. 10. 11PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ UI5 CLI usage Commands See: UI5 CLI.
  11. 11. 12PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ The UI5 Tooling configuration of a project is located in a YAML file named ui5.yaml.  Must contain a project name, a project type, and a specification version.  Allows the definition of a path mapping (in case project structure differs from expected structure), the file encoding of properties files, a copyright string, and more…  Defines build, server, and extension configuration information.  The build configuration can be extended with definition for custom bundling. Configuration ui5.yaml # Generate the ui5.yaml file ui5 init See: UI5 Tooling: Configuration specVersion: '1.0' metadata: name: myapp type: application ~ ~ ~ ui5.yaml
  12. 12. 13PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ Demo Time # Download the OpenUI5 Sample App git clone https://github.com/SAP/openui5- sample-app.git # Start the development server ui5 serve # Build the OpenUI5 Sample App ui5 build
  13. 13. 14PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ Extensibility The capabilities of the UI5 Tooling can be extended in three ways: Extensions can be part of the configuration of a project or defined as modules to be shared across multiple projects. Custom Task Enables the extension of the build process by a custom build task. Custom Server Middleware Enables the plugging of custom middleware implementations into the internal express server of the UI5 server module. Project Shim Enables the definition or extension of a project configuration of a module. (expert feature)
  14. 14. 15PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ UI5 Tooling Ecosystem – an idea born at UI5con 2019 Peter, a proxy is missing!Volker, the UI5Tooling is extensible, just add it! Ok, let‘s proof this together! Hopefully… ”We can shape the UI5 development experience together!” Volker Buzek; @vobu
  15. 15. 16PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ UI5 Ecosystem Showcase
  16. 16. 17PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ UI5 Tooling – a modern CLI-based development experience! Just a few steps ahead: • Create a UI5 project in SAP Web IDE • Download and enable the project to run locally • Include custom tasks and middlewares • Feel the difference of the development experience >_ Not the official logo, yet! ;-) # Start the development server ui5 serve Server started URL: http://localhost:8080
  17. 17. 18PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ Demo Time
  18. 18. 19PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ UI5 Tooling Family & Friends Karma >_ Yeoman Migration TypeScript … … …
  19. 19. 20PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ OpenUI5 SAPUI5 >_ 2.0
  20. 20. 21PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ The UI5 Tooling 2.0 brings several enhancements:  Advanced frontend package manager to avoid version inconsistencies with a shared local dependency cache (not per project, like npm)  UI5 framework dependencies are managed in the ui5.yaml and can be OpenUI5 or SAPUI5: – Specify one version for all UI5 libraries of the framework – Declare the required UI5 libraries  New CLI commands: – ui5 use: select a framework and the framework version – ui5 add: add one or more library dependencies  Introduces validation of the ui5.yaml file to improve the error detection  Properties files encoding now defaults to UTF-8 UI5 Tooling 2.0 Release: April, 01 2020 specVersion: '2.0' metadata: name: myapp type: application # UI5 dependencies framework: name: SAPUI5 version: 1.76.0 libraries: - name: sap.ui.core - name: sap.m - name: themelib_sap_fiori_3 - name: sap.suite.ui.microchart ~ See: UI5 Tooling 2.0 # Use the 1.76.0 SAPUI5 framework version ui5 use SAPUI5@1.76.0 # Add the dependency to microchart library ui5 add sap.suite.ui.microchart ui5.yaml * New UI5 Tooling 2.0 features require specVersion: '2.0’ in ui5.yaml!
  21. 21. 22PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ What else  Project creation via a primitive SAPUI5 Yeoman generator  Provides 3 templates: Worklist, Master Detail, Worklist OData V4 # Install the SAPUI5 Yeoman generator npm install --global @sapui5/generator-sapui5-templates # Run the generator (select the template from list in question step) yo @sapui5/sapui5-templates  Continuously deliver the TypeScript definitions for OpenUI5/SAPUI5  Enables basic code-completion for UI5 development # Install the DTS files for OpenUI5 (available for 1.60) npm install @openui5/ts-types # Install the DTS files for SAPUI5 (will be available for 1.71, >1.75) npm install @sapui5/ts-types EXPERIMENTAL
  22. 22. 23PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ What’s next  Enable a modern development experience for UI5 by using a Babel toolchain (focusing on app development)  Open-source solutions already exist, it is all about using them properly (*)  Using TypeScript to benefit from code-completion and extended checks in any editor  Utilize Babel to transpile ES6+ features back to UI5 APIs (such as import/export to sap.ui.define/require) DISCLAIMER: no warranties / no timelines yet!(*) Independent from UI5 Tooling (integrated via extensibility)
  23. 23. 24PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ Further resources  UI5 Tooling Project on GitHub  UI5 Tooling Documentation  UI5 Tooling Feedback/Issues  Introducing the UI5 Tooling for SAPUI5 projects Blog  The UI5 Tooling and SAPUI5 – The Next Step Blog  Utilize UI5 tooling's extension capabilities for an improved development experience Blog  End to end setup of local development environment with ui5 tooling Blog  UI5 Ecosystem Showcase on GitHub
  24. 24. 25PUBLIC© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ More links:  Karma UI5 Project on GitHub  Migration Tools Project on GitHub  Migration Tools Blog  Yeoman SAPUI5 Templates Project on NPM.js  TypeScript UI5 Project on GitHub
  25. 25. THANK YOU Peter Muessig Chief Architect, SAPUI5 peter.muessig@sap.com Twitter: @pmuessig SAP Community: @peter.muessig Margot Wollny Product Expert, SAPUI5 margot.wollny@sap.com SAP Community: @margot.wollny
  26. 26. © 2020 SAP SE or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platforms, directions, and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, and they should not be relied upon in making purchasing decisions. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. All other product and service names mentioned are the trademarks of their respective companies. See www.sap.com/copyright for additional trademark information and notices. www.sap.com/contactsap Follow us
  27. 27. www.sap.com/germany/contactsap © 2020 SAP SE oder ein SAP-Konzernunternehmen. Alle Rechte vorbehalten. Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrückliche schriftliche Genehmigung durch SAP SE oder ein SAP-Konzernunternehmen nicht gestattet. In dieser Publikation enthaltene Informationen können ohne vorherige Ankündigung geändert werden. Die von SAP SE oder deren Vertriebsfirmen angebotenen Softwareprodukte können Softwarekomponenten auch anderer Softwarehersteller enthalten. Produkte können länderspezifische Unterschiede aufweisen. Die vorliegenden Unterlagen werden von der SAP SE oder einem SAP-Konzernunternehmen bereitgestellt und dienen ausschließlich zu Informationszwecken. Die SAP SE oder ihre Konzernunternehmen übernehmen keinerlei Haftung oder Gewährleistung für Fehler oder Unvollständigkeiten in dieser Publikation. Die SAP SE oder ein SAP-Konzernunternehmen steht lediglich für Produkte und Dienstleistungen nach der Maßgabe ein, die in der Vereinbarung über die jeweiligen Produkte und Dienstleistungen ausdrücklich geregelt ist. Keine der hierin enthaltenen Informationen ist als zusätzliche Garantie zu interpretieren. Insbesondere sind die SAP SE oder ihre Konzernunternehmen in keiner Weise verpflichtet, in dieser Publikation oder einer zugehörigen Präsentation dargestellte Geschäftsabläufe zu verfolgen oder hierin wiedergegebene Funktionen zu entwickeln oder zu veröffentlichen. Diese Publikation oder eine zugehörige Präsentation, die Strategie und etwaige künftige Entwicklungen, Produkte und/oder Plattformen der SAP SE oder ihrer Konzernunternehmen können von der SAP SE oder ihren Konzernunternehmen jederzeit und ohne Angabe von Gründen unangekündigt geändert werden. Die in dieser Publikation enthaltenen Informationen stellen keine Zusage, kein Versprechen und keine rechtliche Verpflichtung zur Lieferung von Material, Code oder Funktionen dar. Sämtliche vorausschauenden Aussagen unterliegen unterschiedlichen Risiken und Unsicherheiten, durch die die tatsächlichen Ergebnisse von den Erwartungen abweichen können. Dem Leser wird empfohlen, diesen vorausschauenden Aussagen kein übertriebenes Vertrauen zu schenken und sich bei Kaufentscheidungen nicht auf sie zu stützen. SAP und andere in diesem Dokument erwähnte Produkte und Dienstleistungen von SAP sowie die dazugehörigen Logos sind Marken oder eingetragene Marken der SAP SE (oder von einem SAP-Konzernunternehmen) in Deutschland und verschiedenen anderen Ländern weltweit. Alle anderen Namen von Produkten und Dienstleistungen sind Marken der jeweiligen Firmen. Zusätzliche Informationen zur Marke und Vermerke finden Sie auf der Seite www.sap.com/corporate/de/legal/copyright.html. SAP folgen auf

×