DigitalNext

Web Components nel 2024 - Il Ritorno degli Standard Nativi

18 novembre 2024•Sviluppo Web•Di Michele Vitiello Bonaventura

Come i Web Components stanno finalmente maturando e conquistando adozione mainstream, offrendo un'alternativa agli ecosistemi proprietari.

Nell'ecosistema in costante evoluzione dello sviluppo web, i Web Components hanno percorso un lungo cammino dalla loro introduzione. Inizialmente promettenti ma limitati, nel 2024 stanno vivendo una rinascita, emergendo come una solida alternativa agli ecosistemi di framework proprietari. In questo articolo, esploreremo lo stato attuale dei Web Components, i progressi che hanno reso possibile la loro adozione mainstream e i pattern emergenti che stanno plasmando il futuro dello sviluppo web basato su standard.

La Rinascita dei Web Components

Un Lungo Viaggio verso la Maturità

I Web Components sono stati introdotti per la prima volta circa un decennio fa con una promessa ambiziosa: componenti riutilizzabili basati su standard web nativi. Tuttavia, l'adozione iniziale è stata ostacolata da:

  • Supporto browser incompleto: Le implementazioni variavano significativamente tra browser
  • API complesse: Le prime versioni richiedevano molto codice boilerplate
  • Mancanza di ecosistema: Pochi strumenti, librerie e pattern consolidati

Nel 2024, questi ostacoli sono stati in gran parte superati:

  • Supporto universale: Tutti i browser moderni supportano completamente le specifiche Web Components
  • API semplificate: Nuove aggiunte alle specifiche hanno ridotto notevolmente il codice necessario
  • Ecosistema maturo: Un ricco panorama di strumenti, librerie e pattern ben consolidati

Le Specifiche Fondamentali

I Web Components si basano su quattro specifiche principali:

  1. Custom Elements: API per definire nuovi tipi di elementi HTML
  2. Shadow DOM: Encapsulation del DOM e degli stili
  3. HTML Templates: Frammenti HTML riutilizzabili
  4. ES Modules: Il sistema di moduli JavaScript nativo

Nel 2024, queste specifiche sono state ulteriormente arricchite con:

  • Declarative Shadow DOM: Rendering lato server semplificato
  • Scoped Custom Element Registries: Prevenzione dei conflitti di naming
  • Form-associated Custom Elements: Integrazione nativa con i form HTML

Queste aggiunte hanno risolto molte delle limitazioni storiche dei Web Components.

L'Ecosistema Web Components nel 2024

Framework e Librerie

L'ecosistema attuale offre diverse opzioni per lavorare con i Web Components:

Lit

Lit (successore di Lit-Element) si è consolidato come la libreria principale:

import { LitElement, html, css } from 'lit';

export class MyCounter extends LitElement {
  static properties = {
    count: { type: Number }
  };

  static styles = css`
    :host {
      display: block;
      font-family: sans-serif;
      text-align: center;
    }
    button {
      padding: 8px 16px;
      background: var(--primary-color, #09f);
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  `;

  constructor() {
    super();
    this.count = 0;
  }

  render() {
    return html`
      <div>
        <h2>Counter: ${this.count}</h2>
        <button @click=${this._increment}>Increment</button>
      </div>
    `;
  }

  _increment() {
    this.count++;
  }
}

customElements.define('my-counter', MyCounter);

Lit ha trovato il giusto equilibrio tra minimalismo e funzionalità, offrendo:

  • Rendering dichiarativo efficiente
  • Sistema di proprietà reattive
  • Gestione semplificata degli stili
  • Ottima integrazione con TypeScript

Stencil

Stencil ha guadagnato popolarità nell'enterprise come compilatore di Web Components:

import { Component, Prop, h, State } from '@stencil/core';

@Component({
  tag: 'my-counter',
  styleUrl: 'my-counter.css',
  shadow: true
})
export class MyCounter {
  @Prop() initialCount: number = 0;
  @State() count: number;

  componentWillLoad() {
    this.count = this.initialCount;
  }

  private increment = () => {
    this.count++;
  }

  render() {
    return (
      <div>
        <h2>Counter: {this.count}</h2>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

Stencil si distingue per:

  • Output ottimizzato e leggero
  • Supporto per JSX
  • Generazione automatica della documentazione
  • Strumenti per design system scalabili

Fast

Microsoft FAST ha introdotto approcci innovativi:

import { FASTElement, html, css } from '@microsoft/fast-element';

const template = html<MyCounter>`
  <div>
    <h2>Counter: ${x => x.count}</h2>
    <button @click=${x => x.increment()}>Increment</button>
  </div>
`;

const styles = css`
  :host {
    display: block;
    font-family: var(--body-font);
    text-align: center;
  }
  button {
    background: var(--accent-color);
    color: var(--button-text);
    border: none;
    border-radius: var(--control-radius);
    padding: 8px 16px;
  }
`;

export class MyCounter extends FASTElement {
  static definition = {
    name: 'my-counter',
    template,
    styles,
    attributes: [
      { name: 'count', converter: Number, default: 0 }
    ]
  };

  count = 0;

  increment() {
    this.count++;
  }
}

FASTElement.define(MyCounter);

FAST introduce concetti come:

  • Design token integrati
  • Recipi di composizione avanzati
  • Strategie di rendering innovative

Strumenti e Supporto

L'ecosistema di supporto è ora molto più robusto:

  • IDE support: Eccellente supporto in VS Code, WebStorm, ecc.
  • Testing: Jest, Web Test Runner, e altri framework supportano nativamente i Web Components
  • Bundling: Rollup, Webpack, Vite offrono ottimizzazioni specifiche per Web Components
  • Type checking: TypeScript ha migliorato significativamente il supporto per i Web Components

Pattern e Best Practices Emergenti

Composition over Inheritance

Il pattern di composizione è diventato dominante:

// Componente container
class UserDashboard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <user-profile></user-profile>
      <user-activity></user-activity>
      <user-stats></user-stats>
    `;
  }
}

// Componenti specializzati
class UserProfile extends HTMLElement { /* ... */ }
class UserActivity extends HTMLElement { /* ... */ }
class UserStats extends HTMLElement { /* ... */ }

customElements.define('user-dashboard', UserDashboard);
customElements.define('user-profile', UserProfile);
customElements.define('user-activity', UserActivity);
customElements.define('user-stats', UserStats);

Questo approccio favorisce:

  • Componenti più specializzati e riutilizzabili
  • Testing più semplice
  • Migliore performance di rendering

Events-Driven Communication

La comunicazione basata su eventi è diventata lo standard:

// Componente emittente
class ProductSelector extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    // ... render logic
    
    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      const detail = { productId: this.getAttribute('product-id') };
      this.dispatchEvent(new CustomEvent('product-selected', { 
        detail,
        bubbles: true, 
        composed: true 
      }));
    });
  }
}

// Componente ricevente
class ShoppingCart extends HTMLElement {
  connectedCallback() {
    this.addEventListener('product-selected', (e) => {
      this.addToCart(e.detail.productId);
    });
  }
  
  addToCart(productId) {
    // Add product logic
  }
}

Questo pattern:

  • Mantiene un basso accoppiamento tra componenti
  • Facilita la riutilizzabilità
  • Consente topologie di comunicazione flessibili

Design Tokens e CSS Custom Properties

L'uso di design token tramite CSS Custom Properties è diventato fondamentale:

/* Design system tokens */
:root {
  /* Colors */
  --color-primary: #0088ff;
  --color-secondary: #ff4400;
  --color-text: #333333;
  --color-background: #ffffff;
  
  /* Typography */
  --font-family: 'Roboto', sans-serif;
  --font-size-base: 16px;
  --font-size-heading: 24px;
  
  /* Spacing */
  --spacing-unit: 8px;
  --spacing-small: calc(var(--spacing-unit) * 1);
  --spacing-medium: calc(var(--spacing-unit) * 2);
  --spacing-large: calc(var(--spacing-unit) * 3);
  
  /* Border */
  --border-radius: 4px;
  --border-width: 1px;
}

/* Dark theme override */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #ffffff;
    --color-background: #121212;
  }
}

I componenti utilizzano questi token:

const styles = css`
  :host {
    display: block;
    font-family: var(--font-family);
    color: var(--color-text);
    background: var(--color-background);
    padding: var(--spacing-medium);
  }
  
  h2 {
    font-size: var(--font-size-heading);
    margin-bottom: var(--spacing-small);
  }
  
  button {
    background: var(--color-primary);
    border-radius: var(--border-radius);
    padding: var(--spacing-small) var(--spacing-medium);
    color: white;
  }
`;

Questo approccio garantisce:

  • Coerenza visiva
  • Facilità di theming
  • Adattabilità a diversi contesti

Casi d'Uso e Storie di Successo

Design System Multi-Framework

I Web Components brillano particolarmente nella creazione di design system che devono funzionare con diversi framework:

// Il componente Web Component
class AppButton extends HTMLElement {
  static get observedAttributes() {
    return ['variant', 'disabled'];
  }
  
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.render();
  }
  
  attributeChangedCallback() {
    this.render();
  }
  
  render() {
    const variant = this.getAttribute('variant') || 'primary';
    const disabled = this.hasAttribute('disabled');
    
    this.shadowRoot.innerHTML = `
      <style>
        /* Styles based on variant */
      </style>
      <button class="${variant}" ?disabled="${disabled}">
        <slot></slot>
      </button>
    `;
    
    this.shadowRoot.querySelector('button').addEventListener('click', (e) => {
      if (!disabled) {
        this.dispatchEvent(new CustomEvent('clicked'));
      }
    });
  }
}

customElements.define('app-button', AppButton);

Può essere utilizzato con qualsiasi framework:

// React
function ReactComponent() {
  return <app-button variant="primary">Click me</app-button>;
}

// Vue
<template>
  <app-button variant="secondary" @clicked="handleClick">Click me</app-button>
</template>

// Angular
<app-button variant="danger" (clicked)="handleClick()">Click me</app-button>

Aziende come ING, Adobe e Microsoft hanno adottato questo approccio per unificare le loro interfacce utente.

Micro-Frontend Architecture

I Web Components sono diventati una tecnologia chiave per le architetture micro-frontend:

<!-- Shell application -->
<app-shell>
  <navigation-header></navigation-header>
  <main>
    <team-a-widget></team-a-widget>
    <team-b-widget></team-b-widget>
    <team-c-widget></team-c-widget>
  </main>
  <app-footer></app-footer>
</app-shell>

Ogni team può sviluppare, testare e rilasciare il proprio widget indipendentemente, utilizzando anche diversi framework internamente, ma esponendo un'interfaccia comune basata su Web Components.

Sfide Rimanenti

Nonostante i progressi, alcune sfide rimangono:

SEO e Accessibilità

Il rendering lato server è migliorato con Declarative Shadow DOM, ma:

<!-- Declarative Shadow DOM -->
<my-card>
  <template shadowroot="open">
    <style>/* Styles */</style>
    <div class="card">
      <div class="header">
        <slot name="title"></slot>
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </template>
  <h2 slot="title">Card Title</h2>
  <p>Card Content</p>
</my-card>

È ancora necessario prestare particolare attenzione a:

  • Assicurarsi che i contenuti siano indicizzabili dai motori di ricerca
  • Mantenere un'esperienza di rendering progressivo
  • Garantire un'accessibilità adeguata attraverso lo shadow DOM

Gestione dello Stato

La gestione dello stato rimane un punto in cui i Web Components non offrono soluzioni native, ma le opzioni sono migliorate:

// Utilizzo di un simple store
import { createStore } from '@simple-store/core';

const store = createStore({
  state: {
    counter: 0,
    user: null
  },
  actions: {
    incrementCounter(state) {
      state.counter++;
    },
    setUser(state, user) {
      state.user = user;
    }
  }
});

class CounterElement extends HTMLElement {
  connectedCallback() {
    this.render();
    this.unsubscribe = store.subscribe(state => {
      this.render();
    });
  }
  
  disconnectedCallback() {
    this.unsubscribe();
  }
  
  render() {
    const state = store.getState();
    this.innerHTML = `
      <div>Count: ${state.counter}</div>
      <button>Increment</button>
    `;
    this.querySelector('button').addEventListener('click', () => {
      store.dispatch('incrementCounter');
    });
  }
}

Librerie come lit-state, mobx, e redux possono essere integrate con i Web Components per gestire lo stato in modo più sofisticato.

Il Futuro dei Web Components

Proposte ed Evoluzioni in Arrivo

Diverse proposte promettenti stanno emergendo:

  • Constructable Stylesheets: Miglioramenti nella gestione e condivisione degli stili
  • Form-associated Custom Elements v2: API migliorate per l'integrazione con i form
  • Custom State Pseudo Classes: Styling basato sullo stato interno dei componenti
  • Scoped Element Registries: Prevenzione dei conflitti di nomi tra diverse librerie

Convergenza con altre Tecnologie Web

Stiamo assistendo a una convergenza interessante tra:

  • Web Components e Server Components: Combinare il meglio del rendering lato server e client
  • Web Components e WASM: Componenti ad alte prestazioni con logica complessa
  • Web Components e WebGPU: Componenti con capacità grafiche avanzate

Conclusione

I Web Components nel 2024 hanno finalmente raggiunto la maturità che i loro sostenitori avevano previsto anni fa. Combinando le lezioni apprese dagli ecosistemi dei framework con la potenza degli standard web nativi, offrono oggi un approccio convincente per costruire interfacce utente modulari, riutilizzabili e future-proof.

Mentre i framework continueranno a innovare e offrire esperienze di sviluppo più guidate, i Web Components forniscono un substrato standardizzato che garantisce longevità e interoperabilità. Le organizzazioni che investono oggi in Web Components stanno costruendo su fondamenta solide che resisteranno ai cicli di vita inevitabilmente brevi dei framework proprietari.

La promessa originale dei Web Components – scrivere una volta, utilizzare ovunque – si sta finalmente realizzando, e il futuro dello sviluppo web appare sempre più basato su standard aperti piuttosto che su ecosistemi proprietari.

← Torna al blog