Angular Elements, Web Components & WP Due mondi che si incontrano! Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Chi sono? Developer per scelta e per passione, amante di nerdaggini di ogni tipo ed amante della condivisione del sapere! Da non troppo anche (quasi) imprenditore! Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Software Factory Learning Factory Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.acadevmy.it/intro https://www.francescosciuti.it 

Le tecnologie che prediligiamo Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

ma prima una cosa importante... Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

+ ma basta presentazioni e parliamo di... Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Web Components Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Web Components “Rendere il più possibile il nostro codice riusabile è senz’altro una eccellente idea!” Un programmatore qualunque Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Web Components I Web Components sono una collezione di differenti tecnologie che ci consentono di utilizzare elementi custom per le nostre web application, incapsulando ed isolando le funzionalità dal resto del codice. https://developer.mozilla.org/en-US/docs/Web/Web_Components Insomma la possibilità di realizzare tags custom per le nostre web application in maniera del tutto agnostica e senza l’uso di framework. Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Web Components ● Deve essere un elemento HTML custom ● Dovrebbe contenere tutta la logica per funzionare da solo ● Non deve influenzare involontariamente altri componenti e altre parti dell'applicazione. ● Deve gestire l’incapsulmanento per evitare collisioni tra JavaScript o CSS esterni. ● Più istanze dello stesso componente non devono interferire tra loro. Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

● Custom Elements Le JavaScript API che consentono di definire gli elementi custom ed i loro comportamenti e come possono essere usate nelle nostre web application. ● Shadow DOM Le JavaScript API che consentono di creare un DOM specifico per l’elemento chiamato shadow. Grazie a questo DOM, che viene renderizzato separatamente dal main DOM (detto light), viene garantito l’incapsulamento di comportamenti ed elementi privati, così che non possano collidere con il resto della pagina in cui l’elemento viene ospitato. ● HTML templates I tag template e slot ci consentono di riutilizzare markup e definire le posizioni di rendering, diventando così la base di costruzione di elementi custom. Web Components Ecco i mattoncini per costruire Web Components: Gli HTML Modules sono in realtà la quarta tecnologia nello stack, ma non è ancora stata implementata a dovere in tutti i più importanti browser. Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

● Creare una Classe con la ECMAScript 2015 class syntax. ● Registrare il custom element con il metodo CustomElementRegistry.define() indicando il nome dell’elemento e la classe. È anche possibile indicare un tag nativo dal quale ereditare. ● Eseguire, se lo si ritiene opportuno, l’attach dello Shadow DOM usando il metodo Element.attachShadow(). È possibile aggiungere child elements, event listeners, etc., allo Shadow DOM utilizzando i comuni DOM methods. ● Definire eventuali template e slot. È possibile clonare i templates e farne l’attach allo Shadow DOM utilizzando i comuni DOM methods. ● Utilizza il custom element dove vuoi! Web Components Poiché il supporto di Custom Element e ES2015 potrebbe non essere disponibile in tutti i browser, è possible utilizzare alcuni polyfill per supportare i browser più vecchi e il codice ES5. Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

● API semplici ● Ciclo di Vita ○ connectedCallback ○ disconnectedCallback ○ adoptedCallback ○ attributeChangedCallback ● Custom Events ● Ereditabili Built-in elements e custom elements Web Components- Custom Elements I Custom Elements consentono di estendere l’HTML con nuovi tags, registrati via Javascript e gestiti dal browser con il CustomElementRegistry. Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Web Components- Custom Elements Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Web Components- Custom Elements Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Web Components - Shadow DOM Le Shadow DOM API consentono di legare DOM “nascosti” al DOM “principale”, così da tenere isolata la struttura del markup, gli stili ed i comportamenti dei Web Components. Questo isolamento consente di evitare collisioni con il resto della pagina ospitante ed offre quindi un’elevata riusabilità dei componenti. È possibile usare il metodo Element.attachShadow() per creare uno Shadow Root che può essere creato in modalità open o closed. Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Web Components - Shadow DOM Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Web Components- Shadow DOM Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Web Components - Templates & Slots Templates È possibile utilizzare il tag HTML template per riutilizzare più e più volte lo stesso markup utilizzando una sorta di modello della stessa struttura. Questo elemento e i suoi contenuti non sono renderizzati nel DOM, ma può comunque essere referenziato usando JavaScript. I templates sono utili da soli, ma funzionano ancora meglio con i Web Components e sono ben supportati dai moderni browsers. Slots Gli slot sono identificati dall'attributo name e consentono di definire segnaposto in HTML, così che possono essere riempiti con qualsiasi frammento di markup desiderato. Per definire il contenuto dello slot, includiamo una struttura HTML all'interno del Custom Element con un attributo slot il cui valore è uguale al nome dello slot che vogliamo che riempia. Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Web Components - Templates & Slots Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Angular Elements Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Angular Elements Angular Elements consente di creare Angular Components impacchettati come Custom Elements, quindi come nuovi elementi HTML agnostici rispetto al framework. Utilizzando la funzione createCustomElement() si convertirà un componente Angular in una classe che può essere registrata con il browser come Custom Element! Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Angular Elements Il pacchetto @angular/elements esporta l'API createCustomElement() che fornisce un bridge per: ● Interfaccia di Comunicazione (@Input/@Output Interface) Le proprietà dei componenti saranno mappa direttamente negli attributi HTML e nell’Event System del browser. ● Meccanismi di Data Binding ● Meccanismi di Rilevamento delle Modifiche (Change Detection) Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Angular Elements Creare un custom element con Angular Elements è estremamente semplice ed immediato! Una versione minimale del core di Angular verrà iniettata come servizio per supportare la funzionalità di Change Detection, Data Binding, etc... Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Angular Elements Quando il Custom Element viene inserito in una pagina, il browser crea un'istanza della classe registrata e la aggiunge al DOM. Il contenuto viene quindi gestito dal componente, che utilizza la Angular sintax, e viene renderizzato utilizzando il componente ed i dati. Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Angular Elements - API createCustomElement Crea una classe di custom elements basata su un Angolar components. NgElementConstructor Prototipo per costruttore di classi basato su Angular components che può essere utilizzato per la registrazione di custom elements. customElements.define () Funzione JavaScript che registra il costruttore configurato ed il relativo tag del custom element, associandolo al CustomElementRegistry del browser. Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Angular Elements - API Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

DEMO! ...ma prima... Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

WordPress L'API REST di WordPress fornisce gli endpoints per i data types di WordPress che consentono quindi agli sviluppatori di interagire con il proprio sito con un approccio API First, inviando e ricevendo oggetti JSON. L’utilizzo delle API REST consente ad esempio la creazione di SPA basate su WordPress, oltre che, come nel nostro caso, come fonte dei dati per Web Components! https://developer.wordpress.org/rest-api/ Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Posso usarli quindi? Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Posso usarli quindi? Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Web Components I benefici sono quindi chiari: ● nativi e quindi non è necessario alcun framework ● facile integrazione e nessun transpiling ● Scoped CSS ● Standard, soltanto HTML, CSS & JavaScript Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Qualche Links Docs ● W3C Web Components ● Google Web Fundamentals ● Custom Elements Everywhere ● Open WC ● WebComponents.org ● MDN Web Components ● WC - The right way ● WC Everywhere ● WC Gold Best Practices Libraries / Tools ● Polymer Project ● LitHTML - LitElement ● Angular Elements ● ngx-build-plus ● Stencil ● Svelte ● Polyfills UI Libraries ● Material Web Components ● Vaadin ● Wired Elements ● Ionic Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.francescosciuti.it 

Grazie a tutti! Angular Elements, Web Components & WP Web Components & Angular Francesco Sciuti @ WordCamp Catania 2019 https://www.acadevmy.it/intro https://www.francescosciuti.it