Why Choose Web Components Over ReactJS

Always a debate between two web technologies using ReactJS or Web Components. The journey that Web Components have grown, it's a great time to discuss the key features of how web components can be beneficial in your next or future projects.

A Brief History of Both Web Technologies

In 2013 Facebook released ReactJS, which has gained attraction in the web development community. ReactJS was compatible with all browsers, was developed to simplify the process of building web applications. The community grew as libraries, tools, design patterns were released, making developers' lives easier.

Around the same time, Google released Polymer. A web components library that required a polyfill whose browser support was very minimal.

Fast forward 10 years or more, Web Components has caught up with the web standards and works natively in all browsers Chrome, Safari, Firefox, and Edge.

Here's a great video on how to create a web component.

Smaller Footprint & Fast

Using web components, no extra library is needed to run components on the browser and prefer to stick with the platform. Web components use template literals even better because they're simple and they don't require transpilation. Just import the module to your project and use it as a regular HTML element.

Web components run natively on the browser as suppose to ReactJS, which requires a javascript library to be imported. ReactJS does not work with Real DOMs. Instead, it has a Virtual DOM, a lightweight representation of the Real DOMs in JavaScript.

JSX syntax

      render() {
        return (
          <span className="styleName" role="status">
            <slot />
          </span>
        );
      }
    

Template literals

    render() {
      return html`
        <span class="style" role="status">
          <slot />
        </span>
      `;
    }
  

As you see, the syntax is similar why even bother using ReactJs. As discussed an interesting article by Cory LaViska, a developer Moving from Stencil to LitElement. Even if Stencil.js is another library which compiles to web components but works similar to ReactJS. He pin points out flaws about these libraries.

Agnostic

Web components can be imported and used in any web framework, Angular, Svelte, ReactJS, Vue, and Next.js. More companies are beginning to use web components for creating UI kits that can be imported into any project or framework.

Ionic Framework is one example using Web Components in their UI kit components. The previous versions, UI components were all based on Angular modules which were strictly made for Angular apps. Eventually, in later versions, all the UI components switched to Web Components which opened up the doors for developers like ReactJS, Vue and native JavaScript apps.

Astro is another framework allows developers to easily integrate web components in the framework easily to build simple sites and CMS.

If all your components or app architecture is based ReactJS then your stuck with ReactJS unless you convert all your components.

Styles are Encapsulated

Web components use Shadow DOM. All styles for that component are encapsulated in that component. Any CSS in your project with the same style class name will not overwrite the components styles. This allows developers the need not to worry about styling and debugging issues that might come up.

ReactJS does not have shadow dom. There are other alternatives 3rd party packages are needed to be installed.

Slots

One feature that shines over ReactJS, is as you can provide web components with multiple child elements. In ReactJS you can't provide multiple child elements in your component. For example, if you have two elements title and sub-title sections. In ReactJS this is not possible unless you pass each item as a prop.

In Web components, you can specify different sections with a name with using slot and point at which element you want to use. Here's an example:

Inside your Web Component template will contain this.

      // A header component
       <p>
        <slot name="my-title">main title will go here</slot>
        <slot name="my-subtitle">sub title will go here</slot>
       </p>
    

Imported and calling the component you can add elements as child elements.

      <my-header>
        <span slot="my-title">Main title</span>
        <span slot="my-subtitle">Sub title</span>
      </my-header>
    

Development Tools

Communities such as Google have released tools and libraries to help speed up productivity and enhance Web Components. This allows developers continue to develop on their existing framework and use the syntax that they're comfortable with. These tools or libraries will compile the source code into native web components.

List of tools and libraries that allows you to do this.

• Angular Elements (Google)
• Lit (Google)

Conclusion

As you can see, web components have come a long way and growing in popularity. Developers should begin to embrace them as it will push the web to its limits.

Web components are heading in a fast pace, will eventually take over ReactJS, and leave it behind they way the JavaScript left JQuery.