Das Chrome-Team legt Wert auf die Nutzerfreundlichkeit und ein erfolgreiches Websystem. Wir möchten, dass Nutzer das Web optimal nutzen können. Das gilt nicht nur für statische Dokumente, sondern auch für umfangreiche, hochinteraktive Anwendungen.
Open-Source-Tools und -Frameworks spielen eine große Rolle bei der Entwicklung moderner Anwendungen für das Web und bei der Entwicklung einer positiven Umgebung. Diese Frameworks und Tools eignen sich sowohl für Unternehmen jeder Größe als auch für Einzelpersonen, die Anwendungen für das Web entwickeln.
Wir sind davon überzeugt, dass Frameworks eine wichtige Rolle dabei spielen können, Entwickler bei wichtigen Qualitätsaspekten wie Leistung, Barrierefreiheit, Sicherheit und Bereitschaft für Mobilgeräte zu unterstützen. Anstatt jeden Entwickler und Websiteinhaber zu bitten, Experte für diese Bereiche zu werden und mit den sich ständig ändernden Best Practices Schritt zu halten, kann das Framework diese mit integrierten Lösungen unterstützen. So können sich die Entwickler auf die Entwicklung von Produktfunktionen konzentrieren.
Kurz gesagt: Unsere Vision ist, dass eine hohe UX-Qualität ein Nebeneffekt bei der Entwicklung für das Web wird.
Aurora: eine Partnerschaft zwischen Chrome und Open-Source-Web-Frameworks und -Tools
Wir arbeiten seit fast zwei Jahren mit einigen der beliebtesten Frameworks wie Next.js, Nuxt und Angular zusammen, um die Webleistung zu verbessern. Auch beliebte Tools und Bibliotheken wie Vue, ESLint und Webpack werden finanziert. Heute geben wir diesem Projekt einen Namen: Aurora.
Eine Aurora ist ein natürliches Licht, das am Himmel schimmert. Wir möchten Nutzern helfen, die mit Frameworks glänzen. Daher hielten wir diesen Namen für eine geeignete Wahl.
In den kommenden Monaten geben wir noch viele weitere Details zu Aurora bekannt. Dabei handelt es sich um die Zusammenarbeit zwischen einem kleinen Team von Chrome-Entwicklern (intern als WebSDK) und Framework-Autoren. Unser Ziel ist es, die bestmögliche Nutzerfreundlichkeit für Produktions-Apps zu bieten, unabhängig vom Browser, in dem Sie rendern.
Was ist unsere Strategie?
Bei Google haben wir viel gelernt, während wir Frameworks und Tools verwendet haben, um große Webanwendungen wie die Google Suche, Maps, die Bildersuche und Google Fotos zu erstellen und zu verwalten. Wir haben festgestellt, dass Frameworks eine entscheidende Rolle für die vorhersehbare App-Qualität spielen können, indem sie starke Standards und überzeugende Tools bereitstellen.
Frameworks bieten einen einzigartigen Blickwinkel für die Beeinflussung von DX und UX, da sie das gesamte System umfassen: die Client- und Serverumgebung, die Entwicklungs- und Produktionsumgebungen und sie integrieren Tools wie Compiler, Bundler, Linter usw.
Wenn Lösungen in das Framework verankert sind, können Entwicklerteams diese Lösungen verwenden und sich auf das konzentrieren, was für das Produkt am wichtigsten ist: das Bereitstellen großartiger Funktionen für Nutzer.
Während wir daran arbeiten, Tools zu verbessern, die in jeder Ebene des Stacks vorhanden sind, verwalten Frameworks wie Next.js, Nuxt und Angular CLI jeden Schritt des Lebenszyklus einer Anwendung. Aus diesem Grund und der Tatsache, dass die Implementierung von React im Rahmen des zentralen UI-Frameworks am stärksten ist, haben die meisten unserer Optimierungen damit begonnen, sich in Next.js bewährt zu haben, bevor wir sie auf den Rest des Systems ausweiten.
Aurora trägt zum großen Erfolg bei, indem es Lösungen in die richtige Ebene beliebter Technologie-Stacks einbringt. Da die Lücke zwischen Browsern und Frameworks geschlossen wird, können hochwertige Inhalte als Nebeneffekt bei der Entwicklung für das Web verwendet und gleichzeitig als Feedbackschleife zur Verbesserung der Webplattform genutzt werden.
Wie sieht unser Arbeitsprozess aus?
Unsere Prinzipien, wie Aurora Browser und die Entwicklerumgebung verbindet, lauten: Demut, Neugier, wissenschaftliche Recherche und Pragmatismus. Wir arbeiten mit Frameworks-Autoren zusammen, um Verbesserungen vorzunehmen, arbeiten mit der Community zusammen und prüfen, bevor Änderungen vorgenommen werden.
Hier eine Zusammenfassung der Schritte für jede neue Funktion, an der wir arbeiten:
- Probleme mit der User Experience in einem beliebten Stack mithilfe repräsentativer Apps identifizieren
- Entwickeln Sie dazu entsprechende Prototyplösungen, wobei der Schwerpunkt auf „starken Standardeinstellungen“ liegt.
- Prüfen Sie die Funktion mit einem anderen Framework-Stack, um sicherzustellen, dass sie anpassbar ist.
- Validieren Sie die Funktion, indem Sie in einigen Produktionsanwendungen experimentieren, in der Regel mit Labortests.
- Nutzen Sie den RFC-Prozess für das Design und berücksichtigen Sie das Feedback der Community.
- Landen Sie das Element in einem beliebten Stapel, in der Regel hinter einer Flagge.
- Aktivieren Sie die Funktion in einer repräsentativen Produktions-App, um die Qualität und die Einbindung des Entwickler-Workflows zu bewerten.
- Messen Sie die Leistungssteigerung, indem Sie Messwerte in repräsentativen Produktions-Apps verfolgen, in denen die Funktion übernommen oder aktualisiert wurde.
- Aktivieren Sie die Funktion als Standardfunktion im Stack, damit alle Upgrade-Nutzer davon profitieren.
- Nach der Bestätigung kannst du mit weiteren Frameworks arbeiten, um die Funktion zu etablieren.
- Identifizierung von Lücken in der Webplattform mithilfe einer Feedbackschleife
- Weiter zu den nächsten Aufgaben.
Die zugrunde liegenden Tools und Plug-ins (Webpack, Babel, ESLint, TypeScript usw.) werden von vielen Frameworks gemeinsam genutzt. Dies trägt zu Welleneffekten bei, auch wenn Sie zu einem einzelnen Framework-Stack beitragen.
Darüber hinaus werden Open-Source-Tools und -Bibliotheken durch den Chrome Framework Fund finanziert. Wir hoffen, dass es bei unseren oben genannten Bemühungen genügend Überschneidungen bei den Problem- und Lösungsebenen gibt, um auf andere Frameworks und Tools zu übertragen, aber wir wissen, dass wir mehr tun können. Zu diesem Zweck möchten wir unseren Teil dazu beitragen, dass Bibliotheken und Frameworks, die erfolgreiche Entwicklerteams unterstützen, erfolgreich sein können. Aus diesem Grund investieren wir weiter in den Chrome Framework Fund. Bisher wurden die Arbeit in Richtung Webpack 5 und Nuxt sowie die Leistung und Verbesserungen von ESLint unterstützt.
Was hat unsere Arbeit bisher erreicht?
Wir haben uns auf grundlegende Optimierungen für Ressourcen wie Bilder, JS, CSS und Schriftarten konzentriert. Wir haben eine Reihe von Optimierungen vorgenommen, um die Standardeinstellungen mehrerer Frameworks zu verbessern, darunter:
- Eine Bildkomponente in Next.js, die Best Practices für das Laden von Bildern enthält, gefolgt von einer Zusammenarbeit mit Nuxt an derselben. Die Verwendung dieser Komponente hat zu erheblichen Verbesserungen der Paint-Zeiten und des Layout Shifts geführt (Beispiel: 57% weniger Largest Contentful Paint und 100% weniger Cumulative Layout Shift auf nextjs.org/give).
- Automatisiertes Einfügen von CSS-Deklarationen für Web-Schriftarten bei der Build-Erstellung. Diese Funktion ist jetzt in Angular (Google Fonts) und Next.js (Google Fonts und Adobe Fonts) verfügbar, was zu deutlichen Verbesserungen bei Largest Contentful Paint und First Contentful Paint geführt hat (Beispiel).
- Kritische CSS-Elemente mithilfe von Critters sowohl in Angular als auch in Next.js inline einbinden, um die Painting-Zeiten zu verkürzen Führte zu einer Verbesserung der Lighthouse-Leistungsbewertungen um 20 bis 30 Punkte in einer typischen, umfangreichen Angular-Anwendung, wenn dies mit der CSS-Inline-Funktion für Schriftarten kombiniert wurde.
- Vorkonfigurierte ESLint-Unterstützung in Next.js mit einem benutzerdefinierten Plug-in und einer gemeinsam nutzbaren Konfiguration, mit der sich häufige Framework-spezifische Probleme bei der Build-Erstellung leichter erkennen lassen, was zu einer besser vorhersehbaren Ladeleistung führt.
- In React-Anwendung erstellen und Next.js wurde eine integrierte Leistungs-Neuschicht eingeführt. Damit erhalten Sie über Web Vitals und andere benutzerdefinierte Messwerte einen besseren Einblick in die Seitenleistung.
- Detailliertes Aufteilen in Next.js und Gatsby, was zu einer Reduzierung der Bundle-Größen um 30 bis 70 % führte und gleichzeitig die Caching-Leistung verbesserte Dies ist in Webpack 5 zum Standard geworden.
- Ein separater Polyfill-Chunk für ältere Browser in Zusammenarbeit mit dem Next.js-Team, um die Bundle-Größe in modernen Browsern zu verbessern.
Jede dieser Funktionen wurde entweder automatisch aktiviert oder erfordert nur eine einfache Aktivierung. Dies ist wichtig, damit Entwickler einfach von ihren Vorteilen profitieren können, ohne ihren Workflow komplexer zu machen.
Was haben wir für 2021 geplant?
Im weiteren Verlauf des Jahres werden wir Framework-Stacks dabei unterstützen, die Nutzerfreundlichkeit und die Leistung von Messwerten wie den Core Web Vitals zu verbessern. Diese Arbeit umfasst Folgendes:
- Konformität zur Durchsetzung von Best Practices Weitere Informationen finden Sie in diesem Blogpost.
- Optimieren Sie die Leistung beim ersten Laden, indem wir Bilder, Schriftarten und kritische CSS in Zusammenarbeit mit anderen optimieren.
- Laden von Drittanbieter-Scripts mit minimalen Auswirkungen auf die Leistung, indem wir auf unserer Arbeitsgrundlage eine Skript-Komponente aufbauen und tiefgehende Recherchen zur optimalen Anordnung und Sequenzierung von Drittanbieter-Skripts durchführen.
- JavaScript-Leistung in großem Maßstab (z. B. Unterstützung von React-Serverkomponenten in Next.js)
Unser Team wird versuchen, regelmäßiger Informationen zu RFCs und Designdokumenten für diese Ideen zu veröffentlichen, damit alle Frameworks oder Entwickler, die Ihnen folgen möchten, dies tun können.
Fazit
Das Aurora-Team (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Keen, Keen, Katie – Nussein, Katie – Nussstandard-Community) freut sich darauf, die Open-Source-Arbeitsumgebung weiter zu verbessern. Im Laufe der Zeit werden wir immer mehr Konzepte und Tools abdecken. In den nächsten Jahren findet ihr hier weitere Blogposts, Vorträge und RFCs von unserem Team.