Weiterentwicklung des Framework-Ökosystems

Chrome arbeitet mit Open Source-Frameworks zusammen, um auf ein besseres Web hinzuarbeiten

8. Januar 2020

Chrome leistet einen aktiven Beitrag zum Web-Framework-Ökosystem. Unser Vortrag auf dem Chrome Dev Summit 2019 behandelt, woran wir im letzten Jahr gearbeitet haben.

Lesen Sie weiter, um eine ausführliche Zusammenfassung des Vortrags mit zusätzlichen Details und Ressourcen zu erhalten.

Wie verbessern wir das Web?

Das Ziel jedes Mitglieds des Chrome-Teams ist es, das Web zu verbessern. Wir arbeiten daran, die Browser-APIs und V8, die Kern-JavaScript- und WebAssembly-Engine für Chrome, zu verbessern. Entwickler sind daher mit Funktionen ausgestattet, mit denen sie großartige Webseiten erstellen können. Wir versuchen auch, die Websites, die bereits heute in Produktion sind, zu verbessern, indem wir in vielerlei Hinsicht zu Open Source-Tools beitragen.

Die meisten Webentwickler
Sie 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 Anteil der Open Source-Nutzung aus. Fakten zu den drei beliebtesten clientseitigen Frameworks und Bibliotheken,
Reagieren, Winkeligy Vue, zeigt, dass:

• 72% der Teilnehmer an der
  MDNs erste jährliche Umfrage für Webentwickler und -designer
  Verwenden Sie mindestens eines dieser Frameworks und Bibliotheken.
• Über
  320.000 Standorte Die vom HTTP-Archiv analysierten Top-5-Millionen-URLs verwenden mindestens eines dieser Frameworks und Bibliotheken.
• Nach der aufgewendeten Zeit gruppiert, verwenden 30 der Top-100-URLs mindestens eines dieser Frameworks und Bibliotheken. (Die Forschung wurde mit internen Daten durchgeführt).

Das bedeutet, dass Bessere Open Source-Tools können direkt zu einem besseren Web führen Aus diesem Grund haben Chrome-Ingenieure begonnen, direkt mit externen Frame- und Bibliotheksautoren zusammenzuarbeiten.

Beiträge zu Web-Frameworks

Die Frameworks, die üblicherweise zum Erstellen und Strukturieren von Webseiten verwendet werden, lassen sich in zwei Kategorien einteilen:

• Frames der Benutzeroberfläche (oder Bibliotheken) wie Preact, React oder Vue, die die Kontrolle über die Anzeigeebene einer Anwendung ermöglichen (z. B. über ein Komponentenmodell).
• Web FrameworksB. Next.js, Nuxt.js und Gatsby, die ein End-to-End-System mit integrierten Stimmungsfunktionen wie serverseitigem Rendering bereitstellen. Diese Frameworks nutzen normalerweise ein Benutzeroberflächen-Framework oder eine Bibliothek für die Ansichtsebene.

Entwickler können sich dafür entscheiden, keine Frames zu verwenden. Wenn sie jedoch eine Bibliothek mit Ansichtsebenen, Routern, Stilsystemen, Server-Renderern usw. zusammenstellen, erstellen sie häufig ihre eigenen Frames. Obwohl hartnäckig, kümmern sich Web-Frameworks standardmäßig um viele dieser Probleme.

Der Rest dieses Beitrags hebt viele Verbesserungen hervor, die kürzlich auf verschiedenen Frameworks und Tools gelandet sind, einschließlich der Beiträge des Chrome-Teams.

Winkelig

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

• Unterstützung für die dynamische Standardimportsyntax für verzögerte Ladepfade.
• Unterstützung für Web-Worker Operationen auf einem vom Hauptthread getrennten Hintergrundthread ausführen.
• EfeuAngulars neue Rendering-Engine, die eine bessere Neukompilierungsleistung und eine geringere Paketgröße bietet, ist unter verfügbar Vorschau Modus für bestehende Projekte.

Weitere Informationen zu diesen Verbesserungen finden Sie unter
"Version 8 von Angular"
Das Chrome-Team freut sich darauf, nächstes Jahr eng mit ihnen zusammenzuarbeiten, sobald weitere Funktionen verfügbar sind.

Next.js

Next.js ist ein Webframework, das React als Ansichtsebene verwendet. Zusätzlich zu einem UI-Komponentenmodell, das viele Entwickler von einem clientseitigen Framework erwarten, bietet Next.js eine Reihe integrierter Standardfunktionen:

• Routing mit Standard-Code-Aufteilung
• Zusammenstellung und Gruppierung (mit Babel y
  Web-Paket)
• Serverseitiges Rendern
• Mechanismen zum Abrufen von Daten auf Seitenebene
• Eingekapselter Stil (mit styled-jsx)

Next.js ist für kleine Paketgrößen optimiert, und das Chrome-Team hat dabei geholfen, Bereiche zu identifizieren, in denen wir die Leistung noch weiter verbessern können. Sie können mehr über jeden von ihnen erfahren, indem Sie die RFCs (Request for Comments) und PR (Pull Requests) anzeigen:

1. Eine verbesserte Strategie zur Fragmentierung von Webpaketen, die detailliertere Pakete ausgibt und die Menge an doppeltem Code reduziert, die über mehrere Pfade erhalten wird (RFC,
   PR).
2. Differenzielles Laden mit dem Modul- / Nomodelmuster, das die Gesamtmenge an JavaScript in Next.js-Anwendungen ohne Codeänderungen um bis zu 20% reduzieren kann (RFC,
   PR).
3. Verbesserte Verfolgung von Leistungsmetriken mithilfe der Benutzersynchronisierungs-API (PR).

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

• Aktivieren des gleichzeitigen Modus zum Entsperren der progressiven oder teilweisen Flüssigkeitszufuhr der Komponenten.
• Ein webpaketbasiertes Compliance-System, das alle generierten Asset- und Quelldateien scannt, um bessere Fehler und Warnungen anzuzeigen (RFC).

Nuxt.js

Nuxt.js ist ein Framework, das Vue.js mit verschiedenen Bibliotheken kombiniert, um eine hartnäckige Konfiguration bereitzustellen. Wie Next.js enthält es viele sofort einsatzbereite Funktionen:

• Routing mit Standard-Code-Aufteilung
• Zusammenstellung und Gruppierung (mit Babel y
  Web-Paket)
• Serverseitiges Rendern
• Abrufen von asynchronen Daten für jede Seite
• Standarddatenspeicher (Vuex)

Wir haben nicht nur direkt daran gearbeitet, die Leistung verschiedener Tools zu verbessern, sondern auch die
Rahmenhintergrund finanzielle Unterstützung für mehr Open-Source-Bibliotheken und Frameworks. Mit unserer jüngste Unterstützung Für Nuxt.js sollen in naher Zukunft einige Funktionen verfügbar sein, darunter intelligentere Server-Renderings und Bildoptimierungen.

Babel

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

Babel kompiliert Code, der eine neuere Syntax enthält, in Code, den verschiedene Browser verstehen können. Es ist üblich geworden, es zu benutzen @ babel / preset-env um auf moderne Browser abzuzielen, in denen verschiedene Browserziele angegeben werden können, um genügend erforderliche Polyfüllung für alle ausgewählten Umgebungen bereitzustellen. Eine Möglichkeit, Ziele festzulegen, ist die Verwendung

zusammenhängende Posts

1. Wählen Sie mit tooling.report das beste Konstruktionswerkzeug für Ihr Projekt
2. Verbesserte Leistung beim Laden von Next.js- und Gatsby-Seiten durch granulare Fragmentierung
3. ✅ So beheben Sie den HRESULT-Ausnahmefehler 0x8007000B
4. So ändern Sie das Bibliothekssymbol in Windows 10