How stencilJS is going to change the way we create Web Components

It’s 2018, and I can officially say it aloud. I’m suffering from JS framework fatigue, and I’m sick of it. Don’t confuse me for a Luddite, innovation is essential, and should never be sacrificed for the sake of convenience. But we have reached a point where the lack of standards between frameworks have led us to reinvent the wheel every time we hop into a new one.

I can already hear the cynics say “well Greg, you don’t have to use them all” but I do. I work for a development agency based in New York, and working with several frameworks over the course of a day it’s my bread and butter. I have a front row seat to the nightmare working with several frameworks creates. It sure would be cool, if I could take a React component and share it with my Angular app, or choose to use it on a site with no framework at all.

If you worked with React, Angular, or Vue, you are familiar with the concept of Web Components. The premise of web components is encapsulation and reusability. Encapsulation allows developers to modularize their code from the rest of the application and limits the amount of complexity any developer has to deal with at one time. Reusability gives components a lot of power because it allows you reuse them throughout your app and write less code.

So we established that components are a useful paradigm, and should be highly encouraged. Where modern web development can see some improvement is in the compatibility of web components between frameworks, currently, each framework has its way of doing things. You’ll often hear phrases like “That’s the Angular way of doing things” or “The react way.” Take a hard look at these expressions, and they reveal a sentiment of incompatibility.

This mode of thinking diminishes the power of web components. After all, why should the parent framework place limits on the reusability of components? It’s time to make web components reusable by making them framework agnostic.

From the team who created the Ionic framework, we now have access to their latest undertaking. It’s called StencilJS and is a tool that allows you to create web components that are native to the browser with or without the use of a framework. I think the ionic team is asking the right question, how can we make Web components compatible and they seem to be off to a good start.

I will be playing around with the tool for the next few months, and share my experience with it. I’m curious to hear your opinions on the subject. Do you agree or disagree, what challenges do you currently face? Do you think is a good idea to have a standard for web components?

This article was first published in