Im letzten Jahr hat das Polymer-Team viel Zeit damit verbracht, Entwicklern beizubringen, wie sie ihre eigenen Elemente erstellen können. Dies hat zu einem schnell wachsenden Ökosystem geführt, das größtenteils von den Kern- und Papierelementen von Polymer sowie den vom Team bei Mozilla entwickelten Ziegelsteinen unterstützt wird.
Wenn sich Entwickelnde mit der Erstellung ihrer eigenen Elemente vertraut machen und beginnen, über das Erstellen von Anwendungen nachzudenken, wirft dies eine Reihe von Fragen auf:
- Wie sollten Sie die Benutzeroberfläche Ihrer Anwendung strukturieren?
- Wie funktioniert der Wechsel zwischen verschiedenen Bundesstaaten?
- Mit welchen Strategien lässt sich die Leistung verbessern?
- Wie sollten Sie Nutzern ein Offline-Erlebnis bieten?
Für den Chrome Dev Summit habe ich versucht, diese Fragen zu beantworten, indem ich eine kleine Kontakte-Anwendung erstellt und den Prozess analysiert hat, den ich zur Entwicklung durchlaufen habe. Folgendes ist mir eingefallen:
Struktur
Das Aufteilen einer Anwendung in modulare Teile, die kombiniert und wiederverwendet werden können, ist ein zentraler Mandant von Webkomponenten. Die Kern-* und Papier*-Elemente von Polymer erleichtern den Einstieg in kleine Elemente wie die Papiersymbolleiste und die Papiersymbol-Schaltfläche.
Und dank der Möglichkeit der Zusammensetzung können Sie diese mit einer beliebigen Anzahl von Elementen kombinieren, um ein Anwendungsgerüst zu erstellen.
Sobald Sie ein allgemeines Grundgerüst haben, können Sie Ihre eigenen CSS-Stile anwenden, um es in ein für Ihre Marke unverwechselbares Erlebnis zu verwandeln. Das Schöne an dieser Vorgehensweise mit Komponenten ist, dass Sie damit sehr unterschiedliche Umgebungen erstellen können, während Sie dieselben App-Elemente erstellen. Nachdem du ein Grundgerüst geschaffen hast, kannst du dich nun über die Inhalte Gedanken machen.
Ein Element, das sich besonders gut für den Umgang mit vielen Inhalten eignet, ist core-list.
Das core-list kann mit einer Datenquelle verbunden werden (also einem Array von Objekten). Für jedes Element im Array wird eine Vorlageninstanz festgelegt. In der Vorlage können Sie die Leistung des Datenbindungssystems von Polymer nutzen, um Ihre Inhalte schnell zu verdrahten.
Übergänge
Nachdem Sie die verschiedenen Bereiche Ihrer App entworfen und implementiert haben, besteht die nächste Aufgabe darin, herauszufinden, wie Sie tatsächlich zwischen diesen Abschnitten wechseln können.
core-animated-pages ist zwar noch ein experimentelles Element, bietet aber ein Plug-in-Animationssystem, das für den Wechsel zwischen verschiedenen Zuständen in Ihrer App verwendet werden kann.
Animationen sind jedoch nur die Hälfte des Puzzles. Eine Anwendung muss diese Animationen mit einem Router kombinieren, um die URLs richtig verwalten zu können.
Bei Webkomponenten gibt es zwei Varianten des Routings: imperativ und deklarativ. Die Kombination von core-animated-pages mit beiden Ansätzen kann je nach Ihren Projektanforderungen gültig sein.
Ein imperativer Router (z. B. Flatiron's Director) kann auf eine übereinstimmende Route warten und core-animated-pages dann anweisen, das ausgewählte Element zu aktualisieren.
Dies kann nützlich sein, wenn Sie nach der Übereinstimmung mit einer Route noch weitere Schritte ausführen müssen, bevor der nächste Abschnitt übernommen wurde.
Andererseits kann ein deklarativer Router (wie App-Router) Routing und core-animated-pages tatsächlich in einem Element kombinieren, sodass die Verwaltung der beiden vereinfacht wird.
Wenn Sie eine genauere Kontrolle wünschen, können Sie sich eine Bibliothek wie mehr Weiterleitung ansehen, die über Datenbindung mit core-animated-pages kombiniert werden kann und möglicherweise das Beste aus beiden Welten bietet.
Leistung
Wenn Ihre Anwendung Gestalt annimmt, müssen Sie Leistungsengpässe im Auge behalten, insbesondere alle Netzwerkprobleme, da dies oft der langsamste Teil einer mobilen Webanwendung ist.
Ein einfacher Leistungsgewinn ergibt sich aus dem bedingten Laden der Webkomponenten-Polyfills.
Es gibt keinen Grund, all diese Kosten in Rechnung zu stellen, wenn die Plattform bereits vollen Support bietet. In jeder Version des neuen webcomponents.js-Repositorys wurden die Polyfills auch in eigenständigen Dateien aufgeteilt. Dies ist hilfreich, wenn Sie eine Teilmenge der Polyfills bedingt laden möchten.
<script>
if ('import' in document.createElement('link')) {
// HTML Imports are supported
} else {
document.write(
'<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
);
}
</script>
Außerdem lassen sich durch die Ausführung aller HTML-Importe über ein Tool wie Vulcanize deutliche Netzwerkvorteile erzielen.
Vulcanize verkettet deine Importe zu einem einzigen Bundle, wodurch die Anzahl der HTTP-Anfragen deiner App erheblich reduziert wird.
Offline
Aber das Erstellen einer leistungsfähigen App reicht nicht aus, um das Dilemma eines Nutzers mit wenig oder gar keiner Konnektivität zu lösen. Mit anderen Worten: Wenn Ihre App offline nicht funktioniert, dann ist es keine mobile App. Heute können Sie den Cache für neue Anwendungen verwenden, um Ihre Ressourcen offline zu nutzen. Mit Service Worker wird die Offline-Entwicklung jedoch in Zukunft wesentlich verbessert.
Jake Archibald hat vor Kurzem ein tolles Cookbook mit Service Worker-Mustern veröffentlicht, aber ich möchte Ihnen einen schnellen Einstieg geben:
Die Installation eines Service Workers geht ganz einfach. Erstellen Sie eine worker.js-Datei und registrieren Sie sie, wenn Ihre Anwendung gestartet wird.
Es ist wichtig, dass sich das worker.js im Stammverzeichnis der Anwendung befindet, damit es Anfragen von jedem Pfad in der App abfangen kann.
Im Installations-Handler des Workers speichere ich eine Bootslast an Ressourcen im Cache, einschließlich der Daten, die der App zugrunde liegen.
So kann meine App dem Nutzer mindestens eine Alternative bieten, wenn er offline darauf zugreift.
Nur Mut!
Webkomponenten sind eine große Ergänzung der Webplattform und befinden sich noch in den Kinderschuhen. Wenn sie in immer mehr Browsern landen, liegt es an uns, der Entwickler-Community, die Best Practices für die Strukturierung unserer Anwendungen zu ermitteln. Die oben genannten Lösungen bieten einen Ausgangspunkt, aber es gibt noch viel mehr zu lernen. Weiter gehts mit der Entwicklung besserer Apps!