Uploaded September 2024 | Updated September 2026, 3 weeks ago
This episode takes a dive deep into the world of UI5 tooling extensions, showcasing how they dramatically improve the development experience. We explore the simplicity and power of the UI5 tooling, which becomes even more formidable with the addition of custom extensions. Specifically, we introduce the UI5 Ecosystem Showcase project, a central repository for open-source UI5 tooling extensions, that provides developers with ready-to-use tools and a platform for creating and sharing their own extensions.
We present a selection of our favorite tooling extensions and offer valuable insights into their integration and usage. The featured tools include Easy-UI5 for project generation, ui5-middleware-livereload for instant application response to changes, ui5-middleware-simpleproxy for easy connection to backend services, ui5-middleware-serverframework for serving a locally built UI5 version, and other essential utilities like static content and reuse component inclusion.
To demonstrate the practical application of these extensions, we walk through the creation of a sample application that showcases the seamless integration of a library project and a reusable component. We also touch on component-based routing, illustrating how it facilitates smooth navigation within an application.
By the end of this episode, viewers will gain a comprehensive understanding of the power of UI5 tooling extensions and serves as a valuable resource for anyone looking to improve their UI5 development workflow and contribute to the growing UI5 ecosystem.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Video Chapters:
00:00 Welcome
01:00 Overview of the key tooling extensions
06:46 Creating an application using Easy-UI5
09:22 Leveraging ui5-middleware-livereload for immediate response
11:04 Integrating a custom library with the application
18:47 Using ui5-middleware-simpleproxy to connect to backend services
22:11 Leveraging ui5-middleware-serveframework for running UI5 offline
24:44 Including static resources with ui5-middleware-servestatic
32:17 Consuming a third-party package using ui5-tooling-modules
36:46 Consuming reusable components in applications with ui5-middleware-ui5
40:36 Component-based routing in UI5 applications
43:02 Closing Words
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
GitHub Repository:
github.com/petermuessig/ui5erslive39-tooling-extensions
Resources:
UI5 Ecosystem Showcase project (GitHub): github.com/ui5-community/ui5-ecosystem-showcase?tab=readme-ov-file#ui5-ecosystem-showcase
Best of UI5: bestofui5.org
Easy-UI5 Generator (GitHub): github.com/sap/generator-easy-ui5
ui5-middleware-livereload: npmjs.com/package/ui5-middleware-livereload
ui5-middleware-simpleproxy: npmjs.com/package/ui5-middleware-simpleproxy
ui5-middleware-serveframework: npmjs.com/package/ui5-middleware-serveframework
ui5-middleware-servestatic: npmjs.com/package/ui5-middleware-servestatic
ui5-middleware-ui5: npmjs.com/package/ui5-middleware-ui5
ui5-tooling-modules: npmjs.com/package/ui5-tooling-modules
ui5-tooling-transpile: npmjs.com/package/ui5-tooling-transpile
ui5-task-zipper: npmjs.com/package/ui5-task-zipper
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Music: klinik FX
This episode takes a dive deep into the world of UI5 tooling extensions, showcasing how they dramatically improve the development experience. We explore the simplicity and power of the UI5 tooling, which becomes even more formidable with the addition of custom extensions. Specifically, we introduce the UI5 Ecosystem Showcase project, a central repository for open-source UI5 tooling extensions, that provides developers with ready-to-use tools and a platform for creating and sharing their own extensions.
We present a selection of our favorite tooling extensions and offer valuable insights into their integration and usage. The featured tools include Easy-UI5 for project generation, ui5-middleware-livereload for instant application response to changes, ui5-middleware-simpleproxy for easy connection to backend services, ui5-middleware-serverframework for serving a locally built UI5 version, and other essential utilities like static content and reuse component inclusion.
To demonstrate the practical application of these extensions, we walk through the creation of a sample application that showcases the seamless integration of a library project and a reusable component. We also touch on component-based routing, illustrating how it facilitates smooth navigation within an application.
By the end of this episode, viewers will gain a comprehensive understanding of the power of UI5 tooling extensions and serves as a valuable resource for anyone looking to improve their UI5 development workflow and contribute to the growing UI5 ecosystem.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Video Chapters:
00:00 Welcome
01:00 Overview of the key tooling extensions
06:46 Creating an application using Easy-UI5
09:22 Leveraging ui5-middleware-livereload for immediate response
11:04 Integrating a custom library with the application
18:47 Using ui5-middleware-simpleproxy to connect to backend services
22:11 Leveraging ui5-middleware-serveframework for running UI5 offline
24:44 Including static resources with ui5-middleware-servestatic
32:17 Consuming a third-party package using ui5-tooling-modules
36:46 Consuming reusable components in applications with ui5-middleware-ui5
40:36 Component-based routing in UI5 applications
43:02 Closing Words
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
GitHub Repository:
github.com/petermuessig/ui5erslive39-tooling-extensions
Resources:
UI5 Ecosystem Showcase project (GitHub): github.com/ui5-community/ui5-ecosystem-showcase?tab=readme-ov-file#ui5-ecosystem-showcase
Best of UI5: bestofui5.org
Easy-UI5 Generator (GitHub): github.com/sap/generator-easy-ui5
ui5-middleware-livereload: npmjs.com/package/ui5-middleware-livereload
ui5-middleware-simpleproxy: npmjs.com/package/ui5-middleware-simpleproxy
ui5-middleware-serveframework: npmjs.com/package/ui5-middleware-serveframework
ui5-middleware-servestatic: npmjs.com/package/ui5-middleware-servestatic
ui5-middleware-ui5: npmjs.com/package/ui5-middleware-ui5
ui5-tooling-modules: npmjs.com/package/ui5-tooling-modules
ui5-tooling-transpile: npmjs.com/package/ui5-tooling-transpile
ui5-task-zipper: npmjs.com/package/ui5-task-zipper
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Music: klinik FX
