Bij het Chrome-team vinden we de gebruikerservaring en een bloeiend web-ecosysteem belangrijk. We willen dat gebruikers de best mogelijke ervaring op internet hebben, niet alleen met statische documenten, maar ook wanneer ze rijke, zeer interactieve applicaties gebruiken.
Open-sourcetools en -frameworks spelen een grote rol bij het mogelijk maken van ontwikkelaars om moderne apps voor het web te bouwen, terwijl ze ook goede ontwikkelaarservaringen ondersteunen. Deze raamwerken en tools bieden bedrijven van elke omvang de mogelijkheid, maar ook individuen die voor het internet bouwen.
Wij zijn van mening dat frameworks ook een grote rol kunnen spelen bij het helpen van ontwikkelaars met belangrijke kwaliteitsaspecten zoals prestaties, toegankelijkheid, beveiliging en mobiele gereedheid. In plaats van elke ontwikkelaar en site-eigenaar te vragen een expert op deze gebieden te worden en op de hoogte te blijven van de voortdurend veranderende best practices, kan het raamwerk deze ondersteunen met ingebouwde oplossingen. Dit stelt ontwikkelaars in staat zich te concentreren op het bouwen van productfuncties.
In een notendop is onze visie dat een hoge UX-kwaliteit een neveneffect wordt van bouwen voor het web.
Aurora: een samenwerking tussen Chrome en open-source webframeworks & tools
Bijna twee jaar lang hebben we gewerkt met enkele van de meest populaire frameworks, zoals Next.js, Nuxt en Angular, om de webprestaties te verbeteren. We hebben ook populaire tools en bibliotheken gefinancierd, zoals Vue, ESLint en webpack. Vandaag geven we deze inspanning een naam: Aurora .
Een aurora is een natuurlijk lichtscherm dat in de lucht glinstert. Omdat we proberen gebruikerservaringen die zijn gebouwd met raamwerken te laten glinsteren en schitteren, dachten we dat deze naam een passende keuze was.
De komende maanden zullen we veel meer details over Aurora delen. Dit is een samenwerking tussen een klein team van Chrome-ingenieurs (intern codenaam WebSDK) en framework-auteurs. Ons doel is om de best mogelijke gebruikerservaring te bieden voor productie-apps, ongeacht de browser waarin u rendert.
Wat is onze strategie?
Bij Google hebben we veel geleerd tijdens het gebruik van frameworks en tools voor het bouwen en onderhouden van grootschalige webapplicaties zoals Google Search, Maps, Image Search, Google Photos enz. We ontdekten hoe frameworks een cruciale rol kunnen spelen in de voorspelbare app-kwaliteit door het bieden van sterke standaarden en eigenzinnige instrumenten .
Frameworks hebben een uniek gezichtspunt voor het beïnvloeden van zowel DX als UX, aangezien ze het hele systeem bestrijken: de client en de server, de ontwikkelings- en productieomgevingen, en ze tools integreren zoals compiler, bundelaar, linter enz.
Wanneer oplossingen in het raamwerk zijn ingebakken, kunnen teams van ontwikkelaars deze oplossingen gebruiken en hun tijd besteden aan wat het belangrijkst is voor het product: het leveren van geweldige functies aan gebruikers.
Terwijl we werken aan het verbeteren van tools die in elke laag van de stapel voorkomen, beheren frameworks zoals Next.js, Nuxt en Angular CLI elke stap van de levenscyclus van een applicatie. Om deze reden, en het feit dat de adoptie van React de grootste is binnen het kernecosysteem van het UI-framework, zijn de meeste van onze optimalisaties begonnen met het uittesten in Next.js voordat ze zich uitbreidden naar de rest van het ecosysteem.
Aurora ondersteunt succes op grote schaal door oplossingen naar de juiste laag van populaire tech-stacks te brengen. Door de kloof tussen browsers en frameworks te overbruggen, kan hoge kwaliteit een neveneffect zijn van het bouwen voor het web en tegelijkertijd fungeren als een feedbackloop om het webplatform te verbeteren.
Wat is ons werkproces?
Onze principes voor de manier waarop Aurora een brug slaat tussen browsers en het ecosysteem van ontwikkelaars zijn: nederigheid, nieuwsgierigheid, wetenschappelijk onderzoek en pragmatisme. We werken met raamwerkauteurs aan verbeteringen, werken samen met de gemeenschap en doen ons due diligence voordat we wijzigingen doorvoeren.
Om de stappen samen te vatten die we nemen voor elke nieuwe functie waaraan we werken:
- Identificeer pijn in gebruikerservaringen in een populaire stapel, met behulp van representatieve apps.
- Prototype-oplossingen die dit aanpakken, met de nadruk op ‘sterke standaarden’.
- Verifieer de functie met een andere framework-stack om er zeker van te zijn dat deze aanpasbaar is.
- Valideer de functie door te experimenteren in een aantal productie-apps, meestal met laboratoriumtests voor de prestaties.
- Stimuleer het ontwerp met behulp van het RFC-proces en houd rekening met feedback van de community.
- Plaats het object op een populaire stapel, meestal achter een vlag.
- Schakel de functie in een representatieve productie-app in om de kwaliteit en de workflow-integratie van ontwikkelaars te beoordelen.
- Meet prestatieverbeteringen door statistieken bij te houden in representatieve productie-apps die de functie hebben overgenomen of een upgrade hebben uitgevoerd.
- Schakel de functie in als standaard in de stapel, zodat alle gebruikers die een upgrade uitvoeren hiervan profiteren.
- Als het eenmaal bewezen is, kun je met aanvullende raamwerken werken om de functie binnen te halen.
- Identificeer hiaten in het webplatform met een feedbacklus.
- Ga verder met de volgende problemen.
De onderliggende tools en plug-ins (webpack, Babel, ESLint, TypeScript, enz…) worden door veel frameworks gedeeld. Dit helpt bij het creëren van rimpeleffecten, zelfs wanneer wordt bijgedragen aan een enkele raamwerkstapel.
Bovendien ondersteunt het Chrome Framework Fund open-sourcetools en bibliotheken met financiering. Hoewel we hopen dat er voldoende overlap is in de problemen en oplossingslagen om onze inspanningen hierboven te vertalen naar andere raamwerken en hulpmiddelen, weten we dat we meer kunnen doen. Daarom willen we ons steentje bijdragen om ervoor te zorgen dat bibliotheken en raamwerken die ontwikkelaars helpen succesvol te zijn, kunnen gedijen. Dat is een van de redenen waarom we zullen blijven investeren in het Chrome Framework Fund. Tot nu toe heeft het werk ondersteund in de richting van Webpack 5, Nuxt en de prestaties en verbeteringen van ESLint.
Wat heeft ons werk tot nu toe opgeleverd?
Ons werk was gericht op fundamentele optimalisaties voor bronnen zoals afbeeldingen, JS, CSS en lettertypen. We hebben een aantal optimalisaties doorgevoerd om de standaardinstellingen van meerdere frameworks te verbeteren, waaronder:
- Een afbeeldingscomponent in Next.js die best practices voor het laden van afbeeldingen omvat, gevolgd door een samenwerking met Nuxt op hetzelfde gebied. Het gebruik van deze component heeft geresulteerd in aanzienlijke verbeteringen in de tekentijden en de lay-outverschuiving (bijvoorbeeld: 57% reductie in de grootste inhoudsvolle verf en 100% reductie in de cumulatieve lay-outverschuiving op nextjs.org/give ).
- Geautomatiseerde inlining van CSS voor declaraties van weblettertypen tijdens het bouwen. Deze functie is geland in Angular (Google Fonts) en Next.js (Google Fonts en Adobe Fonts), wat heeft geresulteerd in opmerkelijke verbeteringen aan Largest Contentful Paint en First Contentful Paint ( voorbeeld ).
- Kritische CSS inlinen met behulp van Critters in zowel Angular als Next.js om de verftijden te verkorten. Resulteerde in een verbetering van 20-30 punten in de Lighthouse-prestatiescores in een typische, grootschalige Angular-app wanneer dit werd gecombineerd met de inlining-functie van lettertype-CSS.
- Out-of-the-box ESLint-ondersteuning in Next.js met een aangepaste plug-in en deelbare configuratie om het gemakkelijker te maken om algemene raamwerkspecifieke problemen tijdens de build-time op te sporen, wat resulteert in voorspelbaardere laadprestaties.
- Een introductie van een ingebouwde prestatierelais in Create React App en Next.js om gemakkelijker inzicht te krijgen in de paginaprestaties via webvitaliteit en andere aangepaste statistieken.
- Granulaire chunking wordt geleverd in Next.js en Gatsby, wat resulteert in een reductie van 30 tot 70 procent in bundelgroottes terwijl de caching-prestaties worden verbeterd. Dit is de standaard geworden in Webpack 5.
- Een apart polyfill-stuk voor oudere browsers, in samenwerking met het Next.js-team, om de bundelgrootte in moderne browsers te verbeteren.
Al deze functies zijn geautomatiseerd en standaard ingeschakeld of vereisen slechts een eenvoudige aanmelding. Dit is essentieel om ervoor te zorgen dat ontwikkelaars gemakkelijk de vruchten kunnen plukken zonder hun workflow ingewikkelder te maken.
Wat zijn wij van plan voor 2021?
De rest van dit jaar zullen we ons concentreren op het helpen van framework-stacks bij het verbeteren van de gebruikerservaring en hoe goed ze presteren op het gebied van statistieken zoals de Core Web Vitals. Dit werk omvat:
- Conformiteit voor het afdwingen van best practices. Bekijk de blogpost voor meer informatie.
- Optimalisatie van de initiële laadprestaties door voort te bouwen op onze samenwerkingen om afbeeldingen , lettertypen en kritische CSS te optimaliseren.
- Het laden van scripts van derden (3P's) met minimale prestatie-impact door voort te bouwen op onze basis van werk aan een Script- component en diepgaand onderzoek uit te voeren naar de beste manier om 3P's te ordenen en te sequencen.
- JavaScript-prestaties op schaal (bijvoorbeeld ondersteuning van React Server-componenten in Next.js).
Ons team zal ernaar streven om regelmatiger informatie over RFC's en ontwerpdocumenten voor deze ideeën te posten, zodat elk raamwerk of elke ontwikkelaar die dit wil volgen dit kan doen.
Conclusie
Het Aurora-team ( Shubhie , Houssein , Alex , Gerald , Ralph , Addy , Kara , Keen , Katie ) kijkt ernaar uit om nauw samen te blijven werken met de open-source framework-gemeenschap aan het verbeteren van de standaardinstellingen voor de gebruikerservaring in Next.js, Nuxt en Angular. We zullen onze betrokkenheid vergroten om in de loop van de tijd nog meer raamwerken en tools te kunnen bestrijken. Houd deze ruimte in de gaten voor meer blogposts, lezingen en RFC's van ons team het komende jaar :)