Im vergangenen Jahr hat das Polymer-Team viel Zeit damit verbracht, Entwicklern beizubringen, wie sie eigene Elemente erstellen. Dies hat zu einem schnell wachsenden Ökosystem geführt, das zum großen Teil durch die Core- und Paper-Elemente von Polymer und die Brick-Elemente des Mozilla-Teams unterstützt wird.
Wenn Entwickler sich mit dem Erstellen eigener Elemente vertraut machen und anfangen, über das Erstellen von Anwendungen nachzudenken, ergeben sich einige Fragen:
- Wie sollten Sie die Benutzeroberfläche Ihrer Anwendung strukturieren?
- Wie wechseln Sie zwischen verschiedenen Status?
- Welche Strategien gibt es, um die Leistung zu verbessern?
- Und wie sollten Sie eine Offline-Erfahrung bieten?
Für den Chrome Dev Summit habe ich versucht, diese Fragen zu beantworten, indem ich eine kleine Kontakte-App entwickelt und den Entwicklungsprozess analysiert habe. Das ist mein Vorschlag:
Struktur
Die Aufteilung einer Anwendung in modulare Teile, die kombiniert und wiederverwendet werden können, ist ein zentraler Grundsatz von Webkomponenten. Mit den Elementen „core-*“ und „paper-*“ von Polymer können Sie ganz einfach mit kleinen Komponenten wie paper-toolbar und paper-icon-button beginnen.
Durch die Leistungsfähigkeit der Komposition können Sie sie mit einer beliebigen Anzahl von Elementen kombinieren, um ein Anwendungsgerüst zu erstellen.
Sobald Sie ein allgemeines Gerüst haben, können Sie Ihre eigenen CSS-Stile anwenden, um es in eine für Ihre Marke einzigartige Darstellung zu verwandeln. Der Vorteil von Komponenten ist, dass Sie damit sehr unterschiedliche Anwendungen erstellen können, ohne auf andere App-Building-Primitive zurückgreifen zu müssen. Wenn Sie ein Gerüst haben, können Sie sich Gedanken über die Inhalte machen.
Ein Element, das sich besonders gut für die Verarbeitung vieler Inhalte eignet, ist das core-list.
Die core-list kann mit einer Datenquelle (im Grunde ein Array von Objekten) verbunden werden. Für jedes Element im Array wird eine Vorlageninstanz erstellt. In der Vorlage können Sie das Datenbindungssystem von Polymer nutzen, um Ihre Inhalte schnell zu verknüpfen.
Übergänge
Nachdem Sie die verschiedenen Abschnitte Ihrer App entworfen und implementiert haben, müssen Sie als Nächstes herausfinden, wie Sie zwischen ihnen navigieren.
core-animated-pages ist zwar noch ein experimentelles Element, bietet aber ein einfügbares Animationssystem, mit dem Sie Übergänge zwischen verschiedenen Status in Ihrer Anwendung erstellen können.
Animationen sind aber nur die halbe Miete. Eine Anwendung muss sie mit einem Router kombinieren, um ihre URLs richtig zu verwalten.
In der Welt der Webkomponenten gibt es zwei Arten von Routing: imperativ und deklarativ. Die Kombination von core-animated-pages mit einem der beiden Ansätze kann je nach Projektanforderungen sinnvoll sein.
Ein imperativer Router (z. B. Flatiron Director) kann auf eine übereinstimmende Route warten und dann core-animated-pages anweisen, das ausgewählte Element zu aktualisieren.
Dies kann nützlich sein, wenn Sie nach dem Abgleich einer Route und vor dem Übergang zum nächsten Abschnitt bestimmte Aktionen ausführen müssen.
Ein deklarativer Router (wie app-router) kann Routing und core-animated-pages in einem einzigen Element kombinieren, sodass die Verwaltung der beiden einfacher wird.
Wenn Sie eine genauere Steuerung wünschen, können Sie sich eine Bibliothek wie more-routing ansehen, die mit core-animated-pages über die Datenbindung kombiniert werden kann und Ihnen möglicherweise das Beste aus beiden Welten bietet.
Leistung
Während Sie Ihre Anwendung entwickeln, müssen Sie Leistungsengpässe im Auge behalten, insbesondere alles, was mit dem Netzwerk zusammenhängt, da dies oft der langsamste Teil einer mobilen Webanwendung ist.
Eine einfache Möglichkeit, die Leistung zu verbessern, ist das bedingte Laden der Web Components-Polyfills.
Es gibt keinen Grund, diese Kosten zu verursachen, wenn die Plattform bereits vollständig unterstützt wird. In jedem Release des neuen webcomponents.js-Repositorys wurden die Polyfills auch in eigenständige Dateien aufgeteilt. Das 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>
Wenn Sie alle Ihre HTML-Importe über ein Tool wie Vulcanize ausführen, können Sie auch erhebliche Netzwerkverbesserungen erzielen.
Mit Vulcanize werden Ihre Importe in einem einzigen Bundle zusammengefasst. Dadurch wird die Anzahl der HTTP-Anfragen, die Ihre App stellt, erheblich reduziert.
Offline
Eine leistungsstarke App zu entwickeln, löst jedoch nicht das Dilemma eines Nutzers mit geringer oder keiner Verbindung. Wenn Ihre App nicht offline funktioniert, ist sie also keine echte mobile App. Derzeit können Sie den viel gescholtenen Anwendungs-Cache verwenden, um Ihre Ressourcen offline zu speichern. In Zukunft sollte Service Worker die Offline-Entwicklung jedoch deutlich vereinfachen.
Jake Archibald hat vor Kurzem ein tolles Kochbuch mit Service Worker-Mustern veröffentlicht. Hier finden Sie eine Kurzanleitung für den Einstieg:
Die Installation eines Service Workers ist ganz einfach. Erstellen Sie eine worker.js-Datei und registrieren Sie sie beim Starten Ihrer Anwendung.
Es ist wichtig, dass Sie worker.js im Stammverzeichnis Ihrer Anwendung platzieren, damit Anfragen von jedem Pfad in Ihrer App abgefangen werden können.
Im Installations-Handler des Workers speichere ich eine Menge Ressourcen im Cache, einschließlich der Daten, die die App unterstützen.
So kann meine App dem Nutzer zumindest eine Fallback-Funktion bieten, wenn er offline darauf zugreift.
Nur Mut!
Webkomponenten sind eine große Bereicherung für die Webplattform und stecken noch in den Kinderschuhen. Wenn sie in weiteren Browsern verfügbar sind, liegt es an uns, der Entwickler-Community, die Best Practices für die Strukturierung unserer Anwendungen zu ermitteln. Die oben genannten Lösungen sind ein guter Ausgangspunkt, aber es gibt noch viel zu lernen. Auf zu besseren Apps!