⚛️ React.js? Why? 🤔
When it comes to front-end development, the first JavaScript library/framework that pops into developers’ minds is usually React, Vue, or maybe Angular.
Why do we need to utilize them?
Well, the answer is we don’t! Developers probably use them for the following reasons:
1. Component-Based (the main reason, probably) 🧩
Reusable UI pieces (vs. manual DOM updates). ♻️
2. Virtual DOM / Reactivity ⚛️
Faster rendering (vs. slow direct DOM manipulation).
3. State Management ⚡
Centralized data flow (vs. scattered event listeners).
4. Ecosystem & Tooling 🛠️
DevTools, routers, SSR (vs. DIY solutions).
5. Scalability 🚀
Maintainable for large apps (vs. spaghetti code).
Personally, I value leaner projects and making the front-end as light as possible, by avoiding unnecessary dependencies.
Now, is there a way to cover the same features, without installing any third-party library?
The answer is almost yes, Web Components, since 2016 (with full cross-browser support by 2020). 🎉
Get Yousef Fatouraee’s stories in your inbox
Join Medium for free to get updates from this writer.
Web Components are built on three main concepts:
1. Shadow DOM (Encapsulation) 🧩
Isolates a component’s DOM and styles from the rest of the page.
Prevents CSS/JS conflicts (e.g., .button won’t leak outside the component).
2. Custom Elements (Reusability) ♻️
Lets you define new HTML tags (e.g., <my-button>).
Lifecycle hooks (e.g., connectedCallback()) for dynamic behavior.
3. HTML Templates (Efficiency) 🎨
<template> tags define markup that’s parsed but not rendered until cloned.
Avoids runtime HTML parsing (better performance for reusable UI).
Key characteristics of Web Components:
1. Framework-Agnostic
✅ Works anywhere — Embeddable in vanilla JS or even React, Vue, or Angular.
✅ No lock-in — Avoid dependency on React/Vue’s ecosystem.
2. Native Browser Standards
✅ Long-term stability — Won’t go obsolete like frameworks might.
✅ No build step, bundler or transpiler needed.
3. True Encapsulation (Shadow DOM)
✅ Scoped styles/CSS isolation — No accidental overrides.
✅ Self-contained DOM — Prevents external JS from breaking your component.
4. Performance
✅ Lightweight — No Virtual DOM overhead (direct DOM updates).
✅ Efficient for static/mostly-static UI.
5. Microfrontend & Legacy Integration
✅ Runs alongside old jQuery/Backbone apps.
✅ Good for gradual modernization.
6. Cross-Platform Portability
✅ Works in any JS environment (even non-web, like Electron).
✅ Supported by all major browsers (since ~2020).
React is embraced by a huge ecosystem and beginner-friendly abstractions, while Web Components provides a lightweight, native alternative with true encapsulation, and a little more Object Oriented Programming.
React would work better for Single-Page-Apps while Web Components could be better for framework-free and performance-critical projects, built to last.
Which one would you choose?
