Auf der letzten Google I/O kündigte Addy Osmani einige erstaunliche Entwicklerressourcen für die Erstellung von Progressive Web Applications (PWAs) an, die auf Leistung mit JavaScript-Frameworks Wert legen.
Dies war wirklich eine Teamleistung – viele Leute haben an diesen Projekten gearbeitet, um sie zum Laufen zu bringen, und es ist ein wirklich wertvoller Beitrag für die Community. Viele Leute wünschen sich eine bessere Leistung für ihr bevorzugtes Framework, können aber keine Zustimmung für Zeit und Ressourcen für ein solches Unterfangen erhalten. Die Möglichkeit, mit einer Basis aus hoher Leistung und guten Lighthouse-Scores zu beginnen, ist unglaublich wertvoll und ermöglicht es Entwicklern, sowohl die Produktivität als auch die Ergonomie spannender Frameworks zu genießen, ohne Kompromisse bei Geschwindigkeit und Benutzererlebnis einzugehen.
Hier sind einige der Highlights!
Addy hat eine Website erstellt, um einige der Vorlagen zu erkunden, die sie mit den verschiedenen PWA-Lösungen entwickelt haben, als Nachfolger des sehr beliebten TodoMVC, namens HN PWA. Sie können alle Demos und das GitHub-Repository hier erkunden. Anschließend hat er sich einige wichtige Unternehmensimplementierungen jedes Frameworks, die als PWAs neu erstellt wurden, angesehen. Während vieler Fallstudien, die Addy vorstellt, lagen die Schwergewichte bei der Entwicklung für bessere Weberlebnisse in link rel=preload, requestIdleCallback() und HTTP2 Server Push. Es gab viele Erwähnungen des PRPL-Musters, im Wesentlichen die Priorisierung dessen, was Sie zuerst verwenden werden, durch das **Pushing** kritischer Ressourcen für die anfängliche URL-Route, das **Rendern** der anfänglichen Route, das **Pre-Caching** verbleibender Routen und das **Lazy-Loading** und die Erstellung verbleibender Routen nach Bedarf. Viele der Leistungsgewinne wurden im Hinblick auf die Fähigkeit, auf Mobilgeräten innerhalb von 5 Sekunden interaktiv zu sein, und der Versuch, den Overhead des Frameworks selbst zu reduzieren, damit mehr Zeit für Ihren eigenen Anwendungscode innerhalb dieser 5 Sekunden blieb.
React
React hat angekündigt, dass Create React App jetzt standardmäßig eine PWA sein wird! Dies ist ein *großer* Erfolg. Sie verwenden jetzt Service Workers mit einer Offline-First-Caching-Strategie, Code-Splitting mit dynamischem Import(), hilfreiche Overlays für Fehler und es gibt Ihnen **1,5 Sekunden Pufferzeit** für Ihren Anwendungscode. Weitere Informationen zur Veröffentlichung hier.
Preact
Hat jetzt eine CLI! Auf der Veranstaltung angekündigt, ist dies eine ziemlich erstaunliche Entwicklung, mit der man herumspielen kann. Sie können das Projekt hier finden. Unter anderem wirklich nette Features, die Sie in der Readme durchlesen können, hat es standardmäßig einen Lighthouse-Score von 100/100 sowie satte **3 Sekunden Pufferzeit** für die Arbeit an Ihrem eigenen Anwendungscode.
Wenn Sie mit Preact nicht vertraut sind, ist es eine extrem schnelle 3-KB-React-Alternative mit derselben API, einschließlich der Verwendung von Komponenten und virtuellem DOM. Es ist ähnlich wie React, aber die geringe Dateigröße ist zentral für das Softwaredesign. Die einzige erwähnte Einschränkung ist, dass aufgrund der Betonung schlanker Builds möglicherweise Angebote im React-Ökosystem noch nicht nahtlos integriert werden müssen. Dennoch war Preact der *eindeutige Gewinner* in Bezug auf die Leistung, daher wäre ich nicht überrascht, wenn die Community diese Lösung unterstützt.
Vue
Vue hat eine PWA-Vorlage angekündigt, die direkt von Vue-cli angeboten wird und auf die Sie einfach mit vue init pwa zugreifen können.
Unter vielen großartigen Angeboten bietet es Ihnen zwei **2 Sekunden Pufferzeit** für Anwendungscode auf Mobilgeräten, Code-Splitting mit dynamischem Import(), Service Worker für Offline-Caching, und JS-Chunks werden vorab geladen oder vorab abgerufen.
Wenn Sie mit Vue nicht vertraut sind, habe ich einen Leitfaden hier verfasst. Ich denke, Vue ist ein erstaunliches Stück Software, und die Fähigkeit, alle Lighthouse-Kriterien von Anfang an zu erfüllen, ist ziemlich unglaublich. Dieser Workflow macht es so einfach, schöne und komplexe Apps zu erstellen.
Es gibt viele weitere Details, die ich in diesem Beitrag nicht behandelt habe, und Addy ist ein großartiger Redner. Er hat sogar ein Videospiel für seinen Vortrag erstellt. Es lohnt sich, ihn ganz durchzusehen, Sie können ihn hier ansehen
Nur neugierig... warum hat er Angular nicht auch erwähnt?
Okay, er erwähnt es am Ende des Videos. Es stellt sich heraus, dass Angular langsamer ist als andere. Ich bin mir nicht sicher, ob wir sie vergleichen können, aber ich bin kein JavaScript-Experte.
Wurde Polymer ausgelassen, weil es nicht als JavaScript-Framework gilt?
Ich glaube, Polymer ist im Grunde obsolet, wenn sie das zu 100 % unterstützen.
Deshalb hat Google die neue YouTube-Oberfläche in Polymer gebaut?
Polymer wurde nicht ausgelassen.
Die hnpwa-Website hat Polymer in der Liste.
React (und ähnliche Bibliotheken) ist auch kein Framework, es ist im Grunde eine Bibliothek, die es Ihnen ermöglicht, Komponenten einfach zu erstellen und sie mit einem virtuellen DOM zu rendern.
Wenn überhaupt, dann ist Polymer das eigentliche Ding, das React obsolet machen könnte, da es auf nativen APIs basiert.
Das Ionic Framework ist ebenfalls PWA-freundlich. Standard-Ionic-Anwendungen haben sowohl eine generierte Basis-Manifest.json-Datei als auch sw-toolbox.js für Service-Worker-Funktionen. Sie müssen nur den Service-Worker-Code in der index.html auskommentieren, um Ihre Ionic-App in eine PWA zu verwandeln. Das Ionic-Team arbeitet aktiv daran, die PWA-Unterstützung zu verbessern.
Das hnpwa.com-Projekt vermittelt mir das Gefühl von csszengarden.com.
Das sind ziemlich schwache Interaktionszeiten. Lighthouse schießt zu niedrig. Sie müssen die Messlatte auf 1 Sekunde oder weniger über 2G anheben.