Google Polymer - Wie es die Art und Weise verändert, wie Web-Apps gebaut werden

Zusammen mit Google Photos hat Google Polymer von Grund auf neu aufgebaut, um Leistungsverbesserungen und Effizienz zu erreichen. Stellen Sie sich Polymer als ein SDK (Software Development Kit) für das Web vor Entwicklung von Webanwendungen So viel schneller mit einem neuen Standard namens Web Components.

Webkomponenten erlauben es uns Erstellen Sie benutzerdefinierte Elemente und Tags für unsere Websites. In diesem Beitrag wird beschrieben, wie die benutzerdefinierten Elemente in Google Polymer die Entwicklung von Webanwendungen unterstützen können. Außerdem werden wir uns einige Demos ansehen, wie diese benutzerdefinierten Elemente zum Einsatz kommen können.

Informationen zu Webkomponenten

Der beste Weg, um zu verstehen, wie Webkomponenten funktionieren, besteht darin, sich die aktuellen Standardelemente anzusehen . Wenn wir hinzufügen Web-Browser rendern dieses Element zusammen mit den URL-Quellen des Audios als Audioplayer mit der Wiedergabe- und Pausetaste, der Zeitleiste sowie dem Lautstärkeregler. Wundern Sie sich immer, wie die Steuerelemente des Players gebaut und gestaltet werden?

Der UI-Control-Player ist als Schattenwurzeln (auch bekannt als Schattenwurzeln) versteckt Schatten-DOM. Um Shadow DOM anzuzeigen, starten Sie die Chrome DevTools > klicken Sie auf das Zahn icon> wählen sie aus Benutzeragentenschatten-DOM anzeigen Möglichkeit.

Im folgenden Screenshot finden Sie einen Stapel von

und Elemente, die die UI-Player-Steuerelemente geheim erstellen.

Heute können wir mit Web-Komponenten auch unsere eigenen Elemente benennen. Wir können ein Element gerne bauen, einen Twitter-Feed einbinden oder (vielleicht) ein Diagramm einbetten.

Darüber hinaus können diese benutzerdefinierten Elemente auch einige akzeptierte benutzerdefinierte Attribute aufweisen. In bezug auf die Element setzen Sie ein Attribut namens Nutzername die verwendet wird, um den Twitter-Benutzernamen anzugeben.

Benutzerdefinierte Elemente in Polymer

Polymer verfügt über eine Reihe von Elementen, die (fast) alle Webanwendungsanforderungen berücksichtigen. Google unterteilt diese Elemente in Gruppen: Eisenelemente, Papierelemente, Google Webkomponenten, Goldelemente, Neonelemente, Platinelemente und Moleküle.

1. Eisenelemente

Iron Elements ist eine Sammlung von Grundelementen. Diese grundlegenden Elemente verwenden wir normalerweise eine Webseite erstellen wie eine Eingabe, Form und Bild. Der Unterschied ist, dass Polymer diesen Elementen zusätzliche Kräfte verleiht.

Alle Elemente in dieser Gruppe sind Eisen- vorangestellt, zum Beispiel , welches zur Anzeige eines Bildes verwendet wird. Das Element wurde mit einigen zusätzlichen Attributen ausgestattet, die wir im regulären Bereich nicht anwenden können Element. Wir können zum Beispiel hinzufügen Vorspannung, verblassen, und Platzhalter Attribute:

Das obige Beispiel zeigt zuerst den Bildplatzhalter und wird dann im tatsächlichen Bild eingeblendet src wie es voll geladen ist, Durchführen eines glatten Bildladeeffekts.

2. Papierelemente

Das Papierelemente ist eine Gruppe von Material Design-Elementen. Material Design ist eine Google-Designsprache, um die Benutzeroberfläche und Erfahrung auf Google-Plattformen sowohl für die Web- als auch für die Android-Apps visueller zu gestalten. Einige Elemente, die für Material Design einzigartig sind, sind Papier und Floating Action Button (FAB)..

Papier

Papier ist die Metapher von Google für das Medium, das dem Inhalt zugrunde liegt. Um ein Papier mit Polymer hinzuzufügen, verwenden wir die Element. Dieses Element hat zwei Attribute:

Elevation Um das Papier anzuheben, fügen Sie einen Schatten hinzu, um die Höhe zu verstärken
animiert wendet eine Animation an, wenn sich die Papierhöhe ändert.

Schwimmende Aktionstaste (FAB)

Der Floating Action Button (FAB) ist ein kreisförmiger Button mit einem Symbol, das auf dem Bildschirm schwebt, normalerweise mit einer herausragenden Farbe. Google schlägt vor, dass diese Schaltfläche eine Funktion hat, auf die häufig zugegriffen wird. Hier ist ein Beispiel:

Der folgende Codeausschnitt fügt ein Papiermaterial mit einem Bild und einem FAB hinzu.

Wir werden folgendes Ergebnis haben:

Wir haben ein Foto mit einem “Herz” Taste darüber schweben. Klicken Sie es an, um das Klicken zu bestätigen. Wie das Foto gibt der Button einen Ripple-Effekt aus, um das Klicken zu bestätigen.

Sehen Sie sich die Paper Demo an

3. Google Web Components

Bei den Google-Webkomponenten handelt es sich um spezielle Elemente, die mit Google-APIs und -Services wie Google Maps, Youtube und Google Feed umgehen, um nur einige zu nennen. Elemente in dieser Gruppe Die Interaktion mit Google-Diensten ist nur wenige Zeilen entfernt.

Das folgende Beispiel zeigt eine Google Map mit der Element.

  Das ist Googleplex

Wie du kannst oben Element nimmt die Breite und Längengrad um den Ort auf der Karte anzugeben. Wir können auch nisten um eine Kartenmarkierung dieses Ortes zusammen mit einem Text anzuzeigen, der beim Klicken auf die Markierung angezeigt wird.

Sehen Sie sich die Karten-Demo an

Möchten Sie ein Youtube-Video zeigen? du kannst den ... benutzen Element.

Ebenso passen wir die Ausgabe über Attribute an.

Sehen Sie sich die Youtube-Demo an

4. Goldelemente

Die Goldelemente sind das Elemente, die speziell für E-Commerce-Apps entwickelt wurden. Hier finden Sie ein Element zum Anzeigen von Kreditkarten-, E-Mail-, Telefon- und ZIP-Eingaben, mit denen alle ausgestattet wurden Formatprüfung um korrekte Dateneingabe und Sicherheit zu gewährleisten. Hier ein Beispiel, um eine Visa-Kreditkarteneingabe hinzuzufügen.

5. Andere Elemente

Die verbleibenden Elemente umfassen Neon-Elemente für Animationen und Spezialeffekte, Platinum-Elemente für Offline- und Push-Benachrichtigungen und schließlich Molecules, Wrapper für Bibliotheken von Drittanbietern.

Anmerkung des Herausgebers: Zum Zeitpunkt dieses Schreibens sind Neonelemente, Platinelemente und Moleküle noch nicht verfügbar.

Integrierendes Polymer

Möchten Sie Polymer in Ihrer Webentwicklung einsetzen? So installieren und installieren Sie es in Ihre Webseiten. Da die meisten Polymer-Elemente aufeinander angewiesen sind, können Sie Polymer am besten über Bower installieren.

Bower ist ein Projektabhängigkeitsmanager, der die Installation von Skripts oder Stilen erleichtert, die zum Ausführen des Projekts erforderlich sind. In unserem früheren Beitrag erfahren Sie, wie Sie Webbibliotheken mit Bower problemlos installieren, aktualisieren und entfernen.

Um Polymer zu integrieren, starten Sie Terminal und navigieren Sie zu Ihrem Projektverzeichnis, sofern Sie eines erstellt haben. Dann renne Laube init Befehl, um die Datei bower.json in Ihr Projekt einzuleiten, mit der die Abhängigkeiten des Projekts aufgezeichnet werden. Öffnen Sie bower.json und fügen Sie die folgenden Zeilen hinzu.

 "Abhängigkeiten": "Polymer": "Polymer / Polymer # ^ 1.0.0", "Google-Web-Komponenten": "GoogleWebComponents / Google-Web-Komponenten # ^ 1.0.0", "Eisen-Elemente": " Polymer-Elemente / Eisen-Elemente # ^ 1.0.0 "," Papierelemente ":" Polymer-Elemente / Papier-Elemente # ^ 1.0.0 "," Gold-Elemente ":" Polymer-Elemente / Gold-Elemente # ^ 1.0.0 "

Dieses Setup setzt voraus, dass wir alle Elemente aus jeder Gruppe verwenden werden. Sie können entfernen, was Sie nicht benötigen, aus der Abhängigkeitsliste. Wenn die Abhängigkeiten festgelegt sind, führen Sie das aus Bower installieren Befehl zum Installieren der Abhängigkeiten in der Liste.

Dieser Vorgang kann eine Weile dauern, da eine große Anzahl von Dateien aus den Repositorys abgerufen wird. Wenn Sie fertig sind, sollten Sie sie im gespeichert finden bower_components Mappe.

Öffnen Sie die HTML-Datei, in der Sie die Polymerkomponenten verwenden möchten. Innerhalb des Dokumentkopfs, Verknüpfen Sie die WebComponents.js Welches ist das Polyfill für Browser, die WebComponents noch nicht unterstützen, und Importieren Sie die Komponentendateien mit HTML-Import.

Hier ist ein Beispiel:

Dieses Setup ermöglicht uns die Verwendung von , , Elemente.

Vitrinen

Hier sind einige der Web-Apps, die bereits Google Polymer verwenden.

Google

Google verwendete Google Polymer in der Google IO 2015-Website. Google Fi, der drahtlose Google-Dienst für Mobilfunkanbieter und Anbieter in Partnerschaft; und Google Music.

Benutzerdefinierte Elemente

CustomElements ist ein Hub, in dem Sie benutzerdefinierte Elemente finden, die mit Webkomponenten erstellt wurden. Es verwendet das Paper-Element, um die Liste aufzunehmen und zu erstellen. Es bietet auch eine bequeme Route für die Installation dieser Elemente über Bower und NPM.

Chrome Dev Editor

Eine Chrome-Anwendung zur Code-Bearbeitung, die überraschend gut funktioniert. Diese App verwendet die FAB-Schaltfläche, das Menü Papier und die Dialogelemente des Dialogs Papier in der Benutzeroberfläche.

Polymer Designer

Ein Tool zum Erstellen von Webanwendungen mit Polymerelementen mithilfe einer Drag & Drop-Schnittstelle.

Tägliche Aktienprognose

Ein Börsenbericht und eine Prognose, die vollständig aus Polymerelementen bestehen.

Polymerpost

Eine E-Mail-Client-App für Google Mail. Es sieht nett und fließend aus, obwohl es leider nicht voll funktionsfähig ist.

Abschließende Gedanken

Polymer hat einen enormen Umfang und es kann eine Weile dauern, bis Sie sich an alle benutzerdefinierten Elemente sowie an die API gewöhnt haben. Trotzdem werden Webkomponenten und Polymer sicherlich die Art und Weise beeinflussen, in der wir Webanwendungen erstellen. Bleiben Sie vor der Masse und lesen Sie mehr über Webkomponenten. Referenzen finden Sie unten.

Demo anzeigen
Quelle herunterladen

Nützliche Referenzen

Der Zustand der Webkomponenten
Eine detaillierte Einführung in benutzerdefinierte Elemente
Offizieller Blog von Google Polymer