Web Components offer a Future Proof Way to Create Amazing Websites and Apps

The Web has Changed

Just 5 years ago, the web was a very different experience. In order to make a website behave similar to a native mobile application, there were quite a few different technologies that needed to fill in the shortcomings of the browser. Now, in 2019, everything has changed. Web components are standard in over 89% of all internet traffic without the need for heavy and bloated tech layers.

You can think of web components as the “lego-blocks” that you build your websites & apps out of. Development becomes easier and technology debt is greatly reduced by having one technology that serves as a web & app interface. This approach enables seamless integration with your data for leveraging business intelligence, AI & other 3rd party services.

Web Components have a component model not dissimilar from something like React, Vue or Angular. The difference is that Web Components use a set of standardized APIs that are natively supported in all modern browsers. As long as they conform to these standards, the user interface (UI) components will run on nearly all mobile devices and desktop browsers today and can be modified to support browsers back to IE11.

We’re not designing pages, we’re designing systems of components.—

Stephen Hay

For anyone building a Design System, the big benefit of this is that it finally addresses the need for a single source of truth—one standardized library that works everywhere.

What is a Component Model?

A Component Model describes the hierarchy of functional components, their responsibilities, static relationships, and the way components collaborate to deliver required functionality, features or user interface. Brad Frost does a great job of laying down the philosophy in his atomic design manifesto.

Top Benefits of Web Components:

1. Web Components Work Everywhere

Like to use React, Vue, Preact, Angular, or some other javascript framework to build your apps? No problem. Web components will work inside any JSX or other html-in-js solution just like a <div> or an <img> tag would.

It is important to note that you can build an entire application out of web components just like you would with React, Angular or Vue. Like to use state management libraries like Redux for state management or Apollo Client for GraphQL? Easy. Just include them like you would in any other app built from [insert framework here]. Our dev team has put together some samples on integrating a few commonly used libraries over on the Mint Social Dev site.

2. Web Components are Easy to Customize

3. Web Components Help Drive Adoption

4. Web Components are Future-Proof

Arguably the best thing about Web Components is that they free us from the frequently changing world of front-end frameworks. By taking advantage of standards that all browser vendors have agreed on implementing, Web Components are not dependent on a specific front-end framework like Angular, React, or Vue. As mentioned above, they work beautifully with any of these frameworks. But, the great thing is that you won’t be dependent on that framework for your components to work.

This is a game-changer for webmasters and dev teams. First, as much as we love the hot frameworks of today, who knows what tomorrow will bring? By choosing Web Components, you insulate yourself from the threat of tech churn and no longer have to worry about picking the right horse.

Second, you will give your developers the freedom to use any javascript frameworks, building & testing tools that they already know and are comfortable with—today and tomorrow.

5. There are plenty of Web Component libraries to leverage