Google Polymer come cambierà il modo in cui sono state create le app Web

e elementi che costruiscono i controlli del lettore UI in segreto.

Oggi, con Web Components, possiamo anche nominare i nostri stessi elementi. Possiamo costruire un elemento come, incorporare un feed Twitter o (forse) incorporare un grafico.

Inoltre, questi elementi personalizzati possono avere anche un paio di attributi personalizzati accettati. Per quanto riguarda il elemento, si imposta un attributo chiamato nome utente che verrà utilizzato per specificare il nome utente di Twitter.

Elementi personalizzati in polimero

Polymer viene fornito con una serie di elementi che rappresentano (quasi) ogni esigenza di applicazione web. Google divide questi elementi in gruppi: elementi in ferro, elementi in carta, componenti Web di Google, elementi in oro, elementi al neon, elementi in platino e molecole.

1. Elementi in ferro

Iron Elements è una raccolta di elementi di base. Questi elementi di base sono ciò che normalmente usiamo costruire una pagina web come un input, una forma e un'immagine. La differenza è che Polymer aggiunge alcuni poteri in più a questi elementi.

Tutti gli elementi in questo gruppo sono ferro- prefisso, per esempio , che viene utilizzato per visualizzare un'immagine. Il elemento è stato dotato di alcuni attributi extra che non possiamo applicare nel normale elemento. Possiamo, per esempio, aggiungere precarico, dissolvenza, e segnaposto attributi:

L'esempio sopra mostrerà prima il segnaposto dell'immagine e poi si dissolverà nell'immagine reale nel src come è completamente caricato, eseguire un effetto di caricamento dell'immagine uniforme.

2. Elementi di carta

Il Elementi di carta è un gruppo di elementi di Material Design. Material Design è il linguaggio di progettazione di Google per rendere l'interfaccia utente e l'esperienza su tutte le piattaforme Google sia le app Web che quelle Android più visivamente coerenti. Alcuni elementi esclusivi di Material design sono Paper and Floating Action Button (FAB).

Carta

Carta è la metafora di Google per il mezzo che sta alla base del contenuto. Per aggiungere una carta con Polymer, usiamo il elemento. Questo elemento accetta 2 attributi:

• elevazione per sollevare la carta, quindi aggiungere un'ombra per rinforzare l'elevazione
• animato applicherà l'animazione come modifica dell'elevazione della carta.

Floating Action Button (FAB)

Il Floating Action Button (FAB) è un pulsante circolare con un'icona, che galleggia sullo schermo, di solito con un colore di rilievo. Google suggerisce che questo pulsante abbia una funzione di accesso frequente. Ecco un esempio:

Il seguente frammento di codice aggiunge un materiale cartaceo con un'immagine e un FAB.

Avremo il seguente risultato:

Abbiamo una foto con a “cuore” pulsante che galleggia sopra di esso. Fare clic su Mi piace la foto, e il pulsante emette un effetto a catena per riconoscere il clic.

• Visualizza la demo della carta

3. Componenti Web di Google

I componenti web di Google sono elementi speciali che gestiscono le API di Google e servizi come Google Maps, Youtube e Google Feed, solo per citarne alcuni. Elementi in questo gruppo interagire con i servizi Google a poche righe di distanza.

Quello che segue è un esempio per mostrare una mappa di Google usando il elemento.

  Questo è Googleplex  

Come puoi sopra, il elemento prende il latitudine e longitudine per specificare la posizione sulla mappa. Possiamo anche nidificare per mostrare un indicatore di mappa di quella posizione insieme a un testo che apparirà facendo clic sul marcatore.

• Visualizza la demo della mappa

Vuoi mostrare un video di Youtube? puoi usare il elemento.

Allo stesso modo personalizziamo l'output attraverso gli attributi.

• Guarda la demo di Youtube

4. Elementi in oro

Gli elementi d'oro sono il elementi progettati specificamente per le app di e-commerce. Qui troverai l'elemento per mostrare la carta di credito, l'email, il telefono e l'input ZIP di cui tutti sono stati equipaggiati convalida del formato per garantire il corretto inserimento e sicurezza dei dati. Ecco un esempio per aggiungere l'input della carta di credito Visa.

5. Altri elementi

Gli elementi rimanenti includono elementi Neon per animazioni ed effetti speciali, elementi Platinum per notifiche offline e push e infine Molecole, wrapper per librerie di terze parti.

Nota dell'editore: Al momento della stesura di questo libro, Neon Elements, Platinum Elements e Molecules non sono ancora disponibili.

Polimero integrato

Vuoi usare Polymer nel tuo sviluppo web? Ecco come installarlo e integrarlo nelle tue pagine web. Poiché la maggior parte degli elementi polimerici si basano l'uno sull'altro, il modo migliore per installare Polymer è attraverso Bower.

Bower è un gestore delle dipendenze del progetto che semplifica l'installazione di script o stili richiesti per eseguire il progetto. Dai un'occhiata al nostro post precedente su come installare, aggiornare e rimuovere facilmente le librerie web con Bower.

Per integrare Polymer, avviare Terminal quindi navigare nella directory del progetto, assumendo che ne sia stata creata una. Quindi corri bower init comando per avviare il file bower.json nel progetto che verrà utilizzato per registrare le dipendenze del progetto. Apri bower.json e aggiungi le seguenti linee.

 "dipendenze": "polymer": "Polymer / polymer # ^ 1.0.0", "google-web-components": "GoogleWebComponents / google-web-components # ^ 1.0.0", "iron-elements": " PolymerElements / iron-elements # ^ 1.0.0 "," paper-elements ":" PolymerElements / paper-elements # ^ 1.0.0 "," gold-elements ":" PolymerElements / gold-elements # ^ 1.0.0 " 

Questa configurazione presuppone che useremo tutti gli elementi di ciascun gruppo. È possibile rimuovere ciò che non è necessario dall'elenco delle dipendenze. Quando le dipendenze sono impostate, eseguire il installazione di bower comando per installare le dipendenze dalla lista.

Questo processo potrebbe richiedere del tempo poiché implica l'acquisizione di una grande quantità di file dai repository. Una volta fatto, dovresti trovarli salvati in bower_components cartella.

Aprire il file HTML in cui si desidera utilizzare i componenti Polymer. All'interno del capo del documento, collega il WebComponents.js qual è polyfill per i browser che non supportano ancora WebComponents e importa i file del componente usando l'importazione HTML.

Ecco un esempio:

Questa configurazione ci consentirà di utilizzare il , , elementi.

vetrine

Ecco alcune delle app Web che stanno già utilizzando Google Polymer.

Google

Google ha utilizzato Google Polymer nella pagina web di Google IO 2015; Google Fi, il servizio wireless di Google per operatori e venditori in partnership; e Google Music.

Elementi personalizzati

CustomElements è un hub in cui puoi trovare elementi personalizzati creati con Web Components. Usa l'elemento Carta per contenere e costruire l'elenco. Fornisce anche un percorso conveniente per installare questi elementi tramite Bower e NPM.

Chrome Dev Editor

Un'applicazione Chrome per la modifica del codice che funziona sorprendentemente bene. Questa app utilizza il pulsante FAB, il menu Carta e gli elementi di dialogo Carta nell'interfaccia utente.

Designer di polimeri

Uno strumento per creare applicazioni Web con elementi Polymer mediante un'interfaccia drag-and-drop.

Previsione delle scorte giornaliera

Un rapporto di borsa e previsioni costruito interamente con elementi Polymer.

Polymer Mail

Un'app client di posta elettronica per Gmail. Sembra bello e fluido, anche se purtroppo non funziona completamente.

Pensieri finali

Polymer ha un'enorme portata e potrebbe richiedere un po 'di tempo per abituarsi a tutti gli elementi personalizzati e alle relative API. Ciononostante, Web Components e Polymer influenzeranno sicuramente il modo in cui creiamo applicazioni web. Mantieni il passo con la folla leggendo di più su Web Components: i riferimenti si trovano di seguito.

• Visualizza la demo
• Scarica fonte

Riferimenti utili

• Lo stato dei componenti Web
• Un'introduzione dettagliata agli elementi personalizzati
• Blog ufficiale di Google Polymer