Why web components are so important
Over the past couple of years there has been up and down buzz around web components. It’s been said that they will change the way we build for the web — why is that, what makes web components so important?
A web component is a standardised way of creating encapsulated, reusable user interface elements for the web.
Not a new concept
Components for the web have been around for a long time, the idea of being able to write reusable and portable code is nothing new.
jQuery Plugins
jQuery plugins were probably the first popular attempt at writing re-usable segments of code. They had some structure to how they were written and you could easily distribute them — but they weren’t without problems.
You’d often get conflicts between different plugins and you would also have many styling issues trying to figure out what styles you were required to include separately.
AngularJS Directives
Directives we’re the next evolution that provided some additional benefits. You could isolate the JavaScript scope of each component to prevent conflicts and there was further definition on how they should be created with better tooling support. You still had to include styles separately and the API was confusing and difficult to learn.
Framework Components
The most recent iteration of this concept would be the modern framework components which can be found in Angular 2 and React. They are built on modern JavaScript features such as classes providing a much nicer API. Angular 2 components allow developers to decorate their components with metadata to help tools understand how another developer should interact with these components. You are also able to make use of the Shadow DOM which finally provides complete encapsulation for your components.
Why components at all?
Before we can understand why web components are so important we first must fully understand what the aspiration of any type of component is.
Encapsulation
A component should be completely separate from the main application. This increases reusability, testability and reliability because the component is only responsible for its internals and shouldn’t be concerned with the state of the application, only its own.
Both the component author and user can upgrade the component without fear of affecting the rest of the application.
Extensibility
Components should be able to extend each other and in the case of web components other DOM elements. This means that a component author doesn’t need to reinvent the wheel and can easily reuse functionality.
Composability
It should be possible to create more complex components or even entire applications from a collection of components. The decreases the need for “global” logic providing a better defined architecture and less chance of bugs because each individual part of the application (or composite component) is better defined.
Reusability
The big one. With all of the above a component should be easily reusable with minimal dependencies and a clearly defined API.
Looking at the three component types we just mentioned the only type that gives us all of the above is framework components. And thats only the case if you make use of the Shadow DOM for complete encapsulation.
The Shadow DOM finally gives us complete encapsulation via a sub-DOM tree which doesn’t get affected by external styles. This means that as a component author you have complete control over what your component looks like but also how a user can manipulate your component.
Luckily though you are able to use Shadow DOM with Angular and React components.
Why web components?
If framework components give us all of the above, why do we need web components? One big reason: Interoperability.
Framework components are great but they are only great within their own ecosystem. You can’t (easily) use an Angular component within React or visa versa.
Why does this matter?
The front-end development community is famous for delivering vast quantities of new tools, frameworks, libraries and technologies for us to use and it is incredibly hard to keep up.
As developers we need to change how we build our applications to ensure we can stay current and adopt the latest technologies when they fit our business/user requirements. In the past you probably found yourself locked into a specific set of technologies with a very hard upgrade path — which might have even meant an application re-write.
Because web components are built on nothing more than web standards they will work across all of these ecosystems, this has some huge benefits:
- Interoperability — Your components can transcend frameworks and be used in multiple projects of different technology stacks
- Lifespan — Because your components are interoperable they will have a longer life and there will be less need to re-write them to fit into newer technologies
- Portability — With your components able to work anywhere with little to no dependencies the barrier to use is significantly lower than if your component relied on a library or framework
As well as all the benefits a component should aspire to web components have the cross compatibility down which is going to be of vital importance moving forward with the ever changing web landscape.
Web Component Libraries
The web component standard has been in flux for some time and with lack of documentation, examples and tutorials its been quite hard for people to get started with writing web components — especially if you need to support older browsers.
Because of this a few web component libraries were created to make using web components super easy, the most popular being Polymer, X-Tag and Bosonic. They all provide a set of components which can be used and extended upon. As with any popular project there is a wealth of documentation, examples and a solid community behind them.
With these libraries though it does mean that your components will have a significant dependency that users will have to ensure is available if they wish to use your components.
With the web component standard being much clearer and the begining of some great examples I’d encorage anyone starting out to try vanilla web components first and decide what best fits their needs.
Conclusion
Web components are so important because they will allow us to write our applications in a way so that we can adapt to change quicker. With this we will be able to take new and exciting front-end technologies on-board as soon as it makes sense for our business or customer requirements instead of being forced to refactor large parts of our application.
Our code will have a longer life thanks to the interoperable nature of web components which is given to them by being built on top of web standards and finally our components should reach more people due to fewer dependencies and requirements.
Web components are ready to be used now get creating them! I’m working hard to create more examples and tutorials in hope to help the community adopt web components faster.
Find me @RevillWeb if you want to get in touch.
