Share
Redaktører Merknad: Denne artikkelen ble oppdatert for å fjerne referanser til utdaterte komponenter, spesielt polymer-ajax, som siden har blitt erstattet av kjerne-ajax. Takk til Rob Dodson, utvikler fortaler på Google, for tilbakemelding.
Å bygge moderne webapplikasjoner krever mye verktøy. Dette inkluderer preprosessorer, JavaScript-rammer, testverktøy og mye mer. Og ettersom kompleksiteten til disse appene øker, gjør det også bredden av verktøy og tjenester som trengs for å håndtere dem. Ville det ikke vært bra om noen ting ble forenklet?
Webkomponenter tar sikte på å løse noen av disse kompleksitetene ved å gi en enhetlig måte å lage nye elementer som omfatter rik funksjonalitet uten behov for alle de ekstra bibliotekene. Webkomponenter består av fire forskjellige spesifikasjoner (Egendefinerte Elementer, Maler, Skygge DOM og HTML-import) som blir fleshed ut i W3C.
For å bygge bro over gapet og gi utviklere tilgang til denne rike funksjonaliteten nå, har Google opprettet Polymer-biblioteket som fungerer som et sett med polyfilter for å bringe løftet om webkomponenter til deg i dag. La oss dykke litt dypere inn.
Som jeg nevnte, er Polymer-biblioteket et sett med polyfiler som hjelper deg med å lage webkomponenter på alle de store moderne nettleserne. Den gir rammen for å definere, skape og gjengi komplekse egendefinerte elementer på en forenklet måte som ligner på kodene du har vokst opp med. Hva jeg mener med dette, er at det bidrar til å forenkle måten vi bruker komplekse komponenter ved:
Men det viktige å huske er at rammen selv er utviklet basert på retningen til de enkelte spesifikasjonene som blir oppdaget av W3C, og gir dermed et fundament som skal utvikle seg med retningen til hovedstandardkroppen.
Hva dette biblioteket kan gjøre, tillater oss å lage gjenbrukbare komponenter som fungerer som ekte DOM-elementer mens de bidrar til å minimere tilliten til JavaScript for å gjøre komplisert DOM-manipulering for å gi rike UI-resultater.
Her er et raskt eksempel fra Polymer-siden. Si at jeg ønsket å gjøre en arbeidsklokke på siden min. Det vil typisk innebære en kraftig JavaScript-kode å gjøre, men ved å bruke Polymer kan jeg bare bruke følgende syntaks:
Dette ser ut som HTML-taggsyntaksen vi alle har vokst opp med, og er langt enklere å implementere, lese og vedlikeholde enn noen komplisert JavaScript-kode. Og sluttresultatet ser slik ut:
Og siden det er et vanlig element i DOM, kan du også stillegge det med CSS slik:
Accentsconagua
polymer-klokke bredde: 320px; høyde: 320px; display: inline-block; bakgrunn: url ("... /assets/glass.png") no-repeat; bakgrunnsstørrelse: deksel; grense: 4px solid rgba (32, 32, 32, 0.3); Det er absolutt ikke den vakreste klokken, men det er ikke poenget. Faktum er at du kan tilpasse komponenten til din smak og deretter bruke den på nytt via en enklere og mer vedlikeholdbar syntaks.
Det er tre måter å installere og bruke Polymer på:
Av de tre, den enkleste og anbefalte måten er å bruke Bower fordi det ikke bare er utrolig enkelt å gjøre, men Bower klarer også enhver avhengighet som Polymer kan ha. Dette betyr at hvis du velger å installere et bestemt brukergrensesnittelement som er avhengig av en annen, kan Bower håndtere det for deg.
Bower er installert som en Node Packaged Module, så du må ha Node.js installert. Fra kommandolinjen skriver du inn følgende:
npm installer -g bower
Dette burde trekke Bower fra npm-registret og installere det slik at det er globalt tilgjengelig for deg. Deretter tar etterfølgende Bower-baserte installasjoner følgende form:
bower installasjon
På et minimum vil du installere Polymers plattform og kjernekomponenter siden de gir grunnlaget for at du oppretter og driver dine kundeelementer.
Bower install - Lag Polymer / Platform Bower Install - Lag Polymer / Polymer
Du kan snarvei dette ved å skrive inn:
bower install - lag Polymer / plattform Polymer / polymer
Polymer kommer også med et rikt, forhåndsdefinert sett med elementer som du kan begynne å dra nytte av umiddelbart. De består av brukergrensesnitt og ikke-UI-baserte elementer som gir funksjonalitet som:
Og det skraper bare overflaten. Det er mye der inne med full kildekode tilgjengelig for å tjene som et læringsverktøy, samt tillate deg å tilpasse evnene til dine behov.
Du har mulighet til å installere disse komponentene. Du kan installere alt eller bare de du vil bruke. For å installere alt, skriver du inn:
bower installasjon Polymer / kjerneelementer bower install Polymer / polymer-ui-elementer
Dette er kjøkkenvasken-tilnærming, og når du begynner å lære Polymer, er det sannsynligvis enklest å bare gjøre det for å hjelpe deg med å få en følelse av hva som er tilgjengelig.
Når du er mer kjent med rammen, kan du kirsebær velge de enkelte komponentene du vil bruke og installere dem slik:
bower install Polymer / polymer-ui-trekkspill
Dette er skjønnheten ved å bruke Bower. Hver komponent leveres med a bower.json konfigurasjonsfil som beskriver dens avhengigheter. Så hvis du installerte trekkspill komponent, ser på config, kan vi se at det har avhengigheter på hoveddelen polymeren komponent så vel som velger og sammen komponenter.
"navn": "polymer-ui-trekksprekk", "privat": sant "avhengigheter": "polymer": "Polymer / polymer # 0.2.0", "polymervelger": "Polymer / polymervelger # 0.2.0 "," polymer-ui-collapsible ":" Polymer / polymer-ui-collapsible # 0.2.0 "," versjon ":" 0.2.0 "
Det viktigste er at du ikke trenger å bekymre deg for det fordi Bower forvalter det for deg. Derfor er det det foretrukne verktøyet for å installere Polymer.
Installere via Bower vil opprette en mappe som heter bower_components I prosjektmappen din er det alt du trenger Polymer.
Polymer-området knuser ganske mye neglene beskrivelsen av egendefinerte elementer:
"Egendefinerte elementer er kjernebyggene av polymerbaserte applikasjoner. Du lager applikasjoner ved å samle egendefinerte elementer sammen, enten de leveres av Polymer, de du lager selv eller elementer fra tredjepart. "
Polymer gir oss muligheten til å lage våre egne tilpassede elementer fra bunnen av og til og med gjenbruke andre elementer for å utvide våre tilpassede. Dette gjøres ved først å lage en mal av det egendefinerte elementet. For all hensikt er denne malen en kombinasjon av HTML, CSS og JavaScript, og inkluderer funksjonaliteten som vil være tilgjengelig når du bruker elementet. Den er basert på WhatWG HTML Templates-spesifikasjonen som er ment å gi innfødt støtte for klientsiden-templering.
La oss se på dette enkle eksempelet på en Polymer-mal:
Det er ikke noe problem, men det er ikke noe problem, men det er ikke et øyeblikk, og det er et problem for deg. Ut som et minimum, det er en utfordring å utøve arbeidet med å utvide ut fra dette. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur. Uncepteur sint occaecat cupidatat non proident, sunt i culpa de officia deserunt mollit anim id er laborum.
Dette elementet lar deg enkelt legge til Lorem Ipsum-tekst i koden ved å bare bruke følgende tag:
Det første som må inkluderes, er Polymer-kjerne, som er den viktigste API-en som lar deg definere egendefinerte elementer:
Det neste trinnet er å definere navnet på det nye elementet ved hjelp av Polymer's polymer-element direktiv:
I dette tilfellet har jeg kalt mitt nye element lorem-element. Navnet er en nødvendig attributt, og den må inneholde et dash ("-").
Derfra bruker vi mal Direktivet for å pakke inn hovedkroppene og koden som vil utgjøre vårt nye element. For dette enkle eksempelet griper jeg Lorem Ipsum-tekst og pakket det med avsnittetiketter.
Det er det! Mitt tilpassede element er gjort, og jeg kan nå bruke det.
Husk at denne komponenten vil bli importert til andre sider i din webapp som kanskje vil utnytte den. Dette er mulig på grunn av Polymers implementering av HTML-importspesifikasjonen som lar deg inkludere og gjenbruke HTML-dokumenter i andre HTML-dokumenter.
Først må du inkludere platform.js som gir polyfillet som etterligner de innfødte APIene:
Deretter må vi importere vårt egendefinerte element til vår nettside:
Når du har gjort dette, er ditt nye egendefinerte element nå tilgjengelig slik at du kan gjøre noe slikt:
Du har også muligheten til å fullt ut utforme elementet også:
Dette er et ganske grunnleggende eksempel. La oss ta det et skritt videre.
Hvis du husker, nevnte jeg hvordan du kan utnytte eksisterende elementer for å forbedre din egendefinerte. La oss se på et eksempel på dette.
Anta at jeg ønsket å ha et element som gikk ut til Reddit og fanget data fra en av subreddits. Jeg kunne dra nytte av Polymers eksisterende Ajax-komponent ved å inkludere det i mitt egendefinerte element som dette:
Resp.data.public_description
Legg merke til at jeg importerer Polymer Ajax-komponenten og deretter slipper den i malen min. Dette gjør det nå enkelt å referere til mitt nye element som gjør at XHR-anropet trekker tilbake JSON-dataene og fyller det i min avsnittetiketter med underreddits offentlige beskrivelse:
"Ting som gjør at du går AWW! Som valper. Og bunnies ... og så videre ... Et sted for virkelig søte bilder, videoer og historier! "
Svaret returneres, og Polymer etablerer en toveisbinding som gjør det mulig for meg å kunne bruke dataene ved å pakke den inn i dobbeltkrøllede bånd som dette Resp.data.public_description.
Dette er kult, men i de fleste tilfeller kommer vi ikke til å kode en URL for en bestemt ressurs. La oss utvide dette videre ved å legge til attributter til vårt egendefinerte element. Å gjøre dette er utrolig enkelt. Først må du oppdatere polymer-element direktivet for å gjenspeile de attributter du vil ha for ditt egendefinerte element:
I dette tilfellet vil jeg kunne sende en subreddit til elementet mitt og få det til å trekke tilbake data basert på det. Jeg kan nå bytte anropet til polymer-Ajax som dette:
Legg merke til hvordan jeg bruker Polymers databindingsfunksjoner for å dynamisk bygge URL-adressen basert på attributtverdien for Subreddit. Nå kan jeg oppdatere hvordan jeg refererer til egendefinert element for å passere i subreddit som jeg vil ha:
Det siste jeg vil gjøre er å sikre at det er en standardverdi for attributtet mitt, slik at koden min ikke blåser opp. Jeg gjør dette ved å legge til følgende i min elementmal:
Dette sikrer at jeg alltid vil ha en standardverdi for elementets offentlige attributt. Slik ser den endelige koden ut:
Resp.data.public_description
Og det er ganske flere ting du kan gjøre, inkludert å legge til tilpassede tilbakeringingshåndteringsprogrammer, administrere hendelser, sette opp Mutation Observers til å behandle endringer i DOM og mye mer.
Webkomponenter skal endre måten vi bygger webapps på, og Polymer bringer dette til oss i dag. Du har nå muligheten til å lage dine egne tilpassede og vedlikeholdsfrie komponenter som kan imøtekomme de spesifikke behovene til søknaden din. Disse komponentene kan enkelt deles slik at andre lag eller samfunnet enkelt kan dele og dra nytte av disse innkapslede byggeblokkene.
