Im letzten Jahr hat das Polymer-Team viel Zeit damit verbracht, Entwicklern zu zeigen, wie sie eigene Elemente erstellen. Dies hat zu einem schnell wachsenden Ökosystem geführt, das vor allem 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 damit beginnen, über die Entwicklung von Anwendungen nachzudenken, stellen sich eine Reihe von Fragen:
- Wie sollten Sie die Benutzeroberfläche Ihrer Anwendung strukturieren?
- Wie wechseln Sie zwischen den verschiedenen Status?
- Welche Strategien gibt es, um die Leistung zu verbessern?
- Und wie sollten Sie eine Offlinefunktion anbieten?
Für das Chrome Dev Summit habe ich versucht, diese Fragen zu beantworten, indem ich eine kleine Kontaktanwendung erstellt und den Prozess analysiert habe, den ich dabei durchlaufen habe. Ich habe Folgendes gefunden:
Struktur
Eine Anwendung in modulare Teile zu zerlegen, die kombiniert und wiederverwendet werden können, ist ein zentraler Grundsatz von Webkomponenten. Mit den core-*- und paper-*-Elementen von Polymer können Sie ganz einfach mit kleinen Elementen wie paper-toolbar und paper-icon-button beginnen.
Und durch die Komposition können Sie sie mit beliebig vielen Elementen kombinieren, um ein App-Scaffold zu erstellen.
Sobald Sie ein generischs Scaffold haben, können Sie Ihre eigenen CSS-Stile anwenden, um es in eine für Ihre Marke einzigartige Umgebung zu verwandeln. Der Vorteil dabei ist, dass Sie mit denselben App-Entwicklungselementen sehr unterschiedliche Funktionen erstellen können. Sobald Sie ein Gerüst haben, können Sie sich Gedanken über die Inhalte machen.
Ein Element, das sich besonders gut für viele 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 dann eine Vorlagen-Instanz erstellt. In der Vorlage können Sie das leistungsstarke Datenbindungssystem 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 zwischen ihnen wechseln.
core-animated-pages ist zwar noch ein experimentelles Element, bietet aber ein Plug-in-Animationssystem, mit dem Sie zwischen verschiedenen Status in Ihrer Anwendung wechseln können.
Die Animation ist aber nur die halbe Miete. Eine Anwendung muss diese Animationen mit einem Router kombinieren, um ihre URLs richtig zu verwalten.
Bei Webkomponenten gibt es zwei Arten von Routing: imperativ und deklarativ. Je nach den Anforderungen Ihres Projekts kann es sinnvoll sein, core-animated-pages mit einem der beiden Ansätze zu kombinieren.
Ein imperativer Router (z. B. Director von Flatiron) kann auf eine übereinstimmende Route warten und dann core-animated-pages anweisen, das ausgewählte Element zu aktualisieren.
Das kann nützlich sein, wenn Sie nach einer Routenübereinstimmung noch etwas tun müssen, bevor der nächste Abschnitt übernommen wird.
Ein deklarativer Router (z. B. app-router) kann hingegen Routing und core-animated-pages in einem einzigen Element kombinieren, sodass die Verwaltung der beiden Elemente optimiert wird.
Wenn Sie eine detailliertere Steuerung wünschen, können Sie sich eine Bibliothek wie more-routing ansehen. Diese kann mit core-animated-pages über Datenbindung kombiniert werden und bietet möglicherweise das Beste aus beiden Welten.
Leistung
Während Ihre Anwendung Gestalt annimmt, müssen Sie Leistungsengpässe im Auge behalten, insbesondere solche, die mit dem Netzwerk zusammenhängen, da dies oft der langsamste Teil einer mobilen Webanwendung ist.
Eine einfache Leistungssteigerung ergibt sich durch das bedingte Laden der Web Components-Polyfills.
Es gibt keinen Grund, diese Kosten zu tragen, wenn die Plattform bereits vollständig unterstützt wird. In jeder Version des neuen Webcomponents.js-Repositories wurden die Polyfills auch in eigenständige Dateien unterteilt. 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>
Außerdem lassen sich durch die Ausführung aller HTML-Importe über ein Tool wie Vulcanize erhebliche Netzwerkgewinne erzielen.
Durch die Vulkanisierung werden Ihre Importe in einem einzigen Bundle zusammengeführt, wodurch die Anzahl der von Ihrer App gesendeten HTTP-Anfragen erheblich reduziert wird.
Offline
Aber nur eine leistungsstarke App zu entwickeln, löst das Dilemma von Nutzern mit wenig oder keiner Internetverbindung nicht. Mit anderen Worten: Wenn Ihre App nicht offline funktioniert, ist sie keine echte mobile App. Derzeit können Sie den viel geschmähten Anwendungscache verwenden, um Ihre Ressourcen offline zu stellen. In Zukunft sollten Service Worker die Offlineentwicklung jedoch viel einfacher machen.
Jake Archibald hat vor Kurzem ein erstaunliches Kochbuch mit Service Worker-Mustern veröffentlicht. Ich möchte Ihnen aber einen schnellen Einstieg bieten:
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. So können Anfragen von jedem Pfad in Ihrer App abgefangen werden.
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 Nutzern zumindest eine Fallback-Funktion bieten, wenn sie offline darauf zugreifen.
Nur Mut!
Webkomponenten sind eine große Bereicherung für die Webplattform und befinden sich noch in der Entwicklungsphase. Wenn sie in immer mehr 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. Jetzt können Sie noch bessere Apps entwickeln!