A quick intro to Stencil & Web Components
The world of front-end development has always been in flux but not too long ago one major trend began to emerge: It was the dawn of “components for everything”.
It began to crawl into the heads of programmers far and wide and was truly solidified in mainstream production by the likes of Angular, React, Vue etc. Nowadays it’s hard to imagine that, at some point, front-end development had to be done without the help of easily-usable component structures.
In addition to the modern ‘frameworks’ that started forcing you to think in a component-like way, web standards were also extended to allow for custom element tags that could serve as components. The “Web Component” was born.
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. — MDN
To achieve this, all sorts of trickery is being leveraged but ultimately what you get is quite powerful:
Custom components that are cross-browser compliant/functional that you can just embed in any codebase.
Along comes Stencil…
While I have no extensive experience building vanilla web components, it sounds like building them at scale was rather tedious, which is why the team at Ionic decided to invest time and resources towards writing code that would make it easier to create these universally accepted custom web components. And they decided to utilize patterns that were familiar to most modern front-end developers and drew inspiration from React, Vue, Angular etc. This project is called Stencil.
Think of Stencil as a tool that gives you the ability to use popular front-end patterns (see image below) to construct outlines for web components and then compile them into actual web components. This means, they will be reverse compatible so you can use them in any framework going forward #frameworkAgnostic. Pretty cool!
I watched a couple tutorials on Stencil and think that what they are doing is pretty cool and makes a ton of sense for progressive front-end teams that are using various frameworks for their development or want to build internal libraries to reduce their work load down the road should they switch to whatever new ‘sexy’ framework will come along.
In my humble opinion, I can see something like Stencil become a standard practice. Instead of having to find custom pre-built components for your specific framework on the web, there will be an ecosystem of repositories offering components for anything and everything that won’t care in which codebase you plug them into or what framework you’re using.
