Weiterentwicklung der Web-Framework-Umgebung

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

Houssein Djirdeh

Chrome leistet einen aktiven Beitrag zu Web-Frameworks. In unserem Vortrag auf dem Chrome Dev Summit 2019 gehen wir darauf ein, woran wir im vergangenen Jahr gearbeitet haben.

Im Folgenden finden Sie eine ausführliche Zusammenfassung des Gesprächs mit weiteren 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 zentrale JavaScript- und WebAssembly-Engine für Chrome – zu verbessern, sodass Entwickler mit Funktionen ausgestattet sind, mit denen sie tolle Webseiten erstellen können. Außerdem versuchen wir, Websites zu verbessern, die sich bereits in der Produktion befinden, indem wir in vielerlei Hinsicht einen Beitrag zu Open-Source-Tools leisten.

Die meisten Webentwickler verlassen sich nach Möglichkeit auf Open-Source-Tools und ziehen es vor, keine vollständig benutzerdefinierte Infrastruktur aufzubauen. 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 First Annual Web Developer & Designer Survey des MDN verwenden mindestens eines dieser Frameworks und einer dieser Bibliotheken.
• Mehr als 320.000 Websites unter den Top 5 Millionen vom HTTP-Archiv analysierten URLs verwenden mindestens eines dieser Frameworks und Bibliotheken.
• Wenn Sie nach der aufgewendeten Zeit gruppiert sind, verwenden 30 der Top-100-URLs mindestens eines dieser Frameworks und Bibliotheken. (Es wurden interne Daten recherchiert.)

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

Beiträge zu Web-Frameworks

Es gibt zwei Kategorien von Frameworks, die häufig zum Erstellen und Strukturieren von Webseiten verwendet werden:

• UI-Frameworks (oder Bibliotheken) wie Preact, React oder Vue, die Kontrolle über die Ansichtsebene einer Anwendung bieten (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 nutzen in der Regel ein UI-Framework oder eine Bibliothek für die Ansichtsebene.

Entwickler können sich dafür entscheiden, keine Frameworks zu verwenden, aber wenn sie eine Ansichtsebenenbibliothek, einen Router, ein Stilsystem, einen Server-Renderer usw. kombinieren, erstellen sie oft ihre eigene Art von Framework. Web-Frameworks decken viele dieser Anliegen standardmäßig ab, selbst wenn es umsichtig ist.

Im weiteren Verlauf dieses Artikels werden viele Verbesserungen vorgestellt, die in letzter Zeit in verschiedenen Frameworks und Tools umgesetzt wurden, einschließlich Beiträgen des Chrome-Teams.

Angular

Das Angular-Team hat eine Reihe von Verbesserungen für Version 8 des Frameworks veröffentlicht:

• Differenzielles Laden dient standardmäßig dazu, nicht benötigte Polyfills für neuere Browser zu minimieren.

• Unterstützung der standardmäßigen dynamischen Importsyntax für Lazy-Loading-Routen.
• Web-Worker-Unterstützung zum Ausführen von Vorgängen in einem Hintergrundthread, der vom Hauptthread getrennt ist
• Ivy, die neue Rendering-Engine von Angular, bietet eine bessere Leistung bei der Neukompilierung und eine Reduzierung der Bundle-Größen. Sie ist im Vorschaumodus für bestehende Projekte verfügbar.

Weitere Informationen zu diesen Verbesserungen finden Sie in Version 8 von Angular. Das Chrome-Team freut sich auf die enge Zusammenarbeit mit ihnen im nächsten Jahr, sobald weitere Funktionen verfügbar sind.

Next.js

Next.js ist ein Web-Framework, das React als Ansichtsebene verwendet. Zusätzlich zu 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
• Kapselte Stile (mit styled-jsx)

Next.js optimiert die Paketgröße und das Chrome-Team hat Bereiche gefunden, in denen wir die Leistung weiter verbessern können. Weitere Informationen zu den einzelnen Tags finden Sie in den jeweiligen Anfragen für Kommentare (RFCs) und Pull-Anfragen (PRs):

1. Eine verbesserte Webpack-Chunking-Strategie, die detailliertere Bundles ausgibt und so die Menge an dupliziertem Code reduziert, der über mehrere Routen abgerufen wird (RFC, PR).
2. Differenzielles Laden mit dem module/nomodule-Muster, das die Gesamtzahl des JavaScript in Next.js-Anwendungen ohne Codeänderungen um bis zu 20% reduzieren kann (RFC, PR).
3. Verbessertes Tracking von Leistungsmesswerten, bei denen die User Timing API (PR) verwendet wird.

Wir testen auch weitere Funktionen, um die Verwendung von Next.js für Nutzer und Entwickler zu verbessern. Dazu gehören:

• Aktivieren des gleichzeitigen Modus, um die progressive oder teilweise Hydration von Komponenten freizuschalten.
• Ein Webpack-basiertes Konformitätssystem, das alle Quelldateien analysiert und Assets generiert, um Fehler und Warnungen besser erkennen zu können (RFC).

Nuxt.js

Nuxt.js ist ein Web-Framework, das Vue.js mit verschiedenen Bibliotheken kombiniert, um eine sinnvolle Einrichtung zu ermöglichen. Ähnlich wie Next.js enthält sie viele vorkonfigurierte Funktionen:

• Routing mit standardmäßiger Codeaufteilung
• Kompilierung und Bündelung (mit Babel und Webpack)
• Serverseitiges Rendering
• Asynchroner Datenabruf 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. Aufgrund der kürzlich erfolgten Unterstützung von Nuxt.js sind einige Features geplant, die in naher Zukunft eingeführt werden, darunter intelligentes Server-Rendering und Bildoptimierungen.

Babel

Außerdem haben wir Fortschritte bei der Verbesserung der Leistung eines wichtigen zugrunde liegenden Tools in fast allen oben genannten Frameworks Babel gemacht.

Babel kompiliert Code mit neuerer Syntax in Code, den verschiedene Browser verstehen können. In der Regel wird @babel/preset-env für die Ausrichtung auf moderne Browser verwendet, in denen verschiedene Browserziele angegeben werden können, um genügend Polyfilling für alle ausgewählten Umgebungen bereitzustellen. Eine Möglichkeit, die Ziele anzugeben, besteht darin, mit <script type="module"> ein Targeting auf alle Browser vorzunehmen, die ES-Module unterstützen.

Wir haben eine brandneue Voreinstellung eingeführt: @babel/preset-modules. Anstatt die moderne Syntax in eine ältere Syntax zu konvertieren, um Browserfehler zu vermeiden, behebt preset-modules jeden einzelnen Fehler und führt eine Umwandlung in die nächstmögliche, fehlerfreie moderne Syntax durch. Dies führt zu modernem Code, der an die meisten Browser fast unverändert geliefert werden kann.

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

Nächste Schritte

Durch die enge Zusammenarbeit mit Open-Source-Frameworks und -Bibliotheken für eine bessere Nutzererfahrung erkennt das Chrome-Team, was für Nutzer und Entwickler gleichermaßen von grundlegender Bedeutung ist.

Wenn Sie an einem Web-Framework, einer UI-Bibliothek oder einer Form von Webtools (Bundler, Compiler, Linter) arbeiten, beantragen Sie den Framework-Fonds.