Once you decide to choose which framework or library is the best one to build an front-end architecture in a big company there are many questions and unknowns that appear.
Imagine the following big company 🙄: +2000 developers, apps in 11 countries, mobile and web, use of different frameworks and technology to develop the front-end…
At this point there are multiple options that apparently exist, but analyzing the frontend ecosystem, needs and trends, the architecture team decided to use Web Components.
With this definition we will try to argue some reasons why this option may end up being the right way.
1. Be standard and framework agnostic
Web Components are standardized technology, and are natively supported in modern browsers. Following the Web Component standards, you can create versatile new components with encapsulated functionality that can be reused wherever you like without fear of code collisions.
By using a consistent set of web standards, Web Components are not dependent on a specific front-end framework and liberate us from the highly volatile landscape of front-end frameworks and tooling in which we currently live.
Being close to the standards helps to evolve together with the technology in a simple way and avoiding high costs in refactoring with the evolution of technology.
2. Sharing components across company
Web Components is ideal for sharing elements across your organization or building a UI design system.
Have a collection of components that front-end developers can use in their projects like puzzle pieces to build apps, is important to avoid build the same components several times.
This catalog of building blocks, allows to reuse code and functionality between the different applications and countries of the company, considerably improving the time-to-market in the different locations. In many cases, the time it takes for the solutions to be in customers’ hands can be reduced by 50%. And the cost of developing these solutions is up to 40% lower.
3. Seamlessly interoperable
Web Components use a set of standardized APIs that are natively supported in all modern browsers and run on nearly all mobile devices and desktop browsers today. With Web Components, you can create and share custom elements that work on any site, interoperate seamlessly with the browser’s built-in elements, and play nicely with frameworks of all kinds.
Basically this ability allows something great things:
- Use Web Components anywhere you use HTML: in your main document, a CMS, Markdown, or a framework like Angular, Ember or Vue.
- Allow to establish progressive change strategies, allowing you to incrementally incorporate new functionalities with Web Components in existing or legacy applications without having to maintain code on concrete frameworks or libraries.
- Breaking your app up into right-sized components helps make your code cleaner and less expensive to maintain.
4. Simplicity and easy adoption
The simplicity of Web Components makes development faster and easier. Here, libraries like LitElement, from Polymer team of Google, make Web Components easier to use and highlight best practices, helping you get great results.
This is an example of implementing a Web Component with LitElement:
This is the way to declare it in HTML document:
You can see the code in this basic example:
5. Simple to customize
Web Components by definition facilitate customizable contexts. In a big company, where each country, location or app context can have differences, visual or functional, with respect to others, this capacity in technology is of great value to avoid having very similar components but repeated again and again in each country, location or app.
We find two groups within the customization:
- Customization at component level: look and feel (colors, icons, images …) and/or functionality.
- Customization at app level to driven user-experiences: configure the layout of the components of an app depending on the type of user, country or whatever. At this point the flexibility and versatility is very great. Imagine being able to connect the definition of your apps to AI systems to show one configuration or another depending on certain rules.