Einhaltung der Richtlinien im JavaScript-Framework-System
In unserem Einführungsartikel haben wir beschrieben, wie wir viel gelernt haben, als wir Frameworks und Tools zur Entwicklung und Pflege von Webanwendungen im großen Maßstab wie der Google Suche, Google Maps und Google Fotos erstellt und verwendet haben. Indem wir Entwickler davor bewahren, Code zu schreiben, der sich negativ auf die Nutzerfreundlichkeit auswirken kann, haben wir bewiesen, dass Frameworks eine wichtige Rolle bei der Verbesserung der Leistung und Anwendungsqualität spielen können.
Intern bei Google haben wir diese Methode als Compliance bezeichnet. In diesem Artikel erfahren Sie, wie wir dieses Konzept als Open Source für das JavaScript-Framework-Ökosystem freigeben möchten.
Was ist Konformität?
Bei Google war Compliance eine Weiterentwicklung. Die Teams stützten sich auf eine kleine Gruppe erfahrener Entwickler, die umfangreiche Codeüberprüfungen durchführten und Probleme meldeten, die sich über Korrektheitsprobleme hinaus auf die App-Qualität und -Wartbarkeit auswirkten. Um dies auf wachsende App-Entwicklerteams auszuweiten, wurde ein Compliance-System entwickelt, mit dem Best Practices auf automatisierte und durchsetzbare Weise kodiert werden können. So wurde unabhängig von der Anzahl der Code-Mitbearbeiter eine konstant hohe Messlatte für die App-Qualität und die Wartbarkeit der Codebasis sichergestellt.
Die Einhaltung von Standards ist ein System, das dafür sorgt, dass Entwickler auf dem richtigen Weg bleiben. Es schafft Vertrauen und sorgt für vorhersehbare Ergebnisse. Sie steigert die Produktivität von Teams und ist entscheidend für die Skalierung – wenn Teams wachsen und gleichzeitig mehr Funktionen entwickelt werden. So können sich Entwickler darauf konzentrieren, Produktfunktionen zu entwickeln, ohne sich um Kleinigkeiten und die sich ändernde Landschaft in verschiedenen Bereichen wie Leistung, Barrierefreiheit und Sicherheit kümmern zu müssen. Jeder kann die Compliance jederzeit deaktivieren. Außerdem sollte sie so anpassbar sein, dass Teams die Möglichkeit haben, die von ihnen festgelegten Standards durchzusetzen.
Die Einhaltung der Anforderungen basiert auf strengen Standardeinstellungen und umsetzbaren Regeln, die zum Erstellen erzwungen werden können. Diese lassen sich in die folgenden drei Prinzipien unterteilen.
1. Starke Standardeinstellungen
Ein grundlegender Aspekt der Konformität besteht darin, dafür zu sorgen, dass die von Entwicklern verwendeten Tools starke Standardeinstellungen haben. Das bedeutet, dass Lösungen nicht nur in Frameworks eingebettet sind, sondern dass auch die Designmuster von Frameworks es einfach machen, das Richtige zu tun und Anti-Muster zu vermeiden. Das Framework unterstützt Entwickler bei der Anwendungsentwicklung und Codestruktur.
Für eine optimale Ladeleistung sollten alle Ressourcen (Schriftarten, CSS, JavaScript, Bilder usw.) optimiert werden. Das ist eine komplexe Herausforderung, die das Kürzen von Bytes, die Reduzierung von Rücksprüngen und die Trennung von Inhalten für das erste Rendering, die visuelle Bereitschaft und die Nutzerinteraktion umfasst. Beispielsweise können Sie kritisches CSS extrahieren und wichtige Bilder priorisieren.
2. Umsetzbare Regeln
Auch wenn grundlegende Optimierungen vorhanden sind, müssen Entwickler Entscheidungen treffen. Es gibt eine Vielzahl von Optimierungsmöglichkeiten, was den erforderlichen Entwickler-Input angeht:
- Standardeinstellungen, für die kein Entwicklereingriff erforderlich ist, z. B. das Einfügen von kritischem CSS
- Erfordert die Aktivierung durch den Entwickler. Beispiel: Sie verwenden eine vom Framework bereitgestellte Bildkomponente, um Bilder zu skalieren.
- Erfordert die Aktivierung und Anpassung durch den Entwickler. Beispielsweise können Sie wichtige Bilder taggen, damit sie zuerst geladen werden.
- Keine bestimmte Funktion, sondern Dinge, die noch eine Entscheidung des Entwicklers erfordern. Vermeiden Sie beispielsweise Schriftarten oder synchrone Scripts, die das frühe Rendering verzögern.
Optimierungen, die eine Entscheidung der Entwickler erfordern, stellen ein Risiko für die Leistung der Anwendung dar. Wenn Funktionen hinzugefügt werden und Ihr Team wächst, können selbst die erfahrensten Entwickler nicht mit den ständig wechselnden Best Practices Schritt halten. Außerdem ist das nicht die beste Zeitnutzung. Für die Einhaltung von Standards sind geeignete umsetzbare Regeln ebenso wichtig wie strenge Standardeinstellungen, damit die Anwendung auch dann einen bestimmten Standard erfüllt, wenn Entwickler weiterhin Änderungen vornehmen.
3. Erstellungszeit
Es ist wichtig, Leistungsprobleme frühzeitig im Entwicklungszyklus zu erkennen und auszuschließen. Die Entwicklungszeit, bevor der Code committet wird, eignet sich ideal, um Probleme zu erkennen und zu beheben. Je später ein Problem im Entwicklungszyklus erkannt wird, desto schwieriger und teurer ist es, es zu beheben. Dies gilt nicht nur für Probleme mit der Korrektheit, sondern auch für Leistungsprobleme, da viele dieser Probleme nicht rückwirkend behoben werden, sobald sie in die Codebasis übernommen wurden.
Derzeit wird das meiste Leistungsfeedback außerhalb des Bandes über Dokumentationen oder einmalige Audits bereitgestellt oder es wird zu spät über Messwertrückgänge nach der Bereitstellung in der Produktion angezeigt. Wir möchten das beim Erstellen von Inhalten berücksichtigen.
Konformität in Frameworks
Um eine hohe Nutzerfreundlichkeit bei der Ladeleistung zu gewährleisten, müssen die folgenden Fragen beantwortet werden:
- Was ist eine optimale Auslastung und welche häufigen Probleme können sich negativ darauf auswirken?
- Welche Lösungen können integriert werden, ohne dass Entwickler eingreifen müssen?
- Wie können wir dafür sorgen, dass die Entwickler diese Lösungen nutzen und optimal einsetzen?
- Welche anderen Entscheidungen könnte der Entwickler treffen, die sich auf die Ladeleistung auswirken?
- Welche Codemuster können uns schon früh beim Erstellen über diese Entscheidungen (3 und 4 oben) Aufschluss geben?
- Welche Regeln können wir formulieren, um diese Codemuster zu bewerten? Wie können sie dem Entwickler beim Erstellen angezeigt werden und gleichzeitig nahtlos in seinen Workflow eingebunden werden?
Um das ‑Modell, das wir intern bei Google haben, auf Open-Source-Frameworks anzuwenden, hat unser Team intensiv mit Next.js experimentiert. Wir freuen uns, unsere optimierte Vision und unsere Pläne mit Ihnen zu teilen. Wir haben festgestellt, dass die besten Regeln zur Bewertung von Codemustern eine Kombination aus statischer Codeanalyse und dynamischen Prüfungen sein müssen. Diese Regeln können mehrere Oberflächen umfassen, darunter:
- ESLint
- TypeScript
- Dynamische Prüfungen auf dem Entwicklungsserver des Nutzers (nach der DOM-Erstellung)
- Modul-Bundler (Webpack)
- CSS-Tools (noch in der Entwicklungsphase)
Durch die Bereitstellung von Regeln über verschiedene Tools können wir dafür sorgen, dass sie einheitlich sind, aber auch alle Probleme mit der Nutzerfreundlichkeit umfassen, die sich direkt auf die Ladeleistung auswirken. Außerdem können diese Regeln Entwicklern zu unterschiedlichen Zeiten angezeigt werden:
- Während der lokalen Entwicklung auf dem Entwicklungsserver werden im Browser und in der IDE des Nutzers Warnungen angezeigt, die Entwickler auffordern, kleine Codeänderungen vorzunehmen.
- Ungelöste Probleme werden zum Zeitpunkt der Build-Phase im Terminal des Nutzers angezeigt.
Kurz gesagt: Teams wählen die für sie wichtigen Ergebnisse aus, z. B. Core Web Vitals oder Ladeleistung, und aktivieren relevante Regelsätze, die alle Code-Mitbearbeiter einhalten müssen.
Das funktioniert zwar sehr gut für neue Projekte, aber es ist nicht einfach, große Codebases so zu aktualisieren, dass sie den vollständigen Regelsätzen entsprechen. Bei Google gibt es ein umfangreiches System, mit dem sich auf verschiedenen Ebenen die Datenerhebung deaktivieren lässt, z. B. für einzelne Zeilen von Quellcode, ganze Verzeichnisse, alte Codebases oder Teile der App, die nicht aktiv entwickelt werden. Wir arbeiten aktiv an effektiven Strategien, um dies Teams mit Open-Source-Frameworks zu ermöglichen.
Konformität in Next.js
ESLint wird von JavaScript-Entwicklern häufig verwendet. Über 50% der Next.js-Anwendungen nutzen ESLint in einem Teil ihres Build-Workflows. In Next.js v11 wurde die ESLint-Unterstützung eingeführt, die ein benutzerdefiniertes Plug-in und eine freigegebene Konfiguration umfasst. So lassen sich häufige frameworkspezifische Probleme während der Entwicklung und beim Builden leichter erkennen. So können Entwickler bereits bei der Erstellung erhebliche Probleme beheben. Beispiele hierfür sind die Verwendung oder Nichtverwendung einer bestimmten Komponente, die die Leistung beeinträchtigen könnte, wie im Fall von Kein HTML-Link für Seite. Oder ob sich eine bestimmte Schriftart, ein bestimmtes Stylesheet oder ein bestimmtes Script negativ auf das Laden von Ressourcen auf einer Seite auswirken kann. Beispiel: Kein synchrones Script.
Neben ESLint wird in Next.js seit Version 9 mit TypeScript-Unterstützung auch die integrierte Typprüfung sowohl in der Entwicklung als auch in der Produktion unterstützt. Mehrere vom Framework bereitgestellte Komponenten (Bild, Script, Link) wurden als Erweiterung von HTML-Elementen (<img>, <script>, <a>) entwickelt, um Entwicklern einen leistungsstarken Ansatz zum Hinzufügen von Inhalten auf einer Webseite zu bieten. Die Typprüfung unterstützt die ordnungsgemäße Verwendung dieser Funktionen, indem sichergestellt wird, dass die zugewiesenen Properties und Optionen im zulässigen Umfang der unterstützten Werte und Typen liegen. Ein Beispiel finden Sie unter Erforderliche Bildbreite und -höhe.
Fehler mit Toasts und Overlays anzeigen
Wie bereits erwähnt, können Konformitätsregeln in mehreren Bereichen angezeigt werden. Derzeit werden Toasts und Overlays untersucht, um Fehler direkt im Browser in der lokalen Entwicklungsumgebung des Nutzers anzuzeigen.
Viele Fehlerprüfungs- und Analysetools, auf die Entwickler angewiesen sind (Lighthouse, Tab „Probleme“ in den Chrome-Entwicklertools), sind passiv und erfordern eine gewisse Nutzerinteraktion, um Informationen abzurufen. Entwickler reagieren eher, wenn Fehler direkt in ihren vorhandenen Tools angezeigt werden und wenn konkrete Maßnahmen zur Behebung des Problems vorgeschlagen werden.
Einhaltung in anderen Frameworks
Die Einhaltung der Standards wird zuerst in Next.js untersucht, mit dem Ziel, sie auf andere Frameworks (Nuxt, Angular usw.) auszuweiten. ESLint und TypeScript werden bereits in vielen Frameworks auf unterschiedliche Weise verwendet, aber das Konzept eines einheitlichen Laufzeitsystems auf Browserebene wird aktiv untersucht.
Fazit
Bei der Einhaltung von Standards werden Best Practices in Regelsätze codiert, die für Entwickler als einfache Codemuster umsetzbar sind. Das Aurora-Team hat sich auf die Ladeleistung konzentriert, aber auch andere Best Practices wie Barrierefreiheit und Sicherheit sind genauso wichtig.
Die Einhaltung von Konformitätsregeln sollte zu vorhersehbaren Ergebnissen führen. Wenn Sie Ihren Tech-Stack ausbauen, kann dies zu einer hohen Nutzerfreundlichkeit führen. Durch die Einhaltung von Standards werden Teams produktiver und die Qualität der Anwendung bleibt auch dann hoch, wenn Teams und Codebases im Laufe der Zeit wachsen.