Weiterentwicklung der Web-Framework-Umgebung

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

Houssein Djirdeh

Chrome leistet einen aktiven Beitrag zur Entwicklung von Web-Frameworks und unserem Gespräch beim Chrome Dev Summit 2019 umfasst die Projekte, an denen wir im letzten Jahr gearbeitet haben.

Im Folgenden findest du 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 zu verbessern und V8, der JavaScript- und WebAssembly-Engine, die für Chrome verwendet wird, mit Funktionen ausgestattet, mit denen sie tolle Webseiten erstellen können. Außerdem versuchen wir, Websites zu verbessern, die bereits heute in Produktion sind, da sie auf vielfältige Weise zu Open-Source-Tools beitragen.

Die meisten Web-Apps Entwickler verlassen sich, wann immer möglich, auf Open-Source-Tools und sie ziehen es vor, keine vollständig kundenspezifischen und Infrastruktur. Clientseitige JavaScript-Frameworks und UI-Bibliotheken bilden einen wachsenden Teil der der Open-Source-Nutzung. Daten zu den drei beliebtesten clientseitigen Frameworks und Bibliotheken Serien mit React, Angular und Vue dass:

• 72% der Teilnehmenden der Der erste jährliche Webentwickler von MDN und Designerumfrage mindestens eines dieser Frameworks und Bibliotheken verwenden.
• Über 320.000 Websites in Die fünf Millionen von HTTP-Archiv analysierten URLs verwenden mindestens eines dieser Frameworks und Bibliotheken.
• Bei der Gruppierung nach Zeit verwenden 30 der Top-100-URLs mindestens eines dieser Frameworks und Bibliotheken. (Die Untersuchung erfolgte mit internen Daten.)

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

Beiträge zu Web-Frameworks

Die häufig verwendeten Frameworks zum Erstellen und Strukturieren von Webseiten lassen sich in zwei Kategorien einteilen:

• UI-Frameworks (oder Bibliotheken) wie Preact, React oder Vue, die mehr Kontrolle bieten über der Ansichtsebene einer Anwendung (zum Beispiel über ein Komponentenmodell).
• Web-Frameworks wie Next.js, Nuxt.js und Gatsby, die ein End-to-End-System bieten und spezielle integrierte Funktionen wie serverseitiges Rendering nutzen. Diese Frameworks sind normalerweise ein UI-Framework oder eine Bibliothek für die Ansichtsebene nutzen.

Entwickler können sich gegen die Nutzung von Frameworks entscheiden, sondern indem sie eine Ansichtsschichtbibliothek, einen Router Server-Renderer und so weiter, erstellen sie oft ihre eigene Art von Framework. Web-Frameworks berücksichtigen viele dieser Probleme standardmäßig.

Im weiteren Verlauf dieses Beitrags werden viele Verbesserungen vorgestellt, die kürzlich in verschiedenen Ansätzen umgesetzt wurden. und Tools, einschließlich Beiträge des Chrome-Teams.

Angular

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

• Differential Loading durch bei neueren Browsern werden standardmäßig nicht benötigte Polyfills minimiert.

• 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, das neue Album von Angular Rendering-Modul, das eine bessere Neukompilierungsleistung und eine Reduzierung der Gruppierung bietet ist im Vorschaumodus für bestehenden Projekten.

Weitere Informationen zu diesen Verbesserungen finden Sie unter „Version 8 von Angular“ Das Chrome-Team freut sich darauf, im nächsten Jahr eng mit ihnen zusammenzuarbeiten, Land.

Next.js

Next.js ist ein Web-Framework, das React als Ansichtsebene verwendet. Neben einer UI-Komponentenmodell, das viele Entwickler von einem clientseitigen Framework erwarten, bietet Next.js eine Anzahl der 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 nimmt eine Optimierung für reduzierte Paketgrößen vor. Das Chrome-Team half bei der Identifizierung von Bereichen, in denen wir die Leistung weiter zu verbessern. Weitere Informationen zu den einzelnen Anfragen finden Sie in den jeweiligen Anfragen. für Kommentare (RFC) und Pull-Anfragen (PRs):

1. Eine verbesserte Strategie zur Aufteilung von Webpacks mit detaillierteren Bundles, wodurch der Menge an dupliziertem Code, der über mehrere Routen abgerufen wurde (RFC, PR).
2. Differenzielles Laden mit dem Modul-/Nomodule-Muster Dadurch lässt sich die JavaScript-Gesamtmenge in Next.js-Apps ohne Code um bis zu 20% reduzieren. (RFC, PR).
3. Verbesserte Erfassung von Leistungsmesswerten über die User Timing API (PR).

Wir testen auch andere Funktionen, um die Nutzung von Next.js, z. B.:

• Aktivieren des gleichzeitigen Modus, um die progressive oder teilweise Hydration von Komponenten freizuschalten
• Ein Webpack-basiertes Konformitätssystem, das alle Quelldateien und generierten Assets analysiert, bessere Fehler und Warnungen (RFC) anzeigen.

Nuxt.js

Nuxt.js ist ein Web-Framework, das Vue.js mit verschiedenen Bibliotheken kombiniert. um eine gezielte Einrichtung zu ermöglichen. Ähnlich wie Next.js bietet es viele sofort einsatzbereite 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 direkt an der Verbesserung der Leistung verschiedener Tools und haben die Framework-Fonds, um Open-Source-Projekten finanziell zu unterstützen. Frameworks und Bibliotheken. Mit unserer aktuellen Nuxt.js in naher Zukunft verfügbar sein, darunter intelligentes Server-Rendering und Optimierungen vor.

Babel

Wir haben auch Fortschritte bei der Leistungsverbesserung eines wichtigen Tools gemacht, das in fast allen der genannten Frameworks – Babel.

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

Um diesen Fall zu optimieren, haben wir eine ganz neue Voreinstellung eingeführt: @babel/preset-modules. Anstatt die moderne Syntax zu konvertieren, auf ältere Syntax umgestellt, um Browserfehler zu vermeiden, behebt preset-modules jeden einzelnen Fehler durch Umwandlung in den einer möglichst unbeschädigten modernen Syntax. Das Ergebnis ist moderner Code, der nahezu unverändert auf die meisten Browser angewendet.

Entwickler, die preset-env bereits verwenden, profitieren ebenfalls von diesen Optimierungen, ohne alles tun, da sie bald auch in preset-env integriert werden.

Nächste Schritte

Durch die enge Zusammenarbeit mit Open-Source-Frameworks und -Bibliotheken Das Chrome-Team weiß, was sowohl für Nutzer als auch für Entwickler von grundlegender Bedeutung ist.

Wenn Sie an einem Web-Framework, einer UI-Bibliothek oder anderen Webtools (Bundler, Compiler, Linter) arbeiten, bewirb dich für den Framework Fund.