In a post I published a few days ago I explained why I’m betting on Web Components. In the post I suggested to use Web Components as an infrastructure to create your Micro Frontends. It’s no secret that in the last month or so I invested a lot of time to understand how to use Stencil compiler and I even published a few posts about it.
In this post I want to shorty 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 avoiding framework runtime coupling in your infrastructure.
How Stencil gets into the picture? Very straight forward.
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 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 to 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.
Summary
Stencil generates custom elements with a small runtime footprint. This makes Stencil compiler very suitable to build infrastructure components that align to Micro Frontends idea. This is the road that Ionic Framework team took and maybe you in the future :)
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. IMHO 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 wait and see.
