Google Polymer - Hoe het de manier zal veranderen waarop Web Apps worden gebouwd

Samen met Google Photos heeft Google ook Polymer helemaal opnieuw opgebouwd, met aandacht voor prestatieverbetering en efficiëntie. Denk aan Polymer als een SDK (Software Development Kit) voor het web, een die maakt ontwikkeling van webapplicaties zo veel sneller met behulp van een nieuwe standaard genaamd Web Components.

Web Components laten ons toe maak aangepaste elementen en tags voor onze websites. In deze post zullen we bekijken hoe de aangepaste elementen in Google Polymer kunnen helpen bij het ontwikkelen van webapps. Bovendien zullen we ook een paar demo's bekijken over hoe deze aangepaste elementen kunnen worden toegepast.

Over webcomponenten

De beste manier om te begrijpen hoe Web Components werkt, is door te kijken naar de huidige standaardelementen zoals . Wanneer we toevoegen samen met de URL-bronnen van de audio, zullen webbrowsers dit element weergeven als een audiospeler met de afspeel- en pauzeknop, de tijdrail en de volumeschuifregelaar. Ooit afgevraagd hoe de besturing van de speler is gebouwd en vormgegeven?

De UI-besturingsspeler zit eronder verborgen als Shadow Roots, ook wel bekend als Schaduw DOM. Om Shadow DOM te openen, start u de Chrome DevTools > klik op de tand pictogram> selecteer de Toon gebruiker-agentschaduw DOM keuze.

In de volgende schermafbeelding kunt u een stapel vinden

en elementen die de besturing van de UI-speler in het geheim opbouwen.

Tegenwoordig kunnen we met Web Components ook onze eigen elementen benoemen. We kunnen een element zoals bouwen, een Twitter-feed insluiten of (misschien) om een diagram in te sluiten.

Bovendien kunnen deze aangepaste elementen ook een aantal geaccepteerde aangepaste kenmerken hebben. Met betrekking tot de element, stelt u een attribuut in met de naam gebruikersnaam die zal worden gebruikt om de Twitter-gebruikersnaam op te geven.

Aangepaste elementen in polymeer

Polymeer wordt geleverd met een aantal elementen die goed zijn voor (bijna) elke webtoepassing. Google verdeelt deze elementen in groepen: Iron Elements, Paper Elements, Google Web Components, Gold Elements, Neon Elements, Platinum Elements en Molecules.

1. IJzerelementen

Iron Elements is een verzameling basiselementen. Deze basiselementen zijn waar we normaal gebruik van maken bouw een webpagina zoals een invoer, vorm en afbeelding. Het verschil is dat Polymeer extra krachten toevoegt aan deze elementen.

Alle elementen in deze groep zijn ijzer- voorafgegaan, bijvoorbeeld , die wordt gebruikt om een afbeelding weer te geven. De element is uitgerust met een aantal extra attributen die we niet kunnen toepassen in de reguliere element. We kunnen bijvoorbeeld toevoegen preload, vervagen, en placeholder attributen:

In het bovenstaande voorbeeld wordt eerst de tijdelijke aanduiding voor de afbeelding weergegeven en vervolgens vervaagt deze in de werkelijke afbeelding in de src omdat het volledig is geladen, een soepel laden van afbeeldingen uitvoeren.

2. Papierelementen

De Papierelementen is een groep Material Design-elementen. Materiaalontwerp is Google-ontwerptaal om gebruikersinterface en -ervaring op verschillende Google-platforms zowel visueel als visueel consistent te maken voor zowel het web als voor Android-apps. Sommige elementen die uniek zijn voor Materiaalontwerp zijn de knop Papier en zwevende actie (FAB).

Papier

Papier is de metafoor van Google voor het medium dat ten grondslag ligt aan de inhoud. Om een papier met Polymeer toe te voegen, gebruiken we de element. Dit element heeft 2 attributen nodig:

verhoging om het papier op te tillen, dus een schaduw toevoegen om de hoogte te versterken
geanimeerde zal animatie toepassen als de hoogte van het papier verandert.

Zwevende actieknop (FAB)

De zwevende actieknop (FAB) is een ronde knop met een pictogram dat op het scherm zweeft, meestal met een opvallende kleur. Google suggereert dat deze knop een vaak gebruikte functie bevat. Hier is een voorbeeld:

Het volgende codefragment voegt een papiermateriaal met een afbeelding en een FAB toe.

We zullen het volgende resultaat hebben:

We hebben een foto met een “hart-” knop zwevend bovenop. Klik erop om de foto leuk te vinden, en de knop geeft een rimpeleffect om de klik te bevestigen.

Bekijk de papieren demo

3. Google Web Components

De Google Web Components zijn speciale elementen die omgaan met Google API's en services zoals Google Maps, YouTube en Google Feed, om er maar een paar te noemen. Elementen in deze groep maak interactie met Google-services op slechts enkele regels afstand.

Het volgende is een voorbeeld om een Google Map te laten zien met behulp van de element.

  Dit is Googleplex

Zoals je hierboven kunt zien, de element neemt de breedtegraad en Lengtegraad om de locatie op de kaart te specificeren. We kunnen ook nesten om een kaartmarkering van die locatie te tonen, samen met een tekst die verschijnt bij het klikken op de markering.

Bekijk de kaartdemo

Wil je een YouTube-video laten zien? je kunt de gebruiken element.

Op dezelfde manier passen we de uitvoer aan met attributen.

Bekijk de YouTube-demo

4. Gouden elementen

De gouden elementen zijn de elementen die speciaal zijn ontworpen voor e-commerce apps. Hier vindt u een element om creditcard-, e-mail-, telefoon- en ZIP-invoer weer te geven die allemaal zijn uitgerust formaat validatie om correcte gegevensinvoer en beveiliging te garanderen. Hier is een voorbeeld om Visa creditcard-invoer toe te voegen.

5. Andere elementen

De overige elementen bevatten neonelementen voor animatie en speciale effecten, platina-elementen voor offline en pushmeldingen en tenslotte Molecules, wrappers voor bibliotheken van derden.

Opmerking van de uitgever: Op het moment van schrijven zijn Neon Elements, Platinum Elements en Molecules nog steeds niet beschikbaar.

Polymer integreren

Wilt u Polymer gebruiken in uw webontwikkeling? Hier leest u hoe u het op uw webpagina's installeert en integreert. Omdat de meeste Polymer-elementen op elkaar vertrouwen, is de beste manier om Polymer te installeren via Bower.

Bower is een projectafhankelijkhedenmanager die het gemakkelijker maakt om scripts of stijlen te installeren die nodig zijn om het project uit te voeren. Bekijk eerder ons bericht over het installeren, bijwerken en verwijderen van webbibliotheken met Bower.

Om Polymer te integreren, start u Terminal en navigeert u naar uw projectdirectory, ervan uitgaande dat u er een hebt gemaakt. Ren dan priem init commando om bower.json-bestand in uw project te starten dat zal worden gebruikt om de projectafhankelijkheden vast te leggen. Open bower.json en voeg de volgende regels toe.

 "afhankelijkheden": "polymeer": "Polymeer / polymeer # ^ 1.0.0", "google-web-componenten": "GoogleWebComponenten / google-web-componenten # ^ 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 "

Deze opstelling veronderstelt dat we alle elementen uit elke groep gaan gebruiken. U mag verwijderen wat u niet nodig heeft uit de lijst met afhankelijkheden. Omdat de afhankelijkheden zijn ingesteld, voert u de installatie van prieel commando om de afhankelijkheden in de lijst te installeren.

Dit proces kan enige tijd duren, omdat het gaat om het pakken van een enorme hoeveelheid bestanden uit de repositories. Als je klaar bent, zou je ze moeten vinden opgeslagen in de bower_components map.

Open het HTML-bestand waarin u de polymeercomponenten wilt gebruiken. Binnen de documentkop, koppel de WebComponents.js welke is de polyfill voor browsers die nog geen WebComponents ondersteunen, en importeer de componentbestanden HTML-import gebruiken.

Hier is een voorbeeld:

Met deze instelling kunnen we de , , elementen.

showcases

Hier zijn enkele van de web-apps die Google Polymer al gebruiken.

Google

Google gebruikte Google Polymer op de Google IO 2015-webpagina; Google Fi, de draadloze service van Google voor vervoerders en leveranciers in partnerschap; en Google Music.

Aangepaste elementen

CustomElements is een hub waar u aangepaste elementen kunt vinden die zijn gebouwd met Web Components. Het maakt gebruik van het Paper-element om de lijst te bevatten en te bouwen. Het biedt ook een handige manier om deze elementen via Bower en NPM te installeren.

Chrome Dev Editor

Een Chrome-toepassing voor het bewerken van codes die verrassend goed werkt. Deze app gebruikt de FAB-knop, het Paper-menu en de Paper-dialoogelementen in de gebruikersinterface.

Polymer Designer

Een hulpmiddel om een webtoepassing te bouwen met Polymeerelementen met behulp van een interface met slepen en neerzetten.

Dagelijkse voorraadprognose

Een beursverslag en -prognose volledig gebouwd met Polymeerelementen.

Polymer Mail

Een e-mailclient-app voor Gmail. Het ziet er mooi en vloeiend uit, hoewel het helaas niet volledig functioneert.

Laatste gedachten

Polymeer heeft een enorme reikwijdte en het kan even duren om te wennen aan alle aangepaste elementen en de bijbehorende API. Niettemin, Web Components en Polymer zullen zeker van invloed zijn op de manier waarop we webtoepassingen bouwen. Blijf op de hoogte door meer te lezen over Web Components - referenties zijn hieronder te vinden.

Demo bekijken
Download de bron

Handige verwijzingen

De staat van webcomponenten
Een gedetailleerde inleiding tot aangepaste elementen
Officiële blog van Google Polymer