Componenti web a I/O 2019
Data di pubblicazione: 18 giugno 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 navigato sul web, probabilmente hai utilizzato i componenti web. Secondo i nostri calcoli, oggi tra il 5% e l'8% di tutti i caricamenti di pagina utilizza uno o più componenti web. Ciò rende i componenti web una delle nuove funzionalità della piattaforma web più riuscite degli ultimi cinque anni.
Puoi trovare i componenti web su siti che probabilmente utilizzi tutti i giorni, come YouTube e GitHub. Vengono utilizzati anche in molti siti di notizie e pubblicazioni creati con AMP. I componenti AMP sono anche componenti web. Inoltre, molte aziende stanno adottando i componenti web.
Che cosa sono i componenti web?
Quindi, cosa sono i componenti web? Le specifiche dei componenti web forniscono un insieme di API di basso livello che ti consentono di estendere l'insieme 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 proprietà/eventi).
Al di fuori di questa interfaccia standard, gli standard non dicono nulla su come viene effettivamente implementato un componente:
- Quale motore di rendering utilizza per creare il DOM.
- Come si aggiorna in base alle modifiche alle sue proprietà o ai suoi attributi.
In altre parole, i componenti web indicano al browser quando e dove creare un componente, ma non come crearlo.
Gli autori possono scegliere pattern di rendering funzionali proprio come React per creare i propri componenti web oppure possono utilizzare modelli dichiarativi come quelli che si trovano in Angular o Vue. In qualità di autore, hai la massima libertà di scegliere la tecnologia da utilizzare all'interno del componente, mantenendo comunque 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 sottoposti a rendering 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 unico framework.
Poiché l'interfaccia dei componenti è standard, i componenti web implementati utilizzando librerie diverse possono essere combinati nella stessa pagina. Questo fatto contribuisce a rendere le tue applicazioni a prova di futuro quando aggiorni lo stack tecnologico. Anziché un cambiamento radicale tra un framework e l'altro, in cui sostituisci tutti i componenti, puoi aggiornarli uno alla volta.
Chi usa 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 particolarmente popolari: 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 incalcolabile di sistemi CMS.
AMP è un ottimo esempio di come i componenti web si siano inseriti rapidamente e facilmente nell'infrastruttura del settore editoriale per la pubblicazione di contenuti.
Design Systems
Sempre più aziende stanno unificando il modo in cui si presentano utilizzando un sistema di progettazione, ovvero un insieme di componenti e linee guida che definiscono l'aspetto comune dei siti e delle applicazioni di un'organizzazione. Anche i componenti web sono perfetti per questo scopo.
Spesso, i designer devono fare i conti con molti team che creano le proprie versioni dei componenti del sistema di progettazione su React, Angular e tutti gli altri framework, anziché avere un unico set di componenti canonici.
I componenti web sono la risposta: un sistema di componenti che consente di scrivere una sola volta ed eseguire ovunque, ma che lascia comunque ai team delle app la libertà di utilizzare il framework che preferiscono.
Aziende come ING, EA e Google stanno implementando il linguaggio di progettazione della propria azienda nei componenti web.
Enterprise: Web components at Salesforce
I componenti web stanno inoltre facendo passi da gigante all'interno delle aziende come tecnologia sicura e a prova di futuro su cui standardizzarsi. Caridy Patiño, architetto della piattaforma UI di Salesforce, ha spiegato perché hanno creato la loro piattaforma UI utilizzando i componenti web.
Salesforce è una raccolta di applicazioni, molte delle quali sono state acquisite. Ciascuno di questi può essere eseguito sul proprio stack tecnologico. Poiché sono basati su stack diversi, è difficile dare loro lo stesso aspetto e la stessa esperienza utente. Inoltre, Salesforce consente ai clienti di creare applicazioni personalizzate utilizzando la piattaforma Salesforce. Idealmente, i componenti dovrebbero essere utilizzabili anche da sviluppatori esterni.
Salesforce ha identificato una serie di esigenze dei clienti della sua piattaforma:
- Soluzioni standard anziché proprietarie, in modo da trovare più facilmente sviluppatori esperti e velocizzare l'inserimento di nuovi sviluppatori.
- Un modello di componenti comune, in modo che la personalizzazione di qualsiasi applicazione Salesforce funzioni allo stesso modo.
Hanno anche identificato alcune cose che i clienti non volevano:
- Modifiche che causano interruzioni ai componenti e alle app. In altre parole, la compatibilità con le versioni precedenti era un requisito fondamentale.
- Essere bloccati con una tecnologia obsoleta e non riuscire a evolvere.
- Essere bloccato all'interno di un walled garden.
L'utilizzo di componenti web come base per la nuova piattaforma UI ha soddisfatto tutte queste esigenze e il risultato sono i nuovi componenti web Lightning.
Inizia a utilizzare i componenti web
Esistono molti modi per iniziare a utilizzare i componenti web.
Se stai creando un'app web, valuta la possibilità di utilizzare alcuni dei numerosi componenti web standard disponibili. Ecco alcuni esempi:
- Google vende il proprio sistema Material Design come componenti web: Material Web Components.
- Gli elementi cablati sono un insieme interessante di componenti web che presentano un aspetto abbozzato e disegnato a mano.
- Esistono componenti web 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 stai vendendo un singolo componente o una singola libreria che vuoi che sia utilizzabile in qualsiasi ambiente, valuta la possibilità di creare i tuoi componenti utilizzando i componenti web. Puoi utilizzare le API dei componenti web integrati, ma sono piuttosto di basso livello, quindi sono disponibili diverse librerie per semplificare il processo.
Per iniziare a creare i tuoi componenti, puoi consultare LitElement, una classe base di componenti web sviluppata da Google che offre un'ottima esperienza di rendering funzionale simile a React.
Altri strumenti e librerie da considerare:
- Stencil è un framework che utilizza principalmente componenti web. Include diverse funzionalità di framework popolari, come JSX e TypeScript
- Angular Elements offre un modo per racchiudere i componenti Angular come componenti web.
- Il wrapper dei componenti web Vue.js offre un modo per pacchettizzare i componenti Vue come componenti web.
Altre risorse:
- open-wc.org offre ottime informazioni introduttive, nonché suggerimenti e configurazioni predefinite per gli strumenti di build e sviluppo.
- Web Fundamentals fornisce informazioni di base sulle API dei componenti web e sulle best practice per la progettazione di componenti web.
- MDN fornisce documentazione di riferimento per le API dei componenti web, oltre ad alcuni tutorial.