Webcomponents: Isolate WebComponent JS libraries

[mmikirtumov]

We have main big application and are going to create separate small applications (microservices) using different libraries (Angular, React etc.) and compile them into webcomponent to use them anywhere. The main application has some libraries (example underscore.js), some of our components use the same libraries (example lodash.js), in this scenario we see a lot of conflicts when using webcomponents inside main application. Do you have any ideas on how can we isolate webcomponent libraries and they can work in isolated mode. Also we have used ShadowDOM, but no luck.

[rniwa]

What do you mean by a lot of conflicts? As in libraries / frameworks that use web components don't work well together? If so, what kind of issues are you seeing?

[mmikirtumov]

Thank you @rniwa
We have 3 components and main application. The main application use underscore.js, and the global object of this library starts with symbol _ and one of our components use lodash.js wich object also starts with symbol _. So our application shows a lot of errors when load both underscore and lodash, due to conflict of this two libs. This is only one lib example.

[GrosSacASac]

converge into one, or update your build process for better encapsulation

[tjmonsi]

I don't think these are web component JS libraries (or at least the polyfills for enabling webcomponents creation). I think these are a concern of the webcomponents that you are using and their dependencies.

As a quick fix though, either you use lodash or...

Compile the webcomponent and then use that.

[mmikirtumov]

@GrosSacASac what you mean

update your build process for better encapsulation

.
If I have one big application and inside one page I am going to put few components, that components hass been developed using different frameworks (angular, react etc.)
How can I optimize my building process?

[mmikirtumov]

@tjmonsi

Compile the webcomponent and then use that.

If I have many different components which was developed using different frameworks such as Angular and React. How can I compile them into one big application?

[tjmonsi]

@mmikirtumov

I don't think we are on the same page when I say web component. When I say web component, it means it is defined using customElements api of the browser. If component was developed using different frameworks such as angular or react, you only use those components specifically for that framework only. In essence, you don't mix an Angular component in a React framework and vice-versa. However, you can use a custom web component in any of the frameworks. Now if at one point a web component uses, let's say lodash, while you use underscore, you can "compile" that web component (either via rollup) and then use the compiled version of that component. At least it will only use lodash in that web component, isolating it from your bigger application that might use underscore

[tjmonsi]

One example is my location-lite: https://github.com/tjmonsi/location-lite (still in alpha)
You can install it and use it as is (by using importing it as is) or you can use the dist folder and load that compiled versions. That eliminates the possibility of it conflicting with other libraries because the library that it uses would be part of the custom element.

[mmikirtumov]

Thank you @tjmonsi .

It will be great to find the pattern how can different components in one page become isolated and autonomous, so engineers can choose different frameworks and different libraries. I found only one old approach iframe. Can you suggest other technologies or approaches.

[egucciar]

@mmikirtumov are you using a webpack bundler? if so bundling isolate apps seperately should really be all you need to do the trick. Just make sure you use web components to wrap the apps, so that the webcomponents are namespaced (cant redefine same webcomponents in other apps) .Your regular libraries like Lodash/Underscore will be compiled into each bundle. What you're trying to do here is a micro-frontend. There's lots of concerns outside of webcomponents when solving for this problem

[mmikirtumov]

Thank you @egucciar

With webpack budler it works great as you described. But I have big lagacy application and want to include new component into my existing application, in this case I could not find any better solution than just use iframe.

Can you suggest something new? Or it will be better to switch to webpack bundler?

[egucciar]

@mmikirtumov if you want to email me some more specifics (i.e. why you had to use an iframe , what issues you ran into, what you're trying to do etc) I think I could help better. [email protected]

[oleguris]

@mmikirtumov I face the exactly same challenge and yes it's micro-frontend approach.
Since those micro SPAs are running in same sandbox the may technically introduce different versions of react, angular or lodash.
I think we have to consider a few things here:

1. Avoid webcomponents include potentially conflicting libraries in dependencies.

2. In case you have control over repository and build process I'd suggest leveraging workspaces / monorepo approach where you can get use of peerDependencies and put all actual minimum versions of libraries modules (webcomponents) are compatible with in host package.

3. It becomes challenging when you have separate builds or compiled webcomponents are served from different locations. In which case you basically need manually sync your hosting app dependencies with peerDependencies described in webcomponent itself

[mmikirtumov]

I found interesting topic in Martin Fowler`s blog