Librerie e tool per i Web Component

Nel corso di questa guida abbiamo introdotto i concetti di base dei Web Component. Abbiamo visto come utilizzarli nelle nostre applicazioni Web, imparato a creare i nostri componenti da zero oppure estendendo gli elementi HTML nativi. Il tutto utilizzando tecnologie standard, senza bisogno di alcuna libreria o framework, se non i polyfill che ci garantiscono la compatibilità con i vecchi browser che non supportano, in tutto o in parte, i Web Component.

È quindi lecito chiedersi perché esistono librerie che hanno a che fare con i Web Component. Le motivazioni possono essere diverse, ma possiamo ricondurle essenzialmente a due: ragioni storiche e semplificazione dei meccanismi di definizione.

Alcune librerie sono nate quando ancora i browser non supportavano quasi nulla delle tecnologie che abilitano i Web Component. Sono quindi state loro le antesignane dell’odierna infrastruttura, ed hanno permesso agli sviluppatori che le hanno usate in passato di valutare il valore dei Web Component prima ancora che i browser li supportassero pienamente.

La maggior parte delle librerie più recenti si pongono l’obiettivo di semplificare quanto più possibile il processo di definizione di un Web Component che, effettivamente, può risultare un po’ prolisso in qualche passaggio. Consideriamo, ad esempio, la mappatura degli attributi sulle proprietà del componente e il monitoraggio della variazione del relativo valore. Essa richiede la scrittura di un po’ di codice e, soprattutto all’inizio, il meccanismo potrebbe risultare non del tutto lineare.

In base a queste considerazione, in questa lezione offriremo una rapida carrellata di alcune tra le librerie più diffuse per lavorare con i Web Component.

Polymer

È storicamente una delle prime librerie ad implementare i concetti di base dei Web Component. Avviato da Google nel 2013, il progetto è cresciuto negli anni ed è andato oltre l’implementazione dei Web Component, dando origine alle linee guida per lo stile visuale che sarebbe poi sfociato nel Material Design. La libreria supporta la creazione di elementi personalizzati con data binding, proprietà calcolate e template condizionali.

Un esempio minimale di Web Component creato con Polymer, tratto dal sito della libreria, è il seguente:

import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
class XCustom extends PolymerElement {
    static get template() {
        return html `
<style>
/* CSS rules for your element */
</style>
<!-- shadow DOM for your element -->
<div>[[greeting]]</div> <!-- data bindings in shadow DOM -->
`;
    }
    static get properties() {
        return {
            greeting: {
                type: String
            }
        }
    }
    constructor() {
        super();
        this.greeting = 'Hello!';
    }
    greetMe() {
        console.log(this.greeting);
    }
}
customElements.define('x-custom', XCustom);

Come possiamo vedere, un Web Component è una classe che estende la classe PolymerElement. La definizione del relativo template viene affidata alla proprietà statica template, mentre le proprietà del componente vengono definite semplicemente tramite properties. Si noti come il template venga definito utilizzando uno specifico motore di templating, lit-html, facente parte del progetto Polymer.

Hybrids

Questa libreria si pone l’obiettivo di semplificare al massimo la definizione di un Web Component, proponendo un approccio che predilige l’utilizzo di semplici oggetti e funzioni al posto di classi. Quello che segue è un esempio della sintassi proposta dalla libreria per definire un Web Component:

import {html, define} from 'hybrids';
export function increaseCount(host) {
    host.count += 1;
}
export const SimpleCounter = {
    count: 0,
    render: ({
        count
    }) => html `
<button onclick="${increaseCount}">
Count: ${count}
</button>
`,
};
define('simple-counter', SimpleCounter);

In questo modulo, possiamo osservare come la definizione del componente SimpleCounter sia rappresentata come la creazione di un oggetto letterale il cui aspetto è definito dal metodo render(). La sintassi è quindi molto minimale ed efficace.

Slim

Anche Slim propone una sintassi semplificata per la definizione di Web Component, orientandosi sull’utilizzo di decoratori, come mostrato dal seguente esempio:

@tag("my-tag")
@template(
    '<div s:if="myBoolean">Now you see me</div>' +
    '<div s:if="!myBoolean">Now you do not!</div>')
class MyTag extends Slim {
    onBeforeCreated() {
        this.myBoolean = true;
        setInterval(() => {
            this.myBoolean = !this.myBoolean
        }, 500)
    }
}

In questo caso notiamo come la definizione del Web Component sia basata sulle classi, ma la registrazione e la definizione del relativo template viene effettuata decorando la classe con i decorator @tag e @template.

Tra le altre caratteristiche, i Web Component creati con Slim prevedono il supporto per il data binding automatico.

Stencil

A differenza delle altre librerie, Stencil è un tool per la generazione di Web Component. In altre parole, mentre le altre librerie supportano a runtime la sintassi proposta e le altre funzionalità aggiuntive, Stencil genera codice JavaScript puro a partire da una sintassi ad alto livello per la definizione semplificata di un Web Component.

Stencil propone una sintassi che coglie il meglio delle librerie per componenti maggiormente utilizzate, come Angular e React, e produce codice che utilizza le primitive standard dei Web Component. In altre parole, il codice generato è analogo a quello che scriveremmo noi manualmente secondo quanto abbiamo appreso in questa guida.

Il seguente è un esempio di Web Component definito nella sintassi di Stencil:

import {Component, Prop} from '@stencil/core';
@Component({
    tag: 'my-first-component',
    styleUrl: 'my-first-component.css'
})
export class MyComponent {
    // Indicate that name should be a public property on the component
    @Prop() name: string;
    render() {
        return (
            <p>
            My name is {this.name}
            </p>
        );
    }
}

Anche in questo caso si fa ricorso ai decorator per la registrazione del tag, per l’indicazione del foglio di stile da applicare e per la definizione delle proprietà, in puro stile Angular. La definizione del template HTML, invece, è affidata al metodo render(), con il supporto di JSX, in puro stile React. Si noti che il linguaggio utilizzato da Stencil è TypeScript.

Conclusioni

Le librerie disponibili per creare Web Component semplificano in qualche modo il processo di definizione e forniscono un supporto per funzionalità avanzate. Anche se in linea di massima questo è da considerare come un vantaggio per lo sviluppatore, occorre valutare attentamente se il prezzo da pagare sia adeguato. In altre parole, la dipendenza dalla specifica libreria rischia di vanificare quello che è fondamentalmente la novità introdotta dai Web Component: la possibilità di creare componenti interoperabili sfuttando tecnologie standard.