Componenti web alla conferenza I/O 2019
Alla conferenza Google I/O 2019, Kevin Schaaf del progetto Polymer e Caridy Patiño di Salesforce hanno parlato dello stato dei componenti web.
Quanto sono popolari i componenti web?
Se oggi hai usato il web, probabilmente hai utilizzato componenti web. Secondo i nostri calcoli, tra il 5% e l'8% di tutti i caricamenti di pagine oggi utilizza uno o più componenti web. Ciò rende i componenti web una delle nuove funzionalità della piattaforma web di maggior successo rilasciate negli ultimi cinque anni.
Puoi trovare componenti web su siti che probabilmente usi ogni giorno, come YouTube e GitHub. Vengono utilizzati anche su molti siti di notizie e pubblicazioni creati con AMP, poiché i componenti AMP sono anche componenti web. Inoltre, molte aziende stanno adottando anche i componenti web.
Che cosa sono i componenti web?
Che cosa sono i componenti web? Le specifiche dei componenti web forniscono un insieme di API a basso livello che ti consentono di estendere l'insieme di tag HTML incorporati del browser. I componenti web forniscono:
- Un metodo comune per creare un componente (utilizzando le API DOM standard).
- Un modo comune per ricevere e inviare dati (utilizzando proprietà/eventi).
Al di fuori di questa interfaccia standard, gli standard non dicono nulla su come viene effettivamente implementato un componente:
- Il motore di rendering utilizzato per creare il DOM.
- Come si aggiorna in base alle modifiche delle relative proprietà o degli attributi.
In altre parole, i componenti web dicono al browser quando e dove creare un componente, ma non come.
Gli autori possono scegliere pattern di rendering funzionali come React per creare i propri componenti web oppure utilizzare modelli dichiarativi come quelli disponibili in Angular o Vue. In qualità di autore, hai la massima libertà di scegliere la tecnologia da utilizzare all'interno del componente, mantenendo al contempo l'interoperabilità.
A cosa servono i componenti web?
La differenza principale tra i componenti web e i sistemi di componenti proprietari è l'interoperabilità. Grazie alla loro interfaccia standard, puoi utilizzare i componenti web ovunque utilizzeresti un elemento integrato come <input> o <video>.
Poiché possono essere espressi come HTML reale, possono essere visualizzati da tutti i framework più diffusi. In questo modo, i componenti possono essere utilizzati più ampiamente, in una gamma più diversificata di applicazioni, senza vincolare gli utenti a un determinato framework.
Poiché l'interfaccia del componente è standard, i componenti web implementati utilizzando librerie diverse possono essere combinati nella stessa pagina. Questo fatto contribuisce a creare applicazioni future-proof quando aggiorni il tuo stack tecnologico. Invece di un cambiamento radicale da un framework all'altro, in cui sostituisci tutti i componenti, puoi aggiornarli uno alla volta.
Chi utilizza i componenti web?
Per tutti questi motivi, i componenti web stanno riscuotendo un enorme successo in una serie di casi d'uso diversi. Tre casi d'uso sono stati particolarmente apprezzati: siti di contenuti, sistemi di progettazione e applicazioni aziendali.
Siti della Rete Display
I componenti web sono la tecnologia perfetta per migliorare progressivamente i contenuti, perché possono già essere generati come HTML standard da un numero indefinito di sistemi CMS.
AMP è un ottimo esempio di quanto sia facile e veloce integrare i componenti web nell'infrastruttura del settore editoriale per la pubblicazione di contenuti.
Sistemi di progettazione
Sempre più aziende stanno unificando il modo in cui si presentano utilizzando un sistema di design, ovvero un insieme di componenti e linee guida che definiscono l'aspetto comune dei siti e delle applicazioni di un'organizzazione. Anche in questo caso i componenti web sono un'ottima soluzione.
Spesso i designer devono fare i conti con molti team che creano le proprie versioni dei componenti del sistema di design su React, Angular e tutti gli altri framework, anziché avere un unico insieme di componenti canonici.
I componenti web sono la risposta: un sistema di componenti veramente "scrivi una volta, esegui ovunque" che offre comunque ai team di app la libertà di utilizzare il framework che preferiscono.
Aziende come ING, EA e Google stanno implementando il linguaggio di design della propria azienda nei componenti web.
Enterprise: componenti web in Salesforce
I componenti web stanno inoltre facendo passi da gigante nelle aziende come tecnologia sicura e adatta al futuro su cui standardizzarsi. Caridy Patiño, architetto della piattaforma UI di Salesforce, ha spiegato perché ha scelto di utilizzare i componenti web per la sua piattaforma UI.
Salesforce è una raccolta di applicazioni, molte delle quali sono state acquisite. Ognuno di questi può essere eseguito su un proprio stack tecnologico. Poiché sono basati su stack diversi, è difficile dare a tutti lo stesso aspetto. Inoltre, Salesforce consente ai clienti di creare le proprie applicazioni personalizzate utilizzando la piattaforma Salesforce. Quindi, idealmente, i componenti dovrebbero essere utilizzabili anche da sviluppatori esterni.
Salesforce ha identificato una serie di esigenze dei clienti della propria piattaforma:
- Soluzioni standard anziché proprietarie, quindi è più facile trovare sviluppatori esperti e più veloce formare nuovi sviluppatori.
- Un modello di componenti comuni, quindi la personalizzazione di qualsiasi applicazione Salesforce funziona allo stesso modo.
Sono state identificate anche alcune cose che i clienti non volevano:
- Modifiche che comportano interruzioni nei componenti e nelle app. In altre parole, la compatibilità con le versioni precedenti era un must.
- Essere bloccati con una tecnologia obsoleta e non essere in grado di evolversi.
- Essere bloccati all'interno di un giardino recintato.
L'utilizzo dei componenti web come base per la nuova piattaforma UI ha soddisfatto tutte queste esigenze e il risultato è il nuovo Lightning Web Components.
Inizia a utilizzare i componenti web
Esistono molti modi per iniziare a utilizzare i componenti web.
Se stai creando un'app web, ti consigliamo di utilizzare alcuni dei numerosi componenti web disponibili. Ecco alcuni esempi:
- Google vende il proprio sistema Material Design come componenti web: Material Web Components.
- Wired Elements è un fantastico set di componenti web che presentano un aspetto stilizzato e disegnato a mano.
- Esistono ottimi componenti web per scopi speciali, come
<model-viewer>, che puoi inserire in qualsiasi app per aggiungere contenuti 3D.
Se stai sviluppando un sistema di progettazione per la tua azienda o vendi un singolo componente o una libreria che vuoi che sia utilizzabile in qualsiasi ambiente, valuta la possibilità di creare i componenti utilizzando i componenti web. Puoi utilizzare le API dei componenti web integrate, ma sono piuttosto di basso livello, quindi sono disponibili diverse librerie per semplificare la procedura.
Per iniziare a creare i tuoi componenti, puoi provare LitElement, una classe base di componenti web sviluppata da Google che offre un'esperienza di rendering funzionale eccezionale simile a React.
Altri strumenti e librerie da considerare:
- Stencil è un framework incentrato sui componenti web. Include diverse funzionalità di framework popolari, come JSX e TypeScript
- Angular Elements consente di eseguire l'incapsulamento dei componenti Angular come componenti web.
- Il wrapper per componenti web di Vue.js consente di pacchettizzare i componenti Vue come componenti web.
Altre risorse:
- open-wc.org offre ottime informazioni per iniziare, oltre a suggerimenti e configurazioni predefinite per gli strumenti di compilazione e sviluppo.
- Web Fundamentals fornisce informazioni di base sulle API dei componenti web e best practice per la progettazione di componenti web.
- MDN fornisce la documentazione di riferimento per le API dei componenti web, oltre ad alcuni tutorial. \
Immagine hero di Jason Tuinstra su Unsplash.
Nota dell'editor: il grafico sull'utilizzo degli elementi personalizzati è stato aggiornato per mostrare i dati sull'utilizzo mensile completi, come riportato su chromestatus.com. Una versione precedente di questo post includeva un grafico con una granularità di 6 mesi, senza i mesi più recenti. Le serie V0 e V1 nel grafico originale erano impilate; ora vengono mostrate non impilate con una riga totale per rimuovere l'ambiguità. Il brusco aumento alla fine del 2017 è dovuto a una variazione nel sistema di raccolta dei dati di chromestatus.com. Questa modifica ha interessato le statistiche di tutte le funzionalità della piattaforma web e ha comportato misurazioni più accurate in futuro.