Share
Redaktörer Anm: Denna artikel uppdaterades för att ta bort referenser till avlägsna komponenter, särskilt polymerajax, som sedan har ersatts av kärn-ajax. Tack vare Rob Dodson, utvecklare förespråkare på Google, för feedback.
Att bygga moderna webbapplikationer kräver mycket verktyg. Detta inkluderar preprocessorer, JavaScript-ramar, testverktyg och mycket mer. Och eftersom komplexiteten hos dessa appar ökar, så behöver bredden av verktyg och tjänster som behövs för att hantera dem. Skulle det inte vara bra om vissa saker förenklades?
Webkomponenter syftar till att lösa några av dessa komplexiteter genom att tillhandahålla ett enhetligt sätt att skapa nya element som omfattar rik funktionalitet utan att behöva alla extra bibliotek. Webkomponenter består av fyra olika specifikationer (anpassade element, mallar, skuggdom och HTML-import) som släpper ut i W3C.
För att överbrygga klyftan och ge utvecklare tillgång till denna rika funktionalitet har Google skapat Polymer-biblioteket som fungerar som en uppsättning polyfilter för att få löftet om webbkomponenter till dig idag. Låt oss dyka lite djupare in.
Som jag nämnde är Polymer-biblioteket en uppsättning polyfilter som hjälper dig att skapa webbkomponenter på alla större moderna webbläsare. Det ger ramen för att definiera, skapa och göra komplexa anpassade element på ett förenklat sätt som liknar de taggar du har blivit med. Vad jag menar med det här är att det hjälper till att förenkla sättet att använda komplexa komponenter genom att:
Men det viktiga att komma ihåg är att ramverket själv är utvecklat baserat på riktningen för de enskilda specifikationerna som fastställs av W3C, vilket ger en grund som ska utvecklas med riktningen hos huvudstandardkroppen.
Vad det här biblioteket kan göra tillåter oss att skapa återanvändbara komponenter som fungerar som sanna DOM-element samtidigt som vi hjälper till att minimera vårt beroende av JavaScript för att göra komplicerad DOM-manipulation för att ge rika användargränssnitt.
Här är ett snabbt exempel från Polymer-webbplatsen. Säg att jag ville göra en arbetsklocka på min sida. Det skulle normalt innebära en viss tung JavaScript-kod, men genom att använda Polymer kan jag helt enkelt använda följande syntax:
Det ser ut som HTML-taggsyntaxen vi alla har vuxit med och är mycket enklare att implementera, läsa och underhålla än någon komplex JavaScript-kod. Och slutresultatet ser ut så här:
Och eftersom det är ett normalt element i DOM, kan du stile det också med CSS så här:
Accentsconagua
polymer-ur-klocka bredd: 320px; höjd: 320px; display: inline-block; bakgrund: url ("... /assets/glass.png") no-repeat; bakgrundsstorlek: omslag; gräns: 4px fast rgba (32, 32, 32, 0.3); Det är verkligen inte den vackraste klockan, men det är inte meningen. Faktum är att du kan anpassa komponenten till din smak och sedan återanvända den via en enklare och mer underhållbar syntax.
Det finns tre sätt att installera och använda Polymer:
Av de tre är det enklaste och rekommenderade sättet att använda Bower eftersom det inte bara är otroligt enkelt att göra, men Bower hanterar också alla beroenden som Polymer kan ha. Det betyder att om du väljer att installera ett specifikt användargränssnitt som har ett beroende av en annan, kan Bower hantera det för dig.
Bower installeras som en nodförpackad modul, så du måste ha Node.js installerat. Skriv följande i kommandoraden:
npm installera -g bower
Detta borde dra Bower från registret npm och installera det så att det är globalt tillgängligt för dig. Därifrån följer följande Bower-baserade installationer följande formulär:
bower installation
På ett minimalt minimum kommer du att vilja installera Polymers plattform och kärnkomponenter eftersom de utgör grunden för att du skapar och driver dina kundelement.
bower installation - save Polymer / plattform bower installation - save Polymer / polymer
Du kan genväga detta genom att skriva in:
bower installation - save Polymer / plattform Polymer / polymer
Polymer kommer också med en rik, fördefinierad uppsättning element som du kan börja dra nytta av omedelbart. De består av användargränssnitt och icke-UI-baserade element som ger funktionalitet som:
Och det skrapar bara ytan. Det finns mycket där redan med fullständig källkod tillgänglig för att fungera som ett lärandesverktyg, så att du kan anpassa möjligheterna till dina behov.
Du har möjlighet att installera dessa komponenter. Du kan installera allt eller bara de du vill använda. För att installera allt, skriver du in:
bower installation Polymer / kärnelement bower installation Polymer / polymer-ui-element
Det här är diskbänkens tillvägagångssätt och när du börjar lära Polymer är det förmodligen lättast att bara göra det för att du ska få känsla för vad som finns.
När du är mer bekant med ramen, kan du körsbärspeka de enskilda komponenterna du vill använda och installera dem så här:
bower installation Polymer / polymer-ui-dragspel
Det här är skönheten att använda Bower. Varje komponent kommer med a bower.json konfigurationsfil som beskriver dess beroenden. Så om du installerade dragspel komponent, titta på config, vi kan se att det har beroenden på huvudet polymer komponent såväl som väljare och hopfällbar komponenter.
"polymer": "Polymer / polymer # 0.2.0", "polymerväljare": "Polymer / polymerväljare # 0.2.0 "," polymer-ui-hopfällbar ":" Polymer / polymer-ui-hopfällbar # 0.2.0 "," version ":" 0.2.0 "
Det viktigaste är att du inte behöver oroa dig för det eftersom Bower hanterar det för dig. Det är därför det är det föredragna verktyget för installation av Polymer.
Installera via Bower skapar en mapp som heter bower_components I din projektmapp finns alla saker Polymer behöver.
Polymer-platsen spikar ganska mycket beskrivningen av anpassade element:
"Custom Elements är kärnbyggstenarna i polymerbaserade applikationer. Du skapar applikationer genom att montera anpassade element tillsammans, antingen som tillhandahålls av Polymer, de du skapar själv eller element från tredje part. "
Polymer ger oss möjlighet att skapa egna anpassade element från början och till och med återanvända andra element för att utöka våra anpassade. Detta görs genom att först skapa en mall för det anpassade elementet. För alla ändamål är denna mall en kombination av HTML, CSS och JavaScript och innehåller funktionaliteten som kommer att finnas tillgänglig när du använder elementet. Den är baserad på specifikationen WhatWG HTML Templates som är avsedd att tillhandahålla inbyggt stöd för templatering på klientsidan.
Låt oss titta på det här enkla exemplet på en Polymer-mall:
Lorem ipsum dolor sitta amet, konsekventa adipisicing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Utan minsta möjliga vänskap, det är inte nödvändigt att utöva arbetskraftsarbeten och utifrån det som följer. Duis aute irure dolor i reprehenderit i voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt i culpa de officia deserunt mollit anim id er laborum.
Med detta element kan du enkelt lägga till Lorem Ipsum-text i din kod genom att helt enkelt använda följande tagg:
Det första som behöver ingå är Polymer-kärnan, vilket är det viktigaste API-en som gör det möjligt att definiera anpassade element:
Nästa steg är att definiera namnet på det nya elementet med hjälp av Polymer's polymer-elementet direktiv:
I det här fallet har jag namngett mitt nya element lorem-elementet. Namnet är ett obligatoriskt attribut och det måste innehålla ett streck ("-").
Därifrån använder vi mall Direktivet för att sätta in huvudkroppsdekor och kod som kommer att utgöra vårt nya element. För det här enkla exemplet tar jag tag i Lorem Ipsum-text och lindade den med stycke-taggar.
Det är allt! Mitt anpassade element är gjort och jag kan nu använda det.
Tänk på att den här komponenten kommer att importeras till andra sidor i din webbapp som kanske vill utnyttja den. Detta är möjligt på grund av Polymers implementering av HTML-importspecifikationen som låter dig inkludera och återanvända HTML-dokument i andra HTML-dokument.
Först måste du inkludera platform.js som tillhandahåller polyfil som mimar de inbyggda API: erna:
Därefter måste vi importera vårt anpassade element till vår webbsida:
När du har gjort det här är ditt nya anpassade element tillgängligt så att du kan göra något så här:
Du har också möjlighet att fullt ut stile elementet också:
Detta är ett ganska grundläggande exempel. Låt oss ta det ett steg längre.
Om du minns nämnde jag hur du kan utnyttja befintliga element för att förbättra din anpassade. Låt oss titta på ett exempel på detta.
Antag att jag ville ha ett element som gick ut till Reddit och tog tag i data från en av underredditerna. Jag kunde dra nytta av Polymers existerande Ajax-komponent genom att inkludera det i mitt anpassade element så här:
Resp.data.public_description
Observera att jag importerar Polymer Ajax-komponenten och sedan släpper den i min mall. Det här gör det enkelt att hänvisa till mitt nya element som gör XHR-samtalet för att dra tillbaka JSON-data och fylla det i mina stycke-taggar med den subredditens offentliga beskrivningen:
"Saker som får dig att gå AWW! Som valpar. Och kaniner ... och så vidare ... En plats för riktigt söta bilder, videor och berättelser! "
Svaret returneras och Polymer etablerar en tvåvägs databindning som gör det möjligt för mig att kunna använda data genom att förpacka den i dubbla lockiga axlar så här Resp.data.public_description.
Det här är coolt men i de flesta fall kommer vi inte att hardkoda en webbadress för en viss resurs. Låt oss expandera detta ytterligare genom att lägga till attribut till vårt anpassade element. Att göra detta är otroligt enkelt. Först måste du uppdatera polymer-elementet direktivet för att återspegla de attribut du vill ha för ditt anpassade element:
I det här fallet vill jag kunna skicka en subreddit till mitt element och få det att dra tillbaka data baserat på det. Jag kan nu ändra samtalet till polymer-ajax så här:
Lägg märke till hur jag använder Polymers databindande förmåga att dynamiskt bygga URL-adressen baserat på attributvärdet för Subreddit. Nu kan jag uppdatera hur jag refererar till mitt anpassade element för att passera i den subreddit som jag vill ha:
Det sista jag vill göra är att det finns ett standardvärde för mitt attribut så att min kod inte blåser upp. Det gör jag genom att lägga till följande i min elementmall:
Detta garanterar att jag alltid har ett standardvärde för mitt elements offentliga attribut. Så här ser den slutliga koden ut:
Resp.data.public_description
Och det finns en hel del fler saker du kan göra, inklusive att lägga till anpassade återuppringningshanterare, hantera händelser, konfigurera Mutation Observers att bearbeta ändringar till DOM och mycket mer.
Webbkomponenter kommer att förändra hur vi bygger webbapps och Polymer tar med oss det här idag. Du har nu möjlighet att skapa egna skräddarsydda och underhållbara komponenter som kan tillgodose de specifika behoven i din ansökan. Dessa komponenter kan enkelt delas så att andra grupper eller samhället enkelt kan dela och dra nytta av dessa inkapslade byggstenar.
