Componenti web alla conferenza I/O 2019
Alla conferenza Google I/O 2019, Kevin Schaaf di Polymer Project e Caridy Patiño di Salesforce hanno parlato dello stato dei componenti web.
Quanto sono popolari i componenti web?
Se hai usato il web oggi, probabilmente hai usato i componenti web. In base ai dati in nostro possesso, oggi tra il 5% e l'8% di tutti i caricamenti di pagine utilizza uno o più componenti web. Per questo, i componenti web sono una delle nuove funzionalità di maggior successo per le piattaforme web vendute negli ultimi cinque anni.
Puoi trovare componenti web su siti che probabilmente usi tutti i giorni, come YouTube e GitHub. Inoltre, vengono utilizzati su molti siti di notizie ed editoria creati con AMP: i componenti AMP sono anche componenti web. E molte aziende stanno adottando anche componenti web.
Cosa sono i componenti web?
Cosa sono i componenti web? Le specifiche dei componenti web forniscono un insieme di API di basso livello che consentono di estendere il set integrato di tag HTML del browser. I componenti web forniscono:
- Un metodo comune per creare un componente (utilizzando le API DOM standard).
- Un modo comune di ricevere e inviare dati (utilizzando le proprietà/eventi).
Al di fuori di questa interfaccia standard, gli standard non forniscono informazioni su come un componente viene effettivamente implementato:
- Il motore di rendering utilizzato per creare il DOM.
- Come si aggiorna automaticamente in base alle modifiche alle sue proprietà o attributi.
In altre parole, i componenti web indicano 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 usare modelli dichiarativi come potresti trovare in Angular o Vue. In qualità di autore, hai la totale libertà di scegliere la tecnologia da utilizzare all'interno del componente, pur mantenendo l'interoperabilità.
Per cosa sono utili i componenti web?
La differenza fondamentale tra i componenti web e i sistemi di componenti proprietari è l'interoperabilità. Grazie alla loro interfaccia standard, puoi utilizzare i componenti web ovunque tu usi un elemento integrato, ad esempio <input> o <video>.
Poiché possono essere espressi come codice HTML reale, possono essere visualizzati da tutti i framework più diffusi. In questo modo, i tuoi componenti possono essere utilizzati più ampiamente, in una gamma più diversificata di applicazioni, senza bloccare gli utenti in un unico framework.
Inoltre, poiché l'interfaccia dei componenti è standard, i componenti web implementati utilizzando librerie diverse possono essere combinati sulla stessa pagina. Ciò aiuta a rendere le tue applicazioni a prova di futuro quando aggiorni lo stack tecnico. Invece di un gigantesco passaggio tra un framework e l'altro, in cui sostituisci tutti i componenti, puoi aggiornarli uno alla volta.
Chi utilizza i componenti web?
Quindi, per tutti questi motivi, Web components sta ottenendo un enorme successo in una varietà 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, poiché possono già essere generati come codice HTML standard da un numero incalcolato di sistemi CMS.
AMP è un ottimo esempio di quanto i componenti web siano stati inseriti rapidamente e facilmente nell'infrastruttura del settore dell'editoria per la pubblicazione di contenuti.
Progettare sistemi
Sempre più aziende stanno riunendo il modo in cui si presentano utilizzando un sistema di progettazione, 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 ideali.
Spesso, i designer devono fare i conti con molti team che creano le proprie versioni dei componenti del sistema di progettazione oltre a React, Angular e tutti gli altri framework, invece di avere un unico insieme di componenti canonici.
I componenti web sono la risposta: scrivi una volta sola ed esegui ovunque il sistema di componenti, che lascia comunque ai team delle app la libertà di usare 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 facendo passi da gigante anche all'interno delle aziende come tecnologia sicura e a prova di futuro su cui standardizzare. Caridy Patiño, architetto della piattaforma UI di Salesforce, ha spiegato perché ha creato la sua piattaforma utilizzando componenti web.
Salesforce è una raccolta di applicazioni, molte delle quali provenienti da acquisizioni. Ognuna di queste soluzioni può essere eseguita su un proprio stack tecnologico. Poiché si basano su stack diversi, è difficile dare loro 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é di proprietà, per cui è più facile trovare sviluppatori esperti e far crescere più velocemente nuovi sviluppatori.
- Un modello di componente comune, quindi la personalizzazione di qualsiasi applicazione Salesforce funziona allo stesso modo.
Inoltre, ha identificato alcune cose che i clienti non volevano:
- Modifiche che provocano un errore nei componenti e nelle app. In altre parole, la compatibilità con le versioni precedenti era un must.
- Limitarsi a tecnologie obsolete e incapace di evolversi.
- Rimanere bloccati in un giardino recintato.
L'utilizzo dei componenti web come base per la nuova piattaforma UI ha soddisfatto tutte queste esigenze e il risultato è stato l'uso dei nuovi componenti web Lightning.
Inizia a utilizzare i componenti web
Esistono molti ottimi modi per iniziare a utilizzare i componenti web.
Se stai creando un'applicazione web, considera l'utilizzo di alcuni dei numerosi componenti web standard disponibili. Ecco alcuni esempi:
- Google vende il proprio sistema di Material Design come componenti web: Material Web Componenti.
- Gli elementi cablati sono un fantastico insieme di componenti web dall'aspetto schizzoso e disegnato a mano.
- Esistono componenti web per scopi speciali come
<model-viewer>, che puoi rilasciare in qualsiasi app per aggiungere contenuti 3D.
Se stai sviluppando un sistema di progettazione per la tua azienda o stai vendendo un singolo componente o una libreria che vuoi utilizzare in qualsiasi ambiente, prendi in considerazione l'idea di creare i componenti utilizzando i componenti web. Puoi utilizzare le API dei componenti web integrati, ma poiché si tratta di API di basso livello, sono disponibili numerose librerie per semplificare la procedura.
Per iniziare a creare i tuoi componenti, puoi dare un'occhiata a LitElement, una classe base di componenti web sviluppata da Google che offre un'esperienza di rendering funzionale, simile a React.
Altri strumenti e librerie da considerare:
- Stencil è un framework incentrato sui componenti web. Include diverse funzionalità di framework molto note, come JSX e TypeScript
- Angular Elements offre un modo per aggregare i componenti Angular come componenti web.
- Il wrapper dei componenti web Vue.js consente di pacchettizzare i componenti di Vue come componenti web.
Altre risorse:
- open-wc.org offre ottime informazioni per iniziare, nonché suggerimenti e configurazioni predefinite per gli strumenti di creazione e sviluppo.
- Web Fundamentals fornisce indicazioni sulle API dei componenti web di base e best practice per la progettazione di componenti web.
- MDN fornisce documenti 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 completi sull'utilizzo mensile, come riportato su chromestatus.com. Una versione precedente di questo post includeva un grafico con una granularità di sei mesi, senza i mesi più recenti. Le serie V0 e V1 nel grafico originale sono state sovrapposte e ora sono mostrate come non in pila con una linea del totale per eliminare le ambiguità. Il brusco salto alla fine del 2017 è dovuto a una modifica nel sistema di raccolta dei dati per chromestatus.com. Questa modifica ha influito sulle statistiche di tutte le funzionalità della piattaforma web e ha portato a misurazioni più accurate in futuro.