Weiterentwicklung des Framework-Ökosystems

Chrome está colaborando con marcos de Open Source para trabajar hacia una Netz besser

8. Januar 2020

Chrome es un colaborador activo del ecosistema de Rahmen web y nuestra charla en Chrome Dev Summit 2019 cubre lo que hemos trabajado durante el año pasado.

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 de todos los miembros del equipo de Chrome es mejorar la Web. Trabajamos para mejorar las API von Browser y V8, el motor principal de JavaScript y WebAssembly que impulsa a Chrome, para que los desarrolladores estén equipados con funciones que les ayuden a crear excelentes páginas web. También intentamos mejorar los sitios web que ya están en producción hoy en día contribuyendo a las herramientas de código abierto de muchas formas.

Die meisten Webentwickler
confían en herramientas de código abierto siempre que Sein posible y prefieren no construir una infraestructura completamente personalizada. Los frameworks de JavaScript del lado del Klient y las bibliotecas de UI constituyen una porción creciente del uso de código abierto. Datos sobre los tres marcos y bibliotecas del lado del cliente más populares,
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 en los 5 millones de Url principales analizados por HTTP Archive utilizan al menos uno de estos marcos y bibliotecas.
• 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:

• Marcos de 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 Frameworks, como Next.js, Nuxt.js y Gatsby, que proporcionan un sistema de un extremo a otro con características de opinión integradas, como la representación del lado del Server. Estos marcos suelen aprovechar un marco de interfaz de Nutzername o una biblioteca para la capa de vista.

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. EIN Strategie mejorada de fragmentación de paquetes web que emite paquetes más granulares, lo que reduce la cantidad de código duplicado obtenido a través de múltiples rutas (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 compila código que contiene una sintaxis más nueva en un código que los diferentes Browser pueden entender. Se ha vuelto común de usar @ 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 um alle Browser anzusprechen, die Unterstützt ES-Module.

Zum optimieren para este caso, lanzamos un nuevo ajuste preestablecido;
@ babel / modules-presets. Anstatt moderne Syntax in ältere Syntax umzuwandeln, um Browserfehler zu vermeiden, voreingestellte Module behebt jeden spezifischen Fehler, indem er in die nächstmögliche moderne, ungebrochene Syntax umgewandelt wird. Dies führt zu modernem Code, der geliefert werden kann fast unverändert für die meisten Browser.

Entwickler verwenden bereits Preset-Env Sie werden auch von diesen Optimierungen profitieren, ohne etwas tun zu müssen, da sie bald integriert werden Preset-Env auch.

Was kommt als nächstes?

Durch die enge Zusammenarbeit mit Open Source-Frameworks und -Bibliotheken, um bessere Erfahrungen zu erzielen, erkennt das Chrome-Team, was für Benutzer und Entwickler gleichermaßen von grundlegender Bedeutung ist.

Si trabaja en un framework, biblioteca de interfaz de usuario o cualquier forma de herramientas web (agrupador, Compiler, linter),
Anforderungsrahmenhintergrund!