In a post I published a few days ago I explained why I’m betting on Web Components. In the post, I suggested you use Web Components as an infrastructure to create your Micro Frontends. It’s no secret that in the last month or so I have invested a lot of time trying to understand how to use the Stencil compiler and I even published a few posts about it.
In this post, I want to shortly explain how Stencil can help you avoid the “Framework Catholic Wedding” and fit into Micro Frontends idea.
Note: These are my own thoughts and they are definitely not the only solution out there.
In the post 'Why I’m betting on Web Components,' I suggested that one of the options to build your Micro Frontends is to use Custom Elements API. Custom Elements API can help you build shared components infrastructure. Then, you can share those components across your company development teams. Those components should be agnostic of any framework or library and can be used by any framework or library. Making the components agnostic will help you avoid framework runtime coupling in your infrastructure.
How does Stencil fit into the picture? In a very straightforward way.
Stencil in a Micro Frontends Environment
Stencil is a build-time tool that generates Custom Elements. The output of Stencil is 100% standards-compliant Custom Elements. It also includes a lot of nice and relevant features such as a virtual DOM, async rendering, and reactive data-binding. The features will help you to create performant and robust standalone components. Also, the features cost has a very small footprint — currently around 6 kilobytes for a component collection. Once you created your component collection you can add it to npm, use it in a standalone script, or use it from a CDN like any other component collection.
If you aren’t convinced yet, I suggest you play with Stencil for a couple of hours or even to do a small proof of concept. Once you do that, you will be sure if you want to use Stencil in the future or not.
Stencil generates custom elements with a small runtime footprint. This makes the Stencil compiler very suitable for building infrastructure components that align with the concept of Micro Frontends. This is the road that the Ionic Framework team took!
There are other solutions to create your Custom Elements such as Angular Elements, SkateJS, and SlimJS. All those solutions are cool, but I’ve chosen to use Stencil because, in the end, it’s a Custom Elements compiler and not a library. In my opinion, the design-time environment is definitely a good edge on top of the other solutions. Will it be successful in the days to come? We will have to wait and see.