Share
Al momento i componenti Web vengono discussi con entusiasmo come un imminente "spostamento tettonico per lo sviluppo web" con la promessa di rimodellare permanentemente il panorama del web design. Grandi attori stanno andando avanti per portare i componenti web in realtà. Sia Google che Mozilla stanno già gradualmente implementando il supporto nativo per i browser.
Quali sono le componenti web che chiedi? In poche parole, i componenti web ti offrono un modo per creare i tuoi elementi HTML personalizzati che possono fare qualsiasi cosa tu abbia bisogno di loro. Invece di caricare i tuoi siti con markup dettagliato, script lunghi e codice ripetitivo, avvolgi tutto in piccoli elementi HTML personalizzati.
Il modo più semplice per capire in che modo i componenti Web consentono elementi HTML personalizzati è quello di esaminare prima un elemento esistente che già conosciamo da HTML5: il etichetta. Usando questo elemento puoi inserire un video con solo poche righe di codice, ad esempio:
Potresti vedere solo alcune righe di HTML sopra, ma ecco cosa sono l'elemento sembra davvero dietro le quinte:
Per impostazione predefinita, il browser nasconde tutto quel codice dettagliato in modo che non sia necessario vederlo o preoccuparsi di scriverlo quando si desidera posizionare un video. Ti colpisci nel tuo e
In precedenza, solo i fornitori di browser potevano creare elementi in questo modo. Ma immagina se potresti usare lo stesso approccio tu stesso con altri tipi di contenuti?
Prendi una presentazione di immagini per esempio. In genere, sono necessari alcuni cicli di div nidificati con nomi di classi specifici per gestire l'avvolgimento della presentazione, il wrapping di ogni diapositiva e l'aggiunta di didascalie e miniature. Dovresti inoltre impostare qualsiasi opzione di presentazione generale per elementi come gli effetti di transizione delle diapositive tramite jQuery / JavaScript in linea.
Cosa succede se si salta tutto ciò e invece si usa solo:
Con i componenti web, è esattamente ciò che puoi fare.
Se vuoi fornire un modo conciso, facile da interagire con il metodo di inserire contenuti che altrimenti sarebbero gonfiati e ingombranti, puoi andare avanti e creare il tuo componente web.
I componenti Web possono anche essere facilmente condivisi, così come gli sviluppatori prendono a bordo c'è una buona scommessa che sarete in grado di afferrare un componente Web predefinito per i requisiti di progetto più comuni. Stiamo già vedendo la comparsa di componenti liberamente condivisi per qualsiasi cosa, dal riconoscimento vocale ...
ai costruttori di presentazione ...
alla generazione del codice QR.
Diamo un'occhiata a cosa c'è dietro la cortina dei componenti web.
I componenti Web, così come sono al momento, sono composti da quattro parti:
Gli elementi personalizzati sono esattamente ciò che suonano: elementi che possono essere nominati come qualsiasi cosa tu scelga e che funzionano in qualsiasi modo tu voglia. E quando dico qualsiasi cosa, lo intendo davvero. Ad esempio, presento il
Demo dal vivo - passa il mouse sopra la barraGli elementi personalizzati sono dichiarati, nella loro forma più semplice, in questo modo:
...
Quando crei un elemento personalizzato puoi farlo completamente da zero o estendere un elemento HTML esistente, come ad esempio per esempio, e dargli la funzionalità modificata o la presentazione che ti serve.
...
Nota: vale la pena sottolineare che il
Shadow DOM è davvero l'aspetto principale di come funzionano i componenti web. In precedenza, abbiamo esaminato l'HTML5 elemento e ha mostrato come, nonostante si vedano solo poche righe di codice, in realtà c'è un bel po 'di codice nascosto per impostazione predefinita. Il luogo in cui vive questo codice nascosto è chiamato "Shadow DOM".
I produttori di browser hanno utilizzato questo DOM ombra per anni per implementare in modo nativo elementi come input, audio, video e così via. Attraverso i componenti web ora può essere utilizzato da qualsiasi sviluppatore.
L'idea generale è quella di prendere tutto il codice che non ha realmente bisogno di essere visto durante il posizionamento del markup e oscurarlo nel DOM Shadow in modo che non interferisca con il modo. Questo ti lascia solo avere a che fare con le informazioni pertinenti, ad esempio l'altezza, la larghezza e le posizioni dei file di origine quando usi il elemento.
Una delle cose più interessanti del lavoro con Shadow DOM è che ogni istanza è il suo piccolo mondo autonomo. Quindi, se hai stili e script all'interno dell'elemento, questi non perderanno per sbaglio e avranno effetto su qualsiasi altra cosa sulla pagina.
Al contrario, CSS e JavaScript altrove nella pagina non avranno effetto sul componente Web, ad eccezione dei hook di stile che potresti creare appositamente per consentire il targeting CSS esterno. Tutto ciò non significa più preoccuparsi dei nomi dei nomi di ID e classi per evitare conflitti.
Se vuoi vedere come appare l'ombra DOM, è facile. Assicurati di eseguire un'installazione aggiornata di Chrome, apri Dev Tools, fai clic sull'icona a forma di ingranaggio per aprire le impostazioni e seleziona la casella con l'etichetta Mostra DOM ombra agente utente:
Quindi quando ispezionerai qualsiasi elemento con un DOM ombra vedrai il suo codice completo. Provalo ispezionando il
Per un rundown completo sul DOM ombra, controlla: Introduzione a DOM ombra
Abbiamo già spiegato in che modo gli elementi personalizzati consentono di focalizzare solo le informazioni pertinenti mentre tutto il codice rimanente è oscurato nel DOM ombra. Un modello all'interno di un componente Web è ciò che contiene tutti gli elementi di presentazione di quel codice rimanente.
Come parte del codice che definisce il componente web i tag ... sono posizionati e tra questi tag è incluso qualsiasi HTML e CSS di cui il componente ha bisogno.
Ad esempio, dai un'occhiata al codice che ha creato il file il tag è sulla linea 4 e la sua chiusura il tag è sulla linea 201. Tra questi tag vedrai tutti i CSS responsabili della creazione del posizionamento e dell'animazione e l'HTML che colloca ciascuna delle immagini coinvolte.
Le importazioni HTML ti consentono di prendere tutto quanto sopra descritto e farlo funzionare effettivamente sulla tua pagina. I componenti Web sono definiti all'interno di un file HTML esterno, in modo che il file debba essere importato affinché funzioni un elemento personalizzato. Le importazioni HTML gestiscono questo tramite a tag, che avrai familiarità con l'importazione di file CSS esterni.
Ad esempio, prima di poter utilizzare il
Le possibilità offerte dai componenti web rendono l'idea della testa subacquea prima di utilizzarle molto attraente, tuttavia al momento il supporto del browser non è ancora praticabile. Lo stato attuale del supporto è simile a questo:
http://jonrimmer.github.io/are-we-componentized-yet/Il supporto nativo è in fase di implementazione per Chrome, Opera e Firefox ma non è ancora completo. IE e Safari non hanno ancora reso noti i loro piani, tuttavia si ritiene che dato che la maggior parte dei browser supporterà i componenti Web in definitiva, gli altri browser probabilmente seguiranno l'esempio.
In questo momento, se vuoi iniziare a lavorare con i componenti web, devi utilizzare uno dei polifibri disponibili. La buona notizia è che due delle soluzioni più popolari sono state create da Google e Mozilla, quindi possiamo aspettarci di vedere una certa coerenza con il modo in cui il supporto nativo alla fine funzionerà.
È difficile non inclinarsi all'utilizzo di Polymer dato che Chrome è ora il browser più utilizzato e si potrebbe presumere che durante lo sviluppo verrà preso in considerazione il modo in cui il codice del componente Web verrà indicizzato da Google.
Polymer viene fornito con una libreria completa di componenti Web predefiniti. Comprende gli "elementi core del polimero" che sono orientati dal punto di vista funzionale e gli "elementi della carta" che sono orientati al design.
Quando si creano elementi personalizzati con Polymer, invece di utilizzare il formato
Polymer si descrive come in "anteprima di sviluppatore" piuttosto che in fase di produzione, tuttavia dicono anche
... nonostante l'etichetta, molte persone hanno già avuto successo usando Polymer in produzione.
Se hai bisogno di provvedere a IE9, che si stima detenga intorno all'1,9% al 5,11% della quota di mercato, sfortunatamente sei sfortunato con Polymer. Tuttavia, puoi comunque utilizzare gli X-Tags di Mozilla.
X-Tags è una libreria JavaScript creata da Mozilla che, attualmente, ha un vantaggio su Polymer in quanto il supporto del browser è più ampio. Se questa è una considerazione importante per te, X-Tags potrebbe essere la tua preferenza.
Al momento, se hai bisogno di supportare IE8, sfortunatamente i componenti web non saranno probabilmente per te dato che i polyfills disponibili supportano IE9 +. Le stime indicano che gli utenti di IE8 sono compresi tra il 2,1% e il 3,82%, ma ovviamente se le tue statistiche dicono in modo diverso dovrai fare una valutazione su quanto il supporto del tuo browser dovrebbe allungarsi.
Un modo possibile per prepararti a passare all'utilizzo dei componenti Web è lavorare con Ember.js o AngularJS per il momento. Entrambi hanno i propri sistemi di creazione di componenti e promettono entrambe di passare all'utilizzo del codice del componente Web nativo quando diventa pienamente disponibile.
Spero vi sia piaciuto leggere questo resoconto di quali componenti web sono e perché dovreste preoccuparvi! Ci sono molte altre cose da approfondire, ma con questi fondamentali trattati, abbiamo molte opportunità per i tutorial su come costruire effettivamente componenti web personalizzati. Cosa pensi? In quali circostanze potresti vedere te stesso che li usa?
Accentsconagua