Gitbaritalian
developer
podcast
34

Programmazione e webcomponents.

Serie 1
Episodio 34
Durata 25 minuti

In una condizione di emergenza ho registrato una breve puntata sui web components. Ho parlato di custom elements, shadow dom e templates, i mattoncini necessari per creare componenti usando le api standard.

Links

Contatti

@brainrepo su twitter o via mail a info@gitbar.it

Crediti

Le sigle sono state prodotte da MondoComputazionale Le musiche da Blan Kytt - RSPN e Broke For Free - Something Elated

Trascrizione

Trascrizione automatica realizzata con servizi Amazon AWS Transcribe

è domani, ma non ho mai mangiato.
Era ancora il gioco del sex toy stesse insieme ad altri giorni bob buon penso bastano consapevoli chiodo indagava, avesse davvero lascia a già nessun mentre va in fumo specchi e buoni che deve essere è nato il giusto il fondo ex ad di renee cosa sento dopo il caso? Dai ris no che era ancora il gioco del sex toy stesse insieme ad altri giorni bob whom penso bastano sgradevoli andava avesse davvero lascia a già nessun mentre omosex specchio buoni che dovrà essere è nato il wilford said cosa senza far casini.
Torna da elisa benvenuti su bar i podcast dedicato al mondo dei fools developer di mezzo artigiani mezzo artisti che ogni giorno infilavano le mani nel fango per creare nel modo più efficiente possibile quei prodotti digitali che quotidianamente usiamo.
Bene.
Benvenuto in un nuovo episodio di questa volta, pienamente estivo, anche se con un settore un po' di fortuna, visto che il mio mack e', praticamente imploso, viste le temperature, si è praticamente surriscaldato talmente tanto da assomigliare a una stufa alogena piuttosto che un computer.
La mia dimenticanza del microfono in fondo quindi la cosa più importante che riusciamo anche questo giovedì a pubblicare un episodio questo giovedì voglio parlarvi di web components.
Voglio farlo anche perché questo tipo di puntata e propedeutica alla puntata che andro' a registrare domani e che nella quale cercheremo di affrontare con un ospite speciale il mondo dei micro.
Però prima di parlargli è necessario, infatti inizierà a dare uno sguardo al mondo dei web compone sulla rete esiste tantissimo materiale, anche un talk del mio amico francesco asciutti che porco del quale vi inseriro' nelle note dell'episodio link e noi andremo a vederlo un po' giusto per inquadrare il contesto.
Essendo un podcast audio è veramente difficile poter spiegarne i dettagli implementati ivy e come utilizzarlo visto che non vi posso far vedere del codice, però proveremo comunque a introdurre largo.
Lo faremo subito dopo avervi ricordato i contatti.
Potete scrivermi ein oppure su twitter a heat brian repo vi state gia' scrivendo in tanti, tanto che pensavo ne stavo ragionando sul fatto di creare un gruppo telegramma quasi sicuramente lo andremo a creare a settembre, quindi alla fine di questa di questo periodo estivo è in questo gruppo ci scambieremo un po' di idee e mi darete anche una mano a scegliere gli argomenti per gli detto questo possiamo iniziare uno dei motivi per cui usiamo il framework javascript e senza dubbio perché ci mettono a disposizione la possibilità di dividere, di organizzare la nostra applicazione in componenti.
Per cui se questo è il l'elemento trainante verso l'utilizzo di un framework, una domanda sorge spontanea ma dobbiamo portarci appresso tutta la complessità che ci viene da un framework solo perché vogliamo utilizzare un approccio componenti? Beh, la risposta e' no la il vantaggio di poter lavorare con la tecnica del divide et impera, quindi frammentare il nostro codice elementi incapsulati a sé stanti e' un vantaggio molto importante.
Vantaggio che tra l'altro è stato accolto dal v tre c, che già nel duemila undici ha fatto la prima draft in per la realizzazione di piazza standard, volte proprio alla creazione il concetto del web components quindi con questo passaggio sia avuto all'interno nel browser la possibilità di creare degli elementi personalizzati degli elementi html personalizzati ma in modo nativo.
Questo rende da una parte la possibilità di sviluppare e dei componenti che sono poi alla base del modo moderno descrivere le applicazioni web, anche perché oggi vuoi col paradigma Vivienne voi con un approccio piu' interattivo più reattivo nello scrivere le nell'interfaccia, sia la necessità di avere dei componenti non solo definiti dal punto di vista strutturale, ma che operano e hanno dei comportamenti.
Comportamenti definiti però in questo caso all'interno dello stesso componente.
Questo fa sì che la nostra logica sia più ordinata e che tutto si hanno in qualche modo ragiona un po' sotto forma di elementi atomici.
Questo è molto, molto, molto interessante, anche perché se abbiamo bisogno oggi di sviluppare un'applicazione quindi di utilizzare di web components, possiamo tranquillamente farlo senza portarci appresso appunto le responsabilità che si hanno utilizzando del framework come può essere reato o angola, per cui facendolo semplicemente ha scritto il web compone scritti con lei per gli standard sostituiranno il framework? Secondo me no perche'.
I vantaggi che il framework inseriscono e portano a questo mondo sono anche altri.
Per esempio il framework hanno dei sistemi della per la gestione dello stato, che sono molto, molto efficaci e anche molto pratici da utilizzare il primo anno, per esempio delle ottime liberi di routing.
Quindi in realtà per ora possiamo immaginare che i due elementi convivono insieme e gli dà questa convivenza, ne abbiamo una serie di vantaggi.
Immaginate di lavorare in un grosso TIM per un prodotto o di una certa dimensione.
Possiamo pensare a un Netflix della situazione all'interno del team, ma esistono all'interno, dell'azienda e del prodotto.
Esistono una serie di TIM che lavorano sul prodotto.
Ogni team utilizza magari una tecnologia on framework ad hoc, che ne so, la parte di autenticazione utente risale a qualche anno fa ed è stata sviluppata con se la parte di catalogo è stata sviluppata con un reato.
Se io volessi creare un design system, cioè una raccolta di regole per la realizzazione estetica e dei weeks degli elementi che vanno a costruire la pagina e condividerlo con tutti i team, avrei un problema perche' perche' il era scritto i componenti in quella con quella libreria, il team che ha lavorato sul reato Wu, hanno utilizzato il loro fremono per scrivere il componente.
A questo punto entrano in gioco il concetto di web, quindi sviluppato utilizzando le piaci dei caschi, lasciando dome magari anche i tempi.
Lei no.
Quindi questi elementi scritti con le piante native, se riescono in qualche modo a fare da ponte per tutti questi freni, per cui in un progetto di medie e grosse dimensioni, sia la possibilità di condividerli in questo modo il codice lei riutilizzabile, anche in modo molto più spinto.
E soprattutto questi componenti sono in qualche modo universale all'interno del contesto della nostra applicazione.
Questo tipo di componente scritti con le piante native, per esempio, li troviamo all'interno delle e riempì le pagine accelerate, quelle che vengono indicizzate e da Google in un modo particolare vengono lette da Facebook in un modo altrettanto particolare, ma non sono altro che un script che definisce una serie di componenti che poi tu utilizza all'interno della questa pagina.
Scrivere questi web components, come vi dicevo prima, vuol dire mettere mano a tre concetti principali.
Il primo sono il cast, quindi la definizione di tag html custom utilizzando una javascript definita la seconda e lo shadow don.
Perché? Perché il web components hanno una particolare caratteristica che quella dell'essere incapsulati, per cui ci serve uno strumento per andare a scrivere del codice html che rimane incapsulato in una sorta di scatoletta e che non va a interferire con gli altri elementi e i componenti che lo circondano e quindi lei javascript ci mettono a disposizione anche questo tipo di strumento per finire i perché il modo per creare gli elementi custom è quello di andare poi a interagire col dome.
Noi sappiamo quanto puo' essere doloroso lavorare col domum javascript e utilizzare appunto dei piani per andare a scrivere, a modificare il doma javascript.
Per ovviare a questo problema abbiamo uno strumento si chiamano html bellezza sono dei tag dove noi all'interno definiamo una struttura html che poi possiamo utilizzare in un secondo momento tramite già scritto, per esempio andare interne andando a interpolare dei valori e questa struttura.
Però quando io non me la vado a creare me la vado a definire in modo il secondo il codice html e non viene mostrata all'interno della pagina e quindi mi evita in qualche modo il la dover scrivere le azioni sul duomo.
Quindi definire gli elementi del dominio modo programmatico che, come vi dicevo, è molto impegnativo, per cui l'utilizzo di questi tre elementi che ci danno la possibilità di creare dei web components web components che possiamo creare utilizzando il primo elemento, quello dei custom elements, dal mio punto di vista condizione sine qua non per realizzare web components custom e le mense non sono altro che una classe che estende la classe html elementare e una classe script sei, quindi vuol dire che deve essere per forza definita con la parola chiave classe e non possiamo trasformarla magari usando web pack se non attraverso l'uso di particolari, perché appunto uno dei requisiti e' quello che debba essere una classe ma scripts e io quindici.
Chiamatelo come volete che estende come vi dicevo html elementi il fatto che estenda classe che si chiama elementi gli permetti di ereditare praticamente tutta l'addome piatto.
Quindi tutti te le funzionalità che permettono di interagire col don e tra l'altro una cosa molto interessante che attraverso il diesel all'interno della classe noi andiamo a interagire con il dogma della componente, quindi interno al componente.
Iniziamo quindi qua hai percepire un certo incapsulamento e questi componenti, come ci sarà capitato anche con vedendo.
Insomma il codice act o angolare o Wu hanno un ciclo di vita che inizia con la creazione, quindi il momento in cui noi andiamo a definire la ma il nostro custom elemento questo questa definizione viene fatta semplicemente chiamando dalla variabile globale custom.
Immenso il metodo del file che prende in ingresso il nome del tag che vogliamo creare questa famosa classe che implementa la logica.
Da questo momento in poi noi possiamo utilizzare all'interno della nostra pagina html questo taglio nuovo con i comportamenti che ne abbiamo definito comportamenti definiti appunto all'interno del corpo della nostra classe.
Abbiamo anche due metodi che sono delle col becco e ci permettono di attaccarci nel momento in cui il componente viene montato nel e nel momento in cui viene disconnesso, smontato avere questo ascoltatori questi colpi queste callback ci permettono quindi di per esempio quando viene montato scaricare delle risorse remote oppure fare il rendering.
Invece quando viene montato una cosa interessante che possiede quando viene smontato, una cosa interessante che possiamo fare è quello di per esempio, chiudere le connessioni db se lo usiamo oppure direttamente ammazzare degli aventi eventuali lissner che abbiamo creato un'altra cosa interessante la tribu' callback che il terzo o un quarto metodo perché ci anche il costruttore però è un ulteriore metodo che ci permette di osservare quando gli attributi, quindi i valori che noi mettiamo all'interno del nostro customer cambiano e quindi di reagire al comportamento.
Non tutti gli attributi vengono ascoltati di default, ma ne definiamo l'ascolto attraverso l'uso di un altro metodo che si chiama che ci permette appunto di definire quelli che sono gli attributi osservati.
Quindi con questo tipo di elementi noi abbiamo la possibilità di creare questo punto dei componenti e che hanno una loro logica all'interno.
Farlo è un pochino macchinoso, quindi oltre custom elemento abbiamo bisogno di un'altra serie di strumenti, per esempio uno che ci permetta un incapsulamento ancora più forte, strumento che si chiama shadow che cos'e' lasciando donna mia, mi piace immaginare lo shadow come un modo per contenere lo sporco.
Se per sporco intendiamo forzando un po' il concetto il codice html css no, che sono sempre un po' disordinato e direi anche palloso da definire utilizzando appunto le ha scritto.
Quindi esiste un modo per incapsulare il tutto all'interno di una scatoletta che non interferisce con gli elementi all'esterno io mi sul mio codice html, il mio css o la possibilità per esempio di incapsulare e anche degli eventi per darvi un'idea di che cos'è di cosa sia.
Mi viene da indicarvi il video il componente video player di html, quindi un componente nativo e se voi andate su ma esiste la possibilità di andare a ispezionare lo shadow magari vi metto due righe nelle note dell'episodio.
Se riesco, se voi attivate quella possibile quella quella funzione, avrete la possibilità di andare a esplorare sulla struttura degli elementi grafici di quel player.
Per esempio potrete andare a vedere che ne so il play battono come costruito piuttosto che il causa piuttosto che la.
Ed è molto interessante perché quando noi lo vediamo dalle dall'esterno noi percepiamo un unico componente, un unico elemento che è appunto il nostro video player html.
Ma all'interno ha una molteplicità di elementi appunto che vengono orchestrati e che agiscono in modo coordinato in modo nascosto.
Quindi tutto quel tipo di complessità viene appunto mimetizzata.
Non viene mostrato il terzo elemento terzo ed ultimo elemento che ci viene in aiuto.
Quando andiamo a definire il nostro web compone insulta utilizzando il customer, mentre lo shadow donne sole temple, come vi dicevo, è veramente palloso.
Doveva andare interagire col doma e andare a creare i divi in modo programmatico.
Per evitare questo esiste un tag si chiama il tag temple fight che permette di inserire al suo interno del codice html è scritto in modo dichiarativo, quindi esattamente come se stiate se se state descrivendo scrive non fu un classico file html.
Però il contenuto di questo tag non viene mostrato nella pagina, quindi non appare tra l'altro potete inserirci degli stili.
Potete per esempio inserire degli script che non vengono eseguiti all' esecuzione della pace.
Questa porzione di merda di mark up può essere gestito a questo punto javascript per andare a clonare questo codice, andarlo a mettere dentro lo sheldon.
In questo caso, quindi, ho la possibilità di definire del codice html in modo dichiarativo, quindi senza dover dare delle istruzioni per andare a disegnare le pagine, ma semplicemente descrivendo le col linguaggio html è in modo molto pratico questo codice.
Questi elementi vengono realizzati sulla pagina.
Devo dire che, come vi dicevo, l'utilizzo del web components è molto importante, specie perché da una parte ci permettono di condividere il codice trap team che magari utilizzano tecnologie fronte diverse.
Dall'altra ha un altro vantaggio nell'ambito del web components dei ambito che come dicevo, andremo a vedere la prossima settimana e possono avere l'utilità di incapsulare alcuni parti del fronte, magari scritte da tim specifici e urlando Questi blocchi di fronte tenda hanno la possibilità di non farli confliggere con altri e magari questi blocchi di fronte uno usa usare act più quindi creano degli elementi in qualche modo chiusi che non interferiscono tra di loro.
Che questa è, come dicevo, un altro vantaggio dell'utilizzo appunto dei web compone utilizzando le hai le standard e hai già scritto Questo è diciamo una Wu generale overview generale per la creazione dei web.
Compone ha già scritto.
Naturalmente devo dire che la trovo venendo dal mondo reale Act trovo la creazione di web compone script un po' verbosa è però devo anche dire che esistono tutta una serie di strumenti che ne semplificano la realizzazione.
Due I primi due che mi vengono in mente sono stencil creato dal famoso appunto per aver scritto un framework per per la realizzazione di web di applicazioni ibride.
Èlite Le Mans, costola del progetto sono delle librerie che è in qualche modo semplificano i passaggi per la creazione dei web compone utilizzando appunto le piaci dei customer, quindi creano una sorta di livello di astrazione che ne semplifica l'utilizzo.
Cosa però importante da sapere è che quindi esiste che ci permette di approcciare ai componenti web, per cui le nostre sono talmente moderne che in realtà potremmo anche fare a meno dei framework se li utilizziamo solo come vi dicevamo, all'apertura per la creazione di web components.
Occhio però che spesso il framework è la mettono a disposizione un'altra serie di strumenti, come dicevo prima, appunto routing e lo stato, ma ne mettono a disposizione diversi, quindi la scelta spetta a voi.
Spero che questo episodio vi sia piaciuto molto, molto rapido.
Fortunatamente sono riuscito a stare attorno ai venti minuti perche' ormai mi sembra il le puntate stavano diventando davvero la divina commedia, questo già mi fa piacere attrezzatura di fortuna quindi anche il montaggio non sarà perfetto.
Abbiate pietà di me ma come vi ho spiegato su twitter e gli ho detto nell'introduzione il mio macbook pro come tutti i campioni per il montaggio con tutti i paladini morto sto usando una quando la casa in sardegna e il microfono e' un microfono di fortuna rubato da amici e nulla quindi abbiate pazienza anche il prossimo episodio sara' un po' così diciamo arrangiato tra virgolette per poi arrivare a settembre spero con di nuovo il mio set up standard per gli comunque un'idea del web compone ce la siamo fatta.
Io vi do appuntamento alla prossima settimana, ma prima di salutarvi vedevo come sempre ricordare i nostri potete scrivermi a in oppure utilizzando twitter per prima tutti gli episodi con le note dell'episodio e le trascrizioni sempre se non e' esploso anche la landa che fa letta inscriptions li trovate su www bar punto eat.
Naturalmente se volete rimanere aggiornati con i nuovi episodi, il mio consiglio è quello di aprire il vostro cliente.
Tipo di Casper preferito è cercare il bar, cioè praticamente su tutti.
Basta digitare nella casellina di ricerca e iscrivervi in questo modo ogni settimana riceverete la notifica del nuovo e bisogno.
Se proprio proprio le puntate vi sono piaciute, aprite l'applicazione polpo casta o ai toons e lasciate una recensione.
Questo mi fa assolutamente piacere.
Soprattutto aiuta bar a salire tra virgolette nelle classifiche e quindi a essere più introvabile tra l'altro ci tengo a dirvi che bar e ho iscritto barra al festival del podcasting come un po' di casta emergente per cui anche in questo caso, se vi fa piacere, potete aprire Instagram è cercare festival del podcasting.
Scorrendo dovreste trovare il il post con l'uovo di bar mettete like così insomma, prendiamo un pochino più visibilità e la famiglia di Jade bar degli ascoltatori.
Digby Barra cresce, come vi dicevo o come obiettivo per settembre di creare un gruppo telegramma.
Quindi vi vorro' numerosi e nulla.
Io me ne vado in spiaggia.
Un abbraccio da Budoni e' tutto.
Ci sentiamo la prossima settimana.
Ciao.
Il circolo dei fusti Da una volta a settimana ci troviamo davanti a due birre e comprerebbe.
Parliamo di linguaggi e tecniche di sviluppo web, di metodologie e degli strumenti immancabili nella cassetta degli attrezzi di Foster domani, che era ancora il gioco del sex toy, stesse pensando di scappare e altri giorni uomo buon penn bastano prosegue dal avesse davvero lascia a specchio.
Buoni che dovreste.
È nato il giusto il fondo said the net cos'ha sentito qualche altra carne da Elisa come nuovo in un bar aggressione e il mio dosi da gora mai niente per L'america e il veneto sono troppo si nasce.
Non che considero gia' molto in prima base perche' non aerea e' cio' che vuoi? Si mai opposti da mai? Mai, ma mai a un d'amore per me no, era ancora il dottore di sempre nella storia.
Questo si esaurisca al per il proprio uomo, penso vasca.
Non sapevo questa mischia Linda avesse davvero lasciato e a specchio buoni che dovesse destro ed è nato il giusto.
Il fondo sai dove la cosa senza far casini da Harrison Tumore Invece no.
Mani, ma che era ancora il dottore.
Sei storie stesse insieme ad altri giorni.
Bob, Buon Penn.
Bastano prosegue dal avesse davvero lasciato e a specchio buoni che dovreste.
È nato il giusto il fondo said Cosa? Senza far casini Thorne da Iris.
Ho bisogno di una mano. Aiutami a rendere più conosciuto il nostro podcast. Parlane con gli amici o con i colleghi e iscriviti usando Apple Podast o Google Podcast. Questa tua azione ci aiuterà a salire nella classifica dei podcast di tecnologia ed essere utili anche a qualcun’altro. Se non ti va, amici come prima😄