Share
Nota dell'editore: Questo articolo è stato aggiornato per rimuovere i riferimenti ai componenti deprecati, in particolare polymer-ajax, che è stato sostituito da core-ajax. Grazie a Rob Dodson, sviluppatore avvocato presso Google, per il feedback.
Costruire applicazioni web moderne richiede molti strumenti. Ciò include preprocessori, framework JavaScript, strumenti di test e molto altro ancora. E con l'aumentare della complessità di queste app, aumenta anche l'ampiezza degli strumenti e dei servizi necessari per gestirli. Non sarebbe bello se alcune cose fossero semplificate?
I componenti Web mirano a risolvere alcune di queste complessità fornendo un modo unificato per creare nuovi elementi che racchiudano funzionalità avanzate senza la necessità di tutte le librerie aggiuntive. I componenti Web sono composti da quattro diverse specifiche (Elementi personalizzati, Modelli, DOM ombra e importazioni HTML) che vengono spiegate nel W3C.
Per colmare il divario e offrire agli sviluppatori l'accesso a questa ricca funzionalità ora, Google ha creato la libreria Polymer che funge da set di polyfill per portare la promessa di Web Components a te oggi. Immergiamoci un po 'più a fondo.
Come ho già detto, la libreria Polymer è un set di polyfill che ti aiuta a creare Web Components su tutti i principali browser moderni. Fornisce il framework per la definizione, la creazione e il rendering di complessi elementi personalizzati in modo semplicistico simile ai tag con cui sei cresciuto. Ciò che intendo con questo, è che aiuta a semplificare il modo in cui usiamo componenti complessi:
Ma la cosa importante da ricordare è che lo stesso framework è sviluppato sulla base delle specifiche individuali che sono state controllate dal W3C, fornendo così una base che dovrebbe evolvere con la direzione del corpo principale degli standard..
Ciò che questa libreria può fare, ci consente di creare componenti riutilizzabili che funzionano come veri elementi DOM, contribuendo a ridurre al minimo la nostra dipendenza da JavaScript per eseguire complesse manipolazioni DOM per il rendering di ricchi risultati dell'interfaccia utente.
Ecco un rapido esempio dal sito Polymer. Diciamo che volevo rendere un orologio funzionante sulla mia pagina. Questo in genere implica un codice JavaScript pesante da fare, ma usando Polymer, posso semplicemente usare la seguente sintassi:
Sembra la sintassi dei tag HTML con cui siamo cresciuti ed è molto più facile da implementare, leggere e gestire rispetto a qualche codice JavaScript complesso. E il risultato finale assomiglia a questo:
E dato che è un elemento normale nel DOM, puoi anche ridimensionarlo usando CSS in questo modo:
Accentsconagua
clock-polimero larghezza: 320px; altezza: 320 px; display: blocco in linea; background: url ("... /assets/glass.png") no-repeat; dimensione di sfondo: copertina; border: 4px solid rgba (32, 32, 32, 0,3); Non è certamente l'orologio più carino, ma non è questo il punto. Il fatto è che puoi personalizzare il componente a tuo piacimento e quindi riutilizzarlo tramite una sintassi più semplice e più manutenibile.
Esistono tre modi per installare e utilizzare Polymer:
Dei tre, il modo più semplice e consigliato è usare Bower perché non solo è incredibilmente facile da fare, ma Bower gestisce anche tutte le dipendenze che Polymer potrebbe avere. Ciò significa che se scegli di installare uno specifico elemento dell'interfaccia utente che ha una dipendenza da un altro, Bower può gestirlo per te.
Bower è installato come Node Packaged Module, quindi dovrai installare Node.js. Dalla riga di comando, digitare quanto segue:
npm install -g bower
Questo dovrebbe estrarre Bower dal registro di NPM e installarlo in modo che sia globalmente disponibile per te. Da lì, le successive installazioni di Bower assumono il seguente formato:
installazione di bower
Come minimo, dovrai installare la piattaforma e i componenti principali di Polymer poiché forniscono le basi per la creazione e l'esecuzione degli elementi del cliente.
bower install --save Polymer / platform bower install --save Polimero / polimero
Puoi scorciatoia digitando:
bower install --save Polymer / platform Polymer / polymer
Polymer ha anche un ricco set di elementi predefiniti che puoi iniziare a sfruttare immediatamente. Sono costituiti da elementi di interfaccia utente e non basati sull'interfaccia utente che forniscono funzionalità quali:
E questo è solo raschiando la superficie. C'è già molto in là con il codice sorgente completo disponibile per fungere da strumento di apprendimento, oltre a permetterti di personalizzare le capacità in base alle tue esigenze.
Hai una scelta su come installare questi componenti. È possibile installare tutto o solo quelli che si desidera utilizzare. Per installare tutto, digita:
bower install Polymer / core-elements bower install Polymer / polymer-ui-elements
Questo è l'approccio del lavello della cucina e quando inizi a imparare Polymer, è probabilmente più facile farlo, per aiutarti a capire cosa è disponibile.
Una volta acquisita familiarità con il framework, puoi selezionare i singoli componenti che desideri utilizzare e installarli in questo modo:
bower install Polymer / polymer-ui-accordion
Questa è la bellezza dell'uso di Bower. Ogni componente viene fornito con a bower.json file di configurazione che delinea le sue dipendenze. Quindi se stavi installando il fisarmonica componente, guardando la configurazione, possiamo vedere che ha dipendenze sul principale polimero componente così come il selettore e collassabile componenti.
"name": "polymer-ui-accordion", "private": true, "dependencies": "polymer": "Polymer / polymer # 0.2.0", "polymer-selector": "Polimero / selettore di polimero # 0.2.0 "," polymer-ui-collapsible ":" Polimero / polimero-ui-comprimibile # 0.2.0 "," versione ":" 0.2.0 "
La cosa fondamentale è che non devi preoccuparti di ciò perché Bower lo gestisce per te. Questo è il motivo per cui è lo strumento preferito per l'installazione di Polymer.
L'installazione tramite Bower creerà una cartella chiamata bower_components nella cartella del tuo progetto contiene tutto ciò di cui Polymer ha bisogno.
Il sito Polymer praticamente inchioda la descrizione di elementi personalizzati:
"Gli elementi personalizzati sono gli elementi costitutivi fondamentali delle applicazioni basate su polimeri. Puoi creare applicazioni assemblando elementi personalizzati insieme, sia quelli forniti da Polymer, quelli creati da te, sia quelli di terze parti. "
Polymer ci dà la possibilità di creare da zero i nostri elementi personalizzati e riutilizzare anche altri elementi per estendere quelli personalizzati. Questo viene fatto creando prima un modello dell'elemento personalizzato. Per tutti gli effetti, questo modello è una combinazione di HTML, CSS e JavaScript e include la funzionalità che sarà disponibile quando si utilizza l'elemento. Si basa sulla specifica dei modelli HTML di WhatWG che ha lo scopo di fornire il supporto nativo per i modelli sul lato client.
Diamo un'occhiata a questo semplice esempio di un modello di polimero:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Questo elemento ti consente di aggiungere facilmente il testo di Lorem Ipsum al tuo codice semplicemente usando il seguente tag:
La prima cosa che deve essere inclusa è il core Polymer, che è l'API principale che consente di definire gli elementi personalizzati:
Il prossimo passo è definire il nome del nuovo elemento usando Polymer's polimero elemento direttiva:
In questo caso, ho chiamato il mio nuovo elemento lorem elemento. Il nome è un attributo obbligatorio e deve contenere un trattino ("-").
Da lì usiamo il modello direttiva per avvolgere i tag e il codice del corpo principale che costituiranno il nostro nuovo elemento. Per questo semplice esempio, prendo il testo di Lorem Ipsum e lo avvolgo con i tag di paragrafo.
Questo è tutto! Il mio elemento personalizzato è finito e ora posso usarlo.
Tieni presente che questo componente verrà importato in altre pagine della tua app Web che potrebbero voler sfruttarlo. Ciò è possibile a causa dell'implementazione di Polymer della specifica Imports HTML che consente di includere e riutilizzare documenti HTML in altri documenti HTML.
In primo luogo, è necessario includere platform.js che fornisce il polyfill che imita le API native:
Successivamente, dobbiamo importare il nostro elemento personalizzato nella nostra pagina web:
Una volta che hai fatto questo, il tuo nuovo elemento personalizzato è ora disponibile permettendoti di fare qualcosa del genere:
Hai anche la capacità di modellare completamente l'elemento:
Questo è un esempio piuttosto semplice. Facciamo un ulteriore passo avanti.
Se ricordi, ho menzionato come puoi sfruttare gli elementi esistenti per migliorare quello personalizzato. Diamo un'occhiata a un esempio di questo.
Supponiamo che volessi avere un elemento che è uscito su Reddit e ho preso i dati da uno dei subreddit. Potrei sfruttare il componente Ajax esistente di Polymer includendolo nel mio elemento personalizzato come questo:
Resp.data.public_description
Si noti che sto importando il componente Polymer Ajax e poi lo faccio cadere nel mio modello. Ora è facile fare riferimento al mio nuovo elemento che fa richiamare XHR i dati JSON e inserirli nei miei tag di paragrafo con la descrizione pubblica di subreddit:
"Cose che ti fanno andare AWW! Come i cuccioli E coniglietti ... e così via ... Un posto per foto, video e storie davvero carini! "
La risposta viene restituita e Polymer stabilisce un collegamento dati bidirezionale che mi consente di essere in grado di utilizzare i dati avvolgendoli in doppie parentesi graffe come questa Resp.data.public_description.
Questo è bello, ma nella maggior parte dei casi, non stiamo andando a hardcode un URL per una risorsa specifica. Espandiamolo ulteriormente aggiungendo attributi al nostro elemento personalizzato. Fare questo è incredibilmente semplice. Innanzitutto, è necessario aggiornare il polimero elemento direttiva per riflettere gli attributi che vuoi per il tuo elemento personalizzato:
In questo caso, voglio essere in grado di passare un subreddit al mio elemento e farlo ritirare i dati in base a ciò. Ora posso cambiare la chiamata a polimero-ajax come questo:
Si noti come sto utilizzando le capacità di associazione dei dati di Polymer per creare dinamicamente l'URL in base al valore dell'attributo di Subreddit. Ora, posso aggiornare il mio riferimento al mio elemento personalizzato per passare il subreddit che voglio:
L'ultima cosa che voglio fare è assicurarsi che ci sia un valore predefinito per il mio attributo, quindi il mio codice non esploderà. Lo faccio aggiungendo quanto segue nel mio modello di elemento:
Ciò garantisce che avrò sempre un valore predefinito per l'attributo pubblico del mio elemento. Ecco come appare il codice finale:
Resp.data.public_description
E c'è ancora un po 'di cose da fare, tra cui l'aggiunta di gestori di callback personalizzati, la gestione di eventi, l'impostazione di Mutation Observers per elaborare le modifiche al DOM e molto altro.
I componenti Web cambieranno il modo in cui costruiamo le app Web e Polymer ci sta portando questo oggi. Ora hai la possibilità di creare i tuoi componenti personalizzati e manutenibili che possono essere adattati alle esigenze specifiche della tua applicazione. Questi componenti possono essere condivisi facilmente consentendo ad altri team o alla comunità di condividere facilmente e trarre vantaggio da questi elementi costitutivi incapsulati.
