Weiterentwicklung der Web-Framework-Umgebung

Chrome arbeitet mit Open-Source-Frameworks zusammen, um das Web zu verbessern

Houssein Djirdeh

Chrome leistet einen aktiven Beitrag zum Web-Framework-Ökosystem. In unserem Vortrag auf dem Chrome Dev Summit 2019 haben wir darüber gesprochen, woran wir im vergangenen Jahr gearbeitet haben.

Im Folgenden finden Sie eine ausführliche Zusammenfassung des Vortrags mit zusätzlichen Details und Ressourcen.

Wie können wir das Web verbessern?

Das Ziel aller Mitglieder des Chrome-Teams ist es, das Web zu verbessern. Wir arbeiten daran, Browser-APIs und V8 – die JavaScript- und WebAssembly-Engine, die Chrome zugrunde liegt – zu verbessern, damit Entwickler Funktionen zur Verfügung haben, mit denen sie großartige Webseiten erstellen können. Außerdem versuchen wir, Websites zu verbessern, die bereits in der Produktion sind, indem wir auf vielfältige Weise zu Open-Source-Tools beitragen.

Die meisten Web entwickler verwenden nach Möglichkeit Open-Source-Tools und möchten keine vollständig benutzerdefinierte Infrastruktur erstellen. Clientseitige JavaScript-Frameworks und UI-Bibliotheken machen einen wachsenden Teil der Open-Source-Nutzung aus. Daten zu den drei beliebtesten clientseitigen Frameworks und Bibliotheken, React, Angular und Vue, zeigen Folgendes:

• 72% der Teilnehmer der ersten jährlichen Umfrage von MDN unter Webentwicklern und -designern verwenden mindestens eines dieser Frameworks und Bibliotheken.
• Über 320.000 Websites in den 5 Millionen URLs, die von HTTP Archive analysiert wurden, verwenden mindestens eines dieser Frameworks und Bibliotheken.
• Nach Zeitaufwand gruppiert, verwenden 30 der 100 besten URLs mindestens eines dieser Frameworks und Bibliotheken. (Die Recherche basiert auf internen Daten.)

Das bedeutet, dass bessere Open-Source-Tools direkt zu einem besseren Web führen können. Deshalb arbeiten Chrome-Entwickler jetzt direkt mit externen Framework- und Bibliotheksautoren zusammen.

Beiträge zu Web-Frameworks

Frameworks, die häufig zum Erstellen und Strukturieren von Webseiten verwendet werden, lassen sich in zwei Kategorien einteilen:

• UI-Frameworks (oder -Bibliotheken) wie Preact, React oder Vue, mit denen die Ansichtsebene einer Anwendung gesteuert werden kann (z. B. über ein Komponentenmodell).
• Web-Frameworks wie Next.js, Nuxt.js und Gatsby, die ein End-to-End-System mit integrierten Funktionen wie serverseitigem Rendering bieten. Diese Frameworks verwenden in der Regel ein UI-Framework oder eine UI-Bibliothek für die Ansichtsebene.

Entwickler können Frameworks auch nicht verwenden. Wenn sie jedoch eine Bibliothek für die Ansichtsebene, einen Router, ein Stilsystem, einen Server-Renderer usw. zusammenfügen, erstellen sie oft eine eigene Art von Framework. Web-Frameworks kümmern sich standardmäßig um viele dieser Probleme.

Im Rest dieses Beitrags werden viele Verbesserungen vorgestellt, die kürzlich in verschiedenen Frameworks und Tools eingeführt wurden, darunter auch Beiträge des Chrome-Teams.

Angular

Das Angular-Team hat eine Reihe von Verbesserungen an Version 8 des Frameworks vorgenommen:

• Standardmäßig differenzielle Bereitstellung um unnötige Polyfills für neuere Browser zu minimieren.

• Unterstützung für die dynamische Importsyntax für das Lazy Loading von Routen.
• Unterstützung für Web-Worker, um Vorgänge in einem Hintergrundthread auszuführen, der vom Hauptthread getrennt ist.
• Ivy, die neue Rendering-Engine von Angular, die eine bessere Leistung bei der erneuten Kompilierung und eine Reduzierung der Bundle-Größen bietet, ist im Vorschaumodus für bestehende Projekte verfügbar.

Weitere Informationen zu diesen Verbesserungen finden Sie unter Version 8 von Angular . Das Chrome-Team freut sich auf die enge Zusammenarbeit im nächsten Jahr, wenn weitere Funktionen eingeführt werden.

Next.js

Next.js ist ein Web-Framework, das React als Ansichtsebene verwendet. Neben einem UI-Komponentenmodell, das viele Entwickler von einem clientseitigen Framework erwarten, bietet Next.js eine Reihe von integrierten Standardfunktionen:

• Routing mit standardmäßiger Codeaufteilung
• Kompilierung und Bündelung (mit Babel und Webpack)
• Serverseitiges Rendering
• Mechanismen zum Abrufen von Daten auf Seitenebene
• Gekapselte Stile (mit styled-jsx)

Next.js ist für kleinere Bundle-Größen optimiert. Das Chrome-Team hat Bereiche identifiziert, in denen wir die Leistung weiter verbessern können. Weitere Informationen finden Sie in den jeweiligen RFCs (Requests for Comments) und PRs (Pull Requests):

1. Eine verbesserte Webpack-Chunking-Strategie, die detailliertere Bundles ausgibt und so die Menge an doppeltem Code reduziert, der über mehrere Routen abgerufen wird (RFC, PR).
2. Differenzielle Bereitstellung mit dem Muster „module/nomodule“ , mit dem die Gesamtmenge an JavaScript in Next.js-Apps ohne Code änderungen um bis zu 20% reduziert werden kann (RFC, PR).
3. Verbessertes Tracking von Leistungsmesswerten mit der User Timing API (PR).

Wir untersuchen auch andere Funktionen, um die Nutzer- und Entwicklererfahrung bei der Verwendung von Next.js zu verbessern, z. B.:

• Aktivieren des gleichzeitigen Modus, um progressives oder teilweises Hydrieren von Komponenten zu ermöglichen.
• Ein auf Webpack basierendes Konformitätssystem, das alle Quelldateien und generierten Assets analysiert, um bessere Fehler und Warnungen zu liefern (RFC).

Nuxt.js

Nuxt.js ist ein Web-Framework, das Vue.js mit verschiedenen Bibliotheken kombiniert, um eine vordefinierte Einrichtung zu ermöglichen. Ähnlich wie Next.js bietet es viele Funktionen:

• Routing mit standardmäßiger Codeaufteilung
• Kompilierung und Bündelung (mit Babel und Webpack)
• Serverseitiges Rendering
• Asynchrones Abrufen von Daten für jede Seite
• Standarddatenspeicher (Vuex)

Wir arbeiten nicht nur direkt an der Verbesserung der Leistung verschiedener Tools, sondern haben auch den Framework-Fonds erweitert, um mehr Open-Source Frameworks und -Bibliotheken finanziell zu unterstützen. Dank unserer jüngsten Unterstützung für Nuxt.js werden in naher Zukunft einige Funktionen eingeführt, darunter intelligenteres serverseitiges Rendering und Bild optimierungen.

Babel

Wir haben auch Fortschritte bei der Verbesserung der Leistung eines wichtigen zugrunde liegenden Tools in fast allen genannten Frameworks gemacht: Babel.

Babel kompiliert Code mit neuerer Syntax in Code, den verschiedene Browser verstehen können. Es ist üblich, @babel/preset-env zu verwenden, um moderne Browser anzusprechen. Dabei können verschiedene Browserziele angegeben werden, um genügend Polyfills für alle ausgewählten Umgebungen bereitzustellen. Eine Möglichkeit, die Ziele anzugeben, ist die Verwendung von <script type="module">, um alle Browser anzusprechen, die ES Module unterstützen.

Um diesen Fall zu optimieren, haben wir ein brandneues Preset eingeführt: @babel/preset-modules. Anstatt moderne Syntax in ältere Syntax zu konvertieren, um Browserfehler zu vermeiden, behebt preset-modules jeden spezifischen Fehler, indem es in die nächstgelegene nicht fehlerhafte moderne Syntax umgewandelt wird. So entsteht moderner Code, der fast unverändert an die meisten Browser gesendet werden kann.

Entwickler, die bereits preset-env verwenden, profitieren ebenfalls von diesen Optimierungen, ohne etwas tun zu müssen, da sie bald auch in preset-env integriert werden.

Nächste Schritte

Durch die enge Zusammenarbeit mit Open-Source-Frameworks und -Bibliotheken, um bessere Nutzererlebnisse zu bieten, kann das Chrome-Team erkennen, was für Nutzer und Entwickler gleichermaßen wichtig ist.

Wenn Sie an einem Web-Framework, einer UI-Bibliothek oder einer anderen Art von Web-Tool (Bundler, Compiler, Linter) arbeiten, bewerben Sie sich für den Framework-Fonds!