Siemens Industrial Experience is a design system for designers and developers, to consistently create the perfect digital experience for industrial software products.
Currently, ix components are built in a way such that each component is bundled in a separate file and gets lazy-loaded only when used in the application.
However, this prevents angular (or any building process probably) from bundling all the required components in a single JS file when building the application. This means that when you load a page that has many components, the browser has to download many JS files instead of a single JS bundle. A single bundle would be better for performance for example.
This can be seen in this screenshot (all these JS files are downloaded on initial page load):
This behavior comes from the default output target (dist) in stencil.js (docs).
This also affects lazy-loading in angular. Angular allows you to lazy-load a part of the application only when the user visits some route. It generates a bundle for all the code required and waits for that bundle to be downloaded before navigating to that route.
However, because currently stencil.js handles lazy-loading of each component independently, angular again cannot generate a single bundle for the lazy-loaded route. This means that when the user navigates to a route (and the ix components are not cached by the browser), angular only waits for its generated bundle but not for the ix components, so the page will be rendered early incorrectly for a very short duration until the ix components are loaded.
This effect can be seen here:
Here, when the user clicks on the menu item to go to /main, angular lazy-loads a component (MainComponent) and the component gets rendered before all the ix components that it depends on are loaded
This output target excels in use in frontend frameworks and projects that will handle bundling, lazy-loading, and custom element registration themselves.
Then the framework component wrappers must also be configured to use this target (docs).
Maybe there are other points that need to be considered before making that change, however, I encountered this issue so I just wanted to share what I have found in case it's useful for you.
danielleroux
commented
6 months ago
Suggestion / feature request
Currently, ix components are built in a way such that each component is bundled in a separate file and gets lazy-loaded only when used in the application.
However, this prevents angular (or any building process probably) from bundling all the required components in a single JS file when building the application. This means that when you load a page that has many components, the browser has to download many JS files instead of a single JS bundle. A single bundle would be better for performance for example.
This can be seen in this screenshot (all these JS files are downloaded on initial page load):
This behavior comes from the default output target (
dist) in stencil.js (docs).This also affects lazy-loading in angular. Angular allows you to lazy-load a part of the application only when the user visits some route. It generates a bundle for all the code required and waits for that bundle to be downloaded before navigating to that route.
However, because currently stencil.js handles lazy-loading of each component independently, angular again cannot generate a single bundle for the lazy-loaded route. This means that when the user navigates to a route (and the ix components are not cached by the browser), angular only waits for its generated bundle but not for the ix components, so the page will be rendered early incorrectly for a very short duration until the ix components are loaded.
This effect can be seen here:
Here, when the user clicks on the menu item to go to
/main, angular lazy-loads a component (MainComponent) and the component gets rendered before all the ix components that it depends on are loadedhttps://github.com/siemens/ix/assets/148883879/6e79419f-c558-4b6c-85aa-a3d03f7aa576
Demo code: https://stackblitz.com/edit/stackblitz-starters-t7vhu7
Possible solution
Stencil.js supports another output target (
dist-custom-elements) that allows frameworks to control how the components are bundled and lazy-loaded.From
dist-custom-elementsdocs:Then the framework component wrappers must also be configured to use this target (docs).
Maybe there are other points that need to be considered before making that change, however, I encountered this issue so I just wanted to share what I have found in case it's useful for you.