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.
