Im vergangenen 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 durch die Core- und Paper-Elemente von Polymer sowie die Brick-Elemente unterstützt wird, die vom Team bei Mozilla entwickelt wurden.
Wenn Entwickler mit der Erstellung ihrer eigenen Elemente immer vertrauter werden und über die Entwicklung von Anwendungen nachdenken, wirft dies eine Reihe von Fragen auf:
- Wie sollten Sie die Benutzeroberfläche Ihrer Anwendung strukturieren?
- Wie erfolgt der Wechsel zwischen verschiedenen Bundesstaaten?
- Mit welchen Strategien lässt sich die Leistung verbessern?
- Und 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 entwickelte und den Prozess analysierte, den ich zur Entwicklung durchlaufen habe. Folgendes habe ich mir überlegt:
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 Kernsymbolleiste und die Papiersymbol-Schaltfläche.
...und kombinieren Sie sie mithilfe der Kraft der Komposition mit einer beliebigen Anzahl von Elementen, um ein Anwendungsgerüst zu erstellen.
Sobald Sie ein allgemeines Gerüst haben, können Sie Ihre eigenen CSS-Designs anwenden, um es in eine für Ihre Marke passende Erfahrung zu verwandeln. Das Schöne an dieser Vorgehensweise mit Komponenten ist, dass Sie damit sehr unterschiedliche Erfahrungen erstellen können, während Sie mit derselben App die Grundelemente erstellen, die Sie erstellen. Sobald du ein Grundgerüst parat hast, kannst du über deine Inhalte nachdenken.
Ein Element, das sich besonders gut für den Umgang mit vielen Inhalten eignet, ist core-list.
Das core-list kann mit einer Datenquelle (im Grunde ein Objekt-Array) verbunden werden. Für jedes Element im Array wird eine Vorlageninstanz generiert. In der Vorlage können Sie die Leistung des Datenbindungssystems von Polymer nutzen, um Ihre Inhalte schnell zu verknüpfen.
Ü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 ihnen navigieren können.
core-animated-pages ist zwar noch ein experimentelles Element, stellt aber ein Plug-in-Animationssystem bereit, das für den Übergang zwischen verschiedenen Status 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 Projektanforderungen gültig sein.
Ein imperativer Router (z. B. Flatiron's Director) kann eine übereinstimmende Route abhören und core-animated-pages dann anweisen, das ausgewählte Element zu aktualisieren.
Dies kann nützlich sein, wenn Sie nach der Zuordnung einer Route noch etwas tun müssen, bevor der nächste Abschnitt übergangen wurde.
Dagegen kann ein deklarativer Router (z. B. app-router) Routing und core-animated-pages in einem einzigen Element kombinieren, sodass die Verwaltung der beiden vereinfacht wird.
Wenn Sie eine genauere Steuerung wünschen, können Sie sich eine Bibliothek wie more-routing ansehen, die mithilfe von Datenbindung mit core-animated-pages kombiniert werden kann und möglicherweise das Beste aus beiden Welten bietet.
Leistung
Wenn Ihre Anwendung neue Formen annimmt, müssen Sie Leistungsengpässe im Auge behalten, insbesondere im Zusammenhang mit dem Netzwerk, da dies oft der langsamste Teil einer mobilen Webanwendung ist.
Ein einfacher Leistungsvorteil entsteht durch das bedingte Laden der Webkomponenten-Polyfills.
Es gibt keinen Grund, all diese Kosten zu verursachen, wenn die Plattform bereits vollen Support bietet. In jedem Release des neuen webcomponents.js-Repositorys wurden die Polyfills auch in eigenständige 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>
Durch die Ausführung aller HTML-Importe mit einem Tool wie Vulcanize können Sie außerdem erhebliche Netzwerkvorteile erzielen.
Die Sense 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, handelt es sich nicht wirklich um eine mobile App. Derzeit können Sie den abgegrenzten Anwendungscache für die Offline-Nutzung Ihrer Ressourcen verwenden. Mit Blick in die Zukunft sollte der Servicemitarbeiter jedoch schon bald die Offline-Entwicklung viel einfacher gestalten können.
Jake Archibald hat vor Kurzem ein tolles Kochbuch mit Service Worker-Mustern veröffentlicht, aber ich möchte Ihnen einen schnellen Einstieg geben:
Die Installation eines Service Workers lässt sich ganz einfach beenden. Erstellen Sie eine worker.js-Datei und registrieren Sie sie, wenn Ihre Anwendung gestartet wird.
Sie müssen worker.js im Stammverzeichnis Ihrer Anwendung platzieren, damit sie Anfragen von jedem Pfad in Ihrer Anwendung abfangen kann.
Im Installations-Handler des Workers speichere ich eine Bootslast an Ressourcen (einschließlich der Daten für die App).
Dadurch kann meine App dem Nutzer mindestens ein Fallback anbieten, wenn er offline darauf zugreift.
Nur Mut!
Web Components 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 erarbeiten. Die oben genannten Lösungen sind zwar ein guter Ausgangspunkt, es gibt jedoch noch viel mehr zu lernen. Weiter gehts mit der Entwicklung besserer Apps!