Google Polymer - Hvordan det vil endre måten Web Apps er bygget

Sammen med Google Photos har Google også bygget Polymer fra bunnen av, og tar opp ytelsesforbedringer og effektivitet. Tenk på Polymer som en SDK (Software Development Kit) for Internett, en som gjør webapplikasjonsutvikling så mye raskere med en ny standard kalt Web Components.

Webkomponenter tillater oss å Lag egendefinerte elementer og koder for våre nettsteder. I dette innlegget vil vi se på hvordan de egendefinerte elementene i Google Polymer kan hjelpe til med å utvikle webapplikasjoner. I tillegg vil vi også se på noen få demoer om hvordan disse egendefinerte elementene kan settes i bruk.

Om webkomponenter

Den beste måten å forstå hvordan webkomponenter fungerer, er å se på dagens standardelementer som . Når vi legger til sammen med URL-kildene til lyden, vil nettlesere gjøre dette elementet som en lydspiller med avspillings- og pause-knappen, tidskinnen og volumreglaget. Noen gang lurer på hvordan spillerkontrollene er bygget og stylet?

UI-kontrollspilleren er skjult under som Shadow Roots, også kjent som Skygge DOM. Hvis du vil vise Shadow DOM, starter du Chrome DevTools > klikk på Cog ikon> velg Vis brukeragentskygge DOM alternativ.

I det følgende skjermbildet kan du finne en stabel med

og elementer som bygger brukergrensesnittet kontrollerer i hemmelighet.

I dag, med webkomponenter, kan vi også nevne våre egne elementer. Vi kan bygge et element som, å legge inn en Twitter-feed eller (kanskje) å legge inn et diagram.

Videre kan disse egendefinerte elementene også ha et par aksepterte egendefinerte attributter. Med hensyn til element, du angir et attributt som heter brukernavn som vil bli brukt til å spesifisere Twitter brukernavn.

Egendefinerte elementer i polymer

Polymer kommer med en rekke elementer som står for (nesten) alle webapplikasjoner behov. Google deler disse elementene i grupper: Jernelementer, Papirelementer, Google Webkomponenter, Gullelementer, Neonelementer, Platinumelementer og Molekyler.

1. Jernelementer

Jernelementer er en samling av grunnleggende elementer. Disse grunnleggende elementene er det vi vanligvis bruker til bygge en nettside for eksempel en inngang, skjema og bilde. Forskjellen er Polymer legger til noen ekstra krefter til disse elementene.

Alle elementene i denne gruppen er jern- prefiks, for eksempel , som brukes til å vise et bilde. De elementet har blitt utstyrt med noen ekstra attributter som vi ikke kan bruke i det vanlige element. Vi kan for eksempel legge til forspenning, falme, og plassholder egenskaper:

Eksempelet ovenfor viser først bildeplassholderen og fades deretter inn i selve bildet i src som det er fullt lastet, utfører en jevn bildepåvirkning.

2. Papirelementer

De Papirelementer er en gruppe av Material Design elementer. Material Design er Google design språk for å gjøre brukergrensesnitt og erfaring på tvers av Google-plattformer, både web- og Android-appene er mer visuelt konsistente. Noen elementer som er unike for Material Design er Paper and Floating Action Button (FAB).

Papir

Papir er Googles metafor for mediet som ligger til grunn for innholdet. For å legge til et papir med Polymer bruker vi element. Dette elementet tar 2 attributter:

høyde å løfte papiret, og dermed legge til en skygge for å forsterke høyden
animert vil bruke animasjon som endring av papirhøyde.

Flytende handlingsknapp (FAB)

Den flytende handlingsknappen (FAB) er en sirkulær knapp med et ikon som flyter på skjermen, vanligvis med en stand-out-farge. Google foreslår at denne knappen har en ofte tilgjengelig funksjon. Her er et eksempel:

Følgende kodestykke legger til et papirmateriale med et bilde og en FAB.

Vi får følgende resultat:

Vi har et bilde med a “hjerte” knappen flyter på toppen av den. Klikk på for å Liker bildet, da knappen gir en krusningseffekt for å bekrefte klikket.

Se papirdemonoen

3. Google Webkomponenter

Google Web-komponentene er spesielle elementer som håndterer Google APIs og tjenester som Google Maps, Youtube, samt Google Feed, for å nevne noen. Elementer i denne gruppen gjør samhandling med Googles tjenester bare noen få linjer unna.

Følgende er et eksempel for å vise et Google Map ved hjelp av element.

  Dette er Googleplex

Som du kan over, er det elementet tar breddegrad og lengdegrad å spesifisere plasseringen på kartet. Vi kan også rede for å vise en kartmarkør for den plasseringen sammen med en tekst som vil vises ved å klikke på markøren.

Se kartdemoen

Vil du vise en Youtube-video? du kan bruke element.

På samme måte tilpasser vi utdataene gjennom attributter.

Se Youtube-demoen

4. Gullelementer

Gullelementene er elementer designet spesielt for e-handelsapps. Her finner du element for å vise kredittkort, e-post, telefon og ZIP-inngang som alle har blitt utstyrt med format validering for å sikre korrekt datainngang og sikkerhet. Her er et eksempel for å legge til Visa-kredittkortinngang.

5. Andre elementer

De gjenværende elementene inkluderer Neon-elementer for animasjon og spesialeffekter, Platinum-elementer for offline og push notifications og til slutt Molekyler, wrappers for tredjepartsbiblioteker.

Redaktørens merknad: På tidspunktet for denne skrivingen er Neon Elements, Platinum Elements og Molecules fortsatt ikke tilgjengelig.

Integrerende polymer

Vil du bruke Polymer i din webutvikling? Slik installerer du og integrerer den i websidene dine. Som de fleste polymerelementer stole på hverandre, er den beste måten å installere Polymer på, gjennom Bower.

Bower er en prosjektberegner som gjør det enklere å installere skript eller stiler som kreves for å kjøre prosjektet. Ta en titt på vårt tidligere innlegg om hvordan du installerer, oppdaterer og fjerner webbibliotek med Bower.

For å integrere Polymer, start Terminal, og naviger deretter til prosjektkatalogen din, forutsatt at du har opprettet en. Kjør deretter bower init beordre å starte bower.json-filen i prosjektet ditt som vil bli brukt til å registrere prosjektets avhengigheter. Åpne bower.json og legg til følgende linjer.

 "avhengigheter": "polymer": "Polymer / polymer # ^ 1.0.0", "google-webkomponenter": "GoogleWebComponents / google-webkomponenter # ^ 1.0.0", "jernelementer": " PolymerElements / jernelementer # ^ 1.0.0 "," papirelementer ":" PolymerElements / paper-elements # ^ 1.0.0 "," gullelementer ":" PolymerElements / gold-elements # ^ 1.0.0 "

Dette oppsettet forutsetter at vi skal bruke alle elementene fra hver gruppe. Du kan fjerne det du ikke trenger fra avhengighetslisten. Som avhengighetene er satt, kjør bower installasjon kommandoen for å installere avhengighetene på listen.

Denne prosessen kan ta en stund da det innebærer å ta en stor mengde filer fra lagrene. Når du er ferdig, bør du finne dem lagret i bower_components mappe.

Åpne HTML-filen du vil bruke Polymer-komponentene i. Innen i dokumenthodet, lenke WebComponents.js hvilken er den polyfill for nettlesere som ikke støtter WebComponents ennå, og importer komponentfilene ved hjelp av HTML Import.

Her er et eksempel:

Dette oppsettet gjør det mulig for oss å bruke , , elementer.

Utstilling

Her er noen av webappene som allerede bruker Google Polymer.

Google

Google brukte Google Polymer på Google IO 2015 websiden; Google Fi, Googles trådløse tjeneste for operatører og leverandører i partnerskap og Google Musikk.

Egendefinerte elementer

CustomElements er et knutepunkt hvor du kan finne egendefinerte elementer bygget med webkomponenter. Den bruker papirelementet til å inneholde og bygge listen. Det gir også en praktisk rute for å installere disse elementene gjennom Bower og NPM.

Chrome Dev Editor

Et Chrome-program for kodedigering som fungerer overraskende bra. Denne appen bruker FAB-knappen, Papirmenyen og Papirdialogelementene i brukergrensesnittet.

Polymer Designer

Et verktøy for å bygge webapplikasjon med polymerelementer ved hjelp av et dra-og-slipp-grensesnitt.

Daglig varselprognose

En børsrapport og prognose bygget helt med polymerelementer.

Polymer Mail

En e-postklientapp for Gmail. Det ser fint og flytende ut, men det er dessverre ikke fullt fungerende.

Siste tanker

Polymer har et enormt omfang, og det kan ta deg en stund å bli vant til alle de egendefinerte elementene, så vel som API-en. Ikke desto mindre vil Web Components og Polymer sikkert påvirke måten vi bygger webapplikasjoner på. Hold deg foran publikum ved å lese mer om webkomponenter - referanser finnes nedenfor.

Se demo
Last ned kilde

Nyttige referanser

Statens webkomponenter
En detaljert introduksjon til egendefinerte elementer
Offisiell blogg av Google Polymer