Web Components & Frameworks

As your web apps grow, so does the complexity of managing the UI — especially when things need to update dynamically.

In this lesson, we’ll explore component-based development, and how frameworks like React, Vue, and even older libraries like jQuery help simplify your frontend code.

We’ll also revisit the subscription form from Lesson 4 and challenge you to extend it with a modern framework.

🧱 Why Use a Framework?

With plain HTML and JavaScript:

  • You manually update the DOM
  • You handle every interaction yourself
  • You often duplicate logic or rely on workarounds

Frameworks help you:

  • Break UI into reusable components
  • Manage state and respond to changes automatically
  • Organize larger apps into smaller pieces

🔙 The jQuery Era

Before React and Vue, jQuery was the go-to tool for dynamic web pages.

Example: jQuery DOM Manipulation

<!-- HTML -->
<input type="text" id="name">
<button id="sayHi">Say Hi</button>
<p id="message"></p>

// JavaScript with jQuery
$('#sayHi').on('click', function() {
  const name = $('#name').val();
  $('#message').text(`Hello, ${name}!`);
});

Pros:

  • Easy to learn
  • Good for quick enhancements

Cons:

  • Not component-based
  • Manual state management
  • Not ideal for complex UIs

⚛️ React: A Modern UI Library

React is a JavaScript library from Meta (Facebook) that uses a declarative, component-based model.

Example: React Component

function SubscribeForm() {
  const [email, setEmail] = React.useState("");

  function handleSubmit(e) {
    e.preventDefault();
    alert(`Subscribed with: ${email}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        placeholder="Enter your email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button type="submit">Subscribe</button>
    </form>
  );
}

You can use this inside a larger app, or embed it in a static site using a bundler like Vite, Parcel, or create-react-app.

Key concepts:

  • State is managed with useState()
  • Components return UI declaratively
  • React updates the DOM efficiently

🧪 Other Frameworks at a Glance

Vue.js

  • Similar to React but more approachable for some learners
  • Templates + reactive state system
  • Easier for progressive enhancement

Svelte

  • Compiles components to vanilla JS — no virtual DOM
  • Extremely fast and lightweight
  • Great for small or performance-sensitive apps

Web Components (native)

  • Browser-supported way to define custom elements
  • Use with or without a framework
  • Ideal for libraries and reusability

🔗 More Resources

🧠 Your Turn: Rebuild & Extend Lesson 4

Take your form from Lesson 4: Web Interfaces and rebuild it using one of the frameworks mentioned above.

Minimum challenge:

  • Use a framework (React, Vue, Svelte, etc.)
  • Capture user input
  • Alert or log the result

Bonus:

  • Show a visual confirmation message
  • Add inline validation for the email field
  • Animate the button or form

Want inspiration? Try deploying your result using CodeSandbox, StackBlitz, or a local setup with Vite.

Next up: We’ll take a step back and talk about UX principles — how to design interfaces that are not just functional, but friendly and intuitive.