Preface
The goal of this blog post is to demonstrate how multiple versions of UI5 Web Component can co-exist on a single page, a case mostly micro frontends developers may encounter.
If you are new to UI5 Web Components, I suggest visiting our website or reading this great blog post by peter.muessig.
Scaling frontend development to enable many teams working simultaneously on a large product is a difficult task. In the last years micro frontends became a popular architectural style to address that challenge. Instead of having monolithic web application, independently deliverable frontend applications are composed into a greater whole.
There are a lot of ways to implement micro frontends, but the one that we see teams adopting most frequently is the runtime integration through JavaScript. With this approach each micro frontend is included onto the page with a "<script>" tag.
<script src="http://localhost:9001/app1/bundle.js"></script>
<script src="http://localhost:9002/app2/bundle.js"></script>The container application then determines which micro frontend should be mounted, and when and where to render.
Each micro frontend is free to choose its web UI framework - it can be built in Angular, React, Vue or any other framework. The micro frontends might also decide to use UI5 Web Component to benefit from the rich set of enterprise-ready UI elements. They might load and rely on different versions of the UI5 Web Components and this sets some challenges...
Challenge
The thing is that a custom element tag can be defined and registered only once and this is true to the web components in general, not only to UI5 Web Components. In the context of micro frontends it would mean that all the tags (for example ui5-button) will be defined with the micro app (using UI5 Web Components) that loads first and all the rest of the micro apps will end up using the same version, although might load and rely on different one. And, this definitely creates conditions for various issues.
The following project demonstrates a common pitfall. Here we have a web app, composed by two micro frontend applications, both built in Rect + UI5 Web Components. The first micro app is using the 1.0.0-rc.11 version, while the second one – the newer 1.0.0-rc.12 version.
Both micro apps are using the Table (ui5-table) component and would like to make use of the growing capability of the component by displaying a "More" button at the bottom of the table.
To do so, the first micro app uses the “has-more” property of the Table and as you can see the “More button” is properly displayed.
<ui5-table has-more>...</ui5-table>But, in the newer 1.0.0-rc.12 version this property has been renamed to "growing" and although the second micro app uses the correct API, the “More” button is missing.
<ui5-table growing="Button">...</ui5-table>The problem is that the "ui5-table" tag has been already defined with the older version as the first micro app, using the 1.0.0-rc.11 version, loaded first. And in that version, the "growing" property simply does not exist. The second micro app didn't do anything wrong, used the right API, but still it didn't quite work out. We would have seen the same issue, if the second micro app was the first to load. Then, the first micro app would have used an API that is no longer supported.
Fortunately, we have a solution!
Solution
This is where the "Scoping" concept comes into play. We provide an API that allows adding a unique suffix to the UI5 Web Components tags to overcome the challenge. The scoping applies not only to the components that the application directly uses, but also to the composite components that instantiate other components internally within their shadow root.
Use the API and provide your unique suffix to scope all custom elements:
import { setCustomElementsScopingSuffix } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";setCustomElementsScopingSuffix("xyz");Then, you can use the the UI5 Web Components with the suffix as follows:
<ui5-table-xyz>...</ui5-table-xyz>Now let's use the "Scoping" to fix the aforementioned issue. After we call the API, all we
need to do is to use the scoped tag names. You can find the following code here.
Conclusion
The Scoping allows micro-frontend/library authors to ensure no other component on the target HTML page has already upgraded the custom elements and it is the best way to avoid "unexpected" issues when integrating a solution/service.
Your Feedback is valuable to us
If you have questions, comments or need some help, feel free to leave a comment below, in the Q&A section or get in touch with us.
Resources
- Project: https://github.com/ilhan007/ui5wc-multiple-versions
- UI5 Web Components Scoping
For more information on UI5
- Exchange knowledge: SAP Community | Q&A | Blog Post | Slack
- Learn more: SAPUI5 Demo Kit | openSAP | UI5 NewsCast | UI5ers live | UI5 Web Components
- SAP Managed Tags:
2 Comments
