Share
Opmerking van de uitgever: Dit artikel is bijgewerkt om verwijzingen naar verouderde componenten te verwijderen, met name polymeer-ajax dat sindsdien is vervangen door core-ajax. Dankzij Rob Dodson, ontwikkelaar advocaat bij Google, voor de feedback.
Voor het bouwen van moderne webapplicaties is veel gereedschap nodig. Dit omvat preprocessors, JavaScript-frameworks, testtools en nog veel meer. En naarmate de complexiteit van deze apps toeneemt, neemt ook de breedte van tooling en services toe die nodig zijn om ze te beheren. Zou het niet geweldig zijn als sommige dingen werden vereenvoudigd?
Webcomponenten zijn bedoeld om een aantal van deze complexiteiten op te lossen door een uniforme manier te bieden om nieuwe elementen te maken die rijke functionaliteit bevatten zonder de noodzaak voor alle extra bibliotheken. Webcomponenten bestaan uit vier verschillende specificaties (Aangepaste elementen, Sjablonen, Schaduw-DOM en HTML-invoer) die worden uitgewerkt in het W3C.
Om de kloof te overbruggen en ontwikkelaars toegang te geven tot deze rijke functionaliteit, heeft Google nu de Polymer-bibliotheek gemaakt die dient als een set polyfills om vandaag de belofte van Web Components te brengen. Laten we een beetje dieper duiken.
Zoals ik al zei, is de Polymer-bibliotheek een verzameling polyfills die u helpen bij het maken van webcomponenten op alle belangrijke moderne browsers. Het biedt het kader voor het definiëren, creëren en weergeven van complexe aangepaste elementen op een simplistische manier, vergelijkbaar met de tags waarmee u bent opgegroeid. Wat ik hiermee bedoel, is dat het helpt om de manier waarop we complexe componenten gebruiken te vereenvoudigen door:
Maar het belangrijkste om te onthouden, is dat het raamwerk zelf is ontwikkeld op basis van de richting van de individuele specificaties die door het W3C zijn doorgelicht, waardoor het een fundament biedt dat moet evolueren met de richting van de hoofdstandaard.
Wat deze bibliotheek kan doen, stelt ons in staat om herbruikbare componenten te maken die werken als echte DOM-elementen, terwijl we helpen onze afhankelijkheid van JavaScript te minimaliseren om complexe DOM-manipulatie te doen om rijke UI-resultaten te genereren.
Hier is een snel voorbeeld van de Polymer-site. Stel dat ik een werkende klok op mijn pagina wilde weergeven. Dat zou meestal wat JavaScript-code voor zware taken bevatten, maar met behulp van Polymeer kan ik eenvoudig de volgende syntaxis gebruiken:
Dit lijkt op de HTML-tag-syntaxis waarmee we allemaal zijn opgegroeid en is veel eenvoudiger te implementeren, te lezen en te onderhouden dan sommige complexe JavaScript-code. En het eindresultaat ziet er als volgt uit:
En omdat het een normaal element in de DOM is, kun je het ook opmaken met CSS, zoals dit:
Accentsconagua
polymer-ui-clock width: 320px; hoogte: 320 px; weergave: inline-block; achtergrond: url ("... /assets/glass.png") geen herhaling; achtergrondformaat: omslag; grens: 4px vaste rgba (32, 32, 32, 0,3); Het is zeker niet de mooiste klok, maar daar gaat het niet om. Het is een feit dat u de component naar wens kunt aanpassen en vervolgens opnieuw kunt gebruiken via een eenvoudigere en beter te onderhouden syntaxis.
Er zijn drie manieren om Polymer te installeren en te gebruiken:
Van de drie is de gemakkelijkste en aanbevolen manier om Bower te gebruiken, omdat het niet alleen ongelooflijk gemakkelijk is om te doen, maar Bower beheert ook alle afhankelijkheden die Polymer zou kunnen hebben. Dit betekent dat als u ervoor kiest om een specifiek UI-element te installeren dat afhankelijk is van een ander UI-element, Bower dit voor u kan afhandelen.
Bower is geïnstalleerd als een Node Packaged-module, dus u moet Node.js geïnstalleerd hebben. Typ vanaf de opdrachtregel het volgende:
npm install -g bower
Dit zou Bower uit het npm-register moeten halen en installeren zodat het wereldwijd beschikbaar is voor jou. Vanaf daar hebben de volgende op Bower gebaseerde installaties de volgende vorm:
installatie van prieel
Op het absolute minimum wilt u het platform en de kerncomponenten van Polymer installeren, omdat deze de basis vormen voor het maken en uitvoeren van uw klantelementen.
prieel installeren - opslaan Polymeer / platform prieel installeren - opslaan polymeer / polymeer
U kunt dit korter maken door te typen:
prieel installeren - opslaan Polymeer / platform Polymeer / polymeer
Polymeer wordt ook geleverd met een rijke, vooraf gedefinieerde reeks elementen waarvan u onmiddellijk kunt profiteren. Ze bestaan uit UI en niet-UI gebaseerde elementen die functionaliteit bieden zoals:
En dat schraapt alleen het oppervlak. Er is al veel binnen met volledige broncode beschikbaar om als een leermiddel te dienen, en ook om je de mogelijkheden aan te passen aan je behoeften.
U hebt een keuze in het installeren van deze componenten. U kunt alles installeren of alleen degenen die u wilt gebruiken. Als u alles wilt installeren, typt u:
prieel installeren Polymeer / kernelementen prieel installeren Polymeer / polymeer-ui-elementen
Dit is de gootsteenbenadering en als je begint met het leren van Polymeer, is het waarschijnlijk het gemakkelijkst om dat te doen, om je een idee te geven van wat er beschikbaar is.
Als u eenmaal vertrouwd bent met het framework, kunt u de afzonderlijke componenten die u wilt gebruiken, selecteren en op de volgende manier installeren:
prieel installeren Polymeer / polymeer-ui-accordeon
Dit is het mooie van het gebruik van Bower. Elk onderdeel wordt geleverd met een bower.json configuratiebestand dat zijn afhankelijkheden beschrijft. Dus als je de accordeon component, kijkend naar de config, kunnen we zien dat het afhankelijk is van de main polymeer component evenals de keuzeschakelaar en inklapbare componenten.
"naam": "polymeer-ui-accordeon", "privé": waar, "afhankelijkheden": "polymeer": "Polymeer / polymeer # 0.2.0", "polymeer-selector": "Polymeer / polymeer-selector # 0.2.0 "," polymer-ui-inklapbaar ":" Polymeer / polymeer-ui-inklapbaar # 0.2.0 "," versie ":" 0.2.0 "
Het belangrijkste is dat u zich daar geen zorgen over hoeft te maken omdat Bower dit voor u beheert. Dit is waarom het de voorkeurshulpmiddel is voor het installeren van Polymer.
Installeren via Bower maakt een map genaamd bower_components in je projectmap met alle spullen die polymeer nodig heeft.
De Polymer-site is bijna de beschrijving van aangepaste elementen:
"Aangepaste elementen zijn de belangrijkste bouwstenen van op polymeer gebaseerde toepassingen. U maakt applicaties door samen aangepaste elementen samen te stellen, zowel door Polymer zelf opgegeven als door uzelf, of door externe elementen. "
Met Polymer kunnen we onze eigen aangepaste elementen helemaal zelf maken en zelfs andere elementen hergebruiken om onze aangepaste elementen uit te breiden. Dit wordt gedaan door eerst een sjabloon van het aangepaste element te maken. In alle opzichten is deze sjabloon een combinatie van HTML, CSS en JavaScript en bevat deze de functionaliteit die beschikbaar zal zijn wanneer u het element gebruikt. Het is gebaseerd op de WhatWG HTML Templates-specificatie die bedoeld is om native ondersteuning te bieden voor client-side-templating.
Laten we eens kijken naar dit eenvoudige voorbeeld van een polymeersjabloon:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimus veniam, quis nostrud exercise 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.
Met dit element kunt u gemakkelijk Lorem Ipsum-tekst aan uw code toevoegen door eenvoudig de volgende tag te gebruiken:
Het eerste dat moet worden opgenomen, is de kern van polymeren, de belangrijkste API waarmee u de aangepaste elementen kunt definiëren:
De volgende stap is het definiëren van de naam van het nieuwe element met behulp van Polymer's polymere-element richtlijn:
In dit geval heb ik mijn nieuwe element genoemd lorem-element. De naam is een verplicht kenmerk en moet een streepje bevatten ("-").
Vanaf daar gebruiken we de sjabloon richtlijn om de hoofdtags en codes in te sluiten die deel uitmaken van ons nieuwe element. Voor dit eenvoudige voorbeeld pak ik Lorem Ipsum-tekst en wikkelde het met alinatags.
Dat is het! Mijn aangepast element is klaar en ik kan het nu gebruiken.
Houd er rekening mee dat dit onderdeel wordt geïmporteerd in andere pagina's in uw web-app die hier mogelijk gebruik van willen maken. Dit is mogelijk vanwege de implementatie door Polymer van de HTML Imports-specificatie waarmee u HTML-documenten in andere HTML-documenten kunt opnemen en hergebruiken.
Eerst moet je opnemen platform.js die de polyfill levert die de native API's imiteert:
Vervolgens moeten we ons aangepaste element importeren in onze webpagina:
Zodra je dit hebt gedaan, is je nieuwe aangepaste element nu beschikbaar zodat je zoiets als dit kunt doen:
Je hebt ook de mogelijkheid om het element volledig te stylen:
Dit is een vrij eenvoudig voorbeeld. Laten we een stap verder gaan.
Als je je dat herinnert, heb ik je verteld hoe je bestaande elementen kunt gebruiken om je aangepaste te verbeteren. Laten we hier een voorbeeld van bekijken.
Stel dat ik een element wilde hebben dat naar Reddit ging en data van een van de subreddits pakte. Ik zou gebruik kunnen maken van het bestaande Ajax-onderdeel van Polymer door dat in mijn aangepaste element als volgt op te nemen:
Resp.data.public_description
Merk op dat ik de component Polymer Ajax importeer en deze in mijn sjabloon plaats. Dit maakt het nu gemakkelijk om te verwijzen naar mijn nieuwe element dat de XHR-aanroep doet om de JSON-gegevens terug te trekken en het in mijn alineatags te vullen met de openbare beschrijving van de subreddit:
"Dingen die je laten gaan AWW! Zoals puppy's. En konijntjes ... enzovoort ... Een plek voor echt leuke foto's, video's en verhalen! "
De reactie wordt geretourneerd en Polymer maakt een bidirectionele gegevensbinding waardoor ik de gegevens kan gebruiken door deze in dubbele accolades als deze te wikkelen Resp.data.public_description.
Dit is cool, maar in de meeste gevallen gaan we geen URL coderen voor een specifieke bron. Laten we dit verder uitbreiden door attributen aan ons aangepaste element toe te voegen. Dit doen is ongelooflijk eenvoudig. Eerst moet u de polymere-element richtlijn om de kenmerken weer te geven die u voor uw aangepast element wilt:
In dit geval wil ik een subreddit kunnen doorgeven aan mijn element en op basis daarvan gegevens kunnen ophalen. Ik kan nu de oproep wijzigen naar polymeer-ajax zoals dit:
Merk op hoe ik de gegevensbindingsmogelijkheden van Polymer gebruik om de URL dynamisch te bouwen op basis van de kenmerkwaarde van Subreddit. Nu kan ik bijwerken hoe ik naar mijn aangepaste element moet verwijzen in de subreddit die ik wil:
Het laatste wat ik wil doen is ervoor zorgen dat er een standaardwaarde is voor mijn kenmerk, zodat mijn code niet wordt opgeblazen. Ik doe dit door het volgende toe te voegen aan mijn elementsjabloon:
Dit zorgt ervoor dat ik altijd een standaardwaarde heb voor het openbare attribuut van mijn element. Zo ziet de definitieve code eruit:
Resp.data.public_description
En er is nog veel meer dat je kunt doen, zoals het toevoegen van aangepaste callback-handlers, het beheren van evenementen, het instellen van Mutation Observers om wijzigingen in de DOM te verwerken en nog veel meer.
Webcomponenten zullen de manier veranderen waarop we web-apps bouwen en Polymer brengt dit vandaag naar ons. U hebt nu de mogelijkheid om uw eigen aangepaste en onderhoudbare componenten te maken die kunnen worden afgestemd op de specifieke behoeften van uw toepassing. Deze componenten kunnen eenvoudig worden gedeeld, waardoor andere teams of de gemeenschap eenvoudig deze ingekapselde bouwstenen kunnen delen en er voordeel uit kunnen halen.
