W zespole Chrome dbamy o wygodę korzystania i o rozwój ekosystemu internetowego. Chcemy zapewnić użytkownikom jak najlepszą jakość obsługi w internecie nie tylko w przypadku dokumentów statycznych, ale też podczas korzystania z bogatych, wysoce interaktywnych aplikacji.
Narzędzia i ramy open source ułatwiają deweloperom tworzenie nowoczesnych aplikacji internetowych, a zarazem zapewniają im wygodę pracy. Te platformy i narzędzia umożliwiają tworzenie aplikacji internetowych firmom o różnej wielkości oraz osobom prywatnym.
Uważamy, że frameworki mogą też odgrywać ważną rolę w pomaganiu deweloperom w kluczowych aspektach jakości, takich jak wydajność, dostępność, bezpieczeństwo i gotowość na urządzenia mobilne. Zamiast wymagać od każdego dewelopera i właściciela witryny, aby stali się ekspertami w tych obszarach i nadążali za ciągle zmieniającymi się sprawdzonymi metodami, framework może wspierać je dzięki wbudowanym rozwiązaniom. Dzięki temu deweloperzy mogą skupić się na tworzeniu funkcji produktu.
Krótko mówiąc, naszym zdaniem wysoka jakość UX jest efektem ubocznym tworzenia aplikacji internetowych.
Aurora: współpraca między Chrome a platformami i narzędziami do tworzenia stron internetowych opartymi na open source
Przez prawie 2 lata pracowaliśmy nad ulepszaniem wydajności stron internetowych, korzystając z najpopularniejszych frameworków, takich jak Next.js, Nuxt i Angular. Dofinansowaliśmy też popularne narzędzia i biblioteki, takie jak Vue, ESLint czy webpack. Dzisiaj nadajemy temu projektowi nazwę Aurora.
Aurora to naturalne zjawisko świetlne, które migocze na niebie. Staramy się, aby wrażenia użytkowników korzystających z ramek były jak najlepsze, dlatego uznaliśmy, że ta nazwa będzie odpowiednia.
W najbliższych miesiącach udostępnimy więcej informacji na temat Aurory. Jest to efekt współpracy między małym zespołem inżynierów Chrome (wewnętrzny kod roboczy WebSDK) a twórcami frameworka. Naszym celem jest zapewnienie użytkownikom jak najlepszej jakości w przypadku aplikacji produkcyjnych niezależnie od przeglądarki, w której renderujesz aplikację.
Na czym polega nasza strategia?
W Google nauczyliśmy się wiele, korzystając z ram i narzędzi do tworzenia i utrzymywania dużych aplikacji internetowych, takich jak wyszukiwarka Google, Mapy, wyszukiwarka obrazów czy Zdjęcia Google. Odkryliśmy, że ramy mogą odgrywać kluczową rolę w zapewnieniu przewidywalnej jakości aplikacji, zapewniając solidne domyślne wartości i narzędzie z opiniami.
Platformy mają wyjątkową pozycję do wpływania na DX i UX, ponieważ obejmują cały system: klienta i serwer, środowisko programistyczne i produkcyjne oraz integrują narzędzia takie jak kompilator, pakiet, lint itp.
Gdy rozwiązania są wbudowane w ramy, zespoły programistów mogą z nich korzystać i skupić się na tym, co jest najważniejsze dla produktu, czyli na udostępnianiu użytkownikom świetnych funkcji.
Cały czas pracujemy nad ulepszaniem narzędzi na każdym poziomie platformy, a takie frameworki jak Next.js, Nuxt i Angular CLI umożliwiają zarządzanie każdym etapem cyklu życia aplikacji. Z tego powodu i z tego, że React jest najczęściej używanym frameworkiem w ekosystemie frameworków interfejsu użytkownika, większość naszych optymalizacji rozpoczęła się od sprawdzenia w Next.js, zanim zostały zastosowane w pozostałych elementach ekosystemu.
Aurora pomaga osiągnąć sukces na dużą skalę, dostarczając rozwiązania na odpowiednim poziomie popularnych stosów technologicznych. Wypełnia ona lukę między przeglądarkami a platformami, umożliwiając tworzenie wysokiej jakości treści w internecie, a także tworzenie pętli sprzężenia zwrotnego w celu ulepszania platformy internetowej.
Jak wygląda nasz proces pracy?
Nasze zasady dotyczące tego, jak Aurora łączy przeglądarki z ekosystemem deweloperów, to: skromność, ciekawość, pragmatyzm i dociekliwość naukowa. Współpracujemy z twórcami frameworków nad ulepszeniami, współpracujemy ze społecznością i dokonujemy należytej staranności przed wprowadzeniem zmian.
Oto podsumowanie kroków, które wykonujemy w przypadku każdej nowej funkcji:
- Określ problemy związane z wygodą użytkowników w popularnym pakiecie aplikacji, korzystając z reprezentatywnych aplikacji.
- prototypy rozwiązań, które rozwiązują ten problem, ze szczególnym uwzględnieniem „mocnych domyślnych ustawień”.
- Sprawdź funkcję z użyciem innego zbioru frameworków, aby mieć pewność, że jest ona elastyczna.
- Sprawdzanie funkcji przez przetestowanie jej w kilku aplikacjach produkcyjnych, zwykle z wykorzystaniem testów laboratoryjnych skuteczności.
- prowadzić proces projektowania, korzystając z procesu RFC, i uwzględniać opinie społeczności;
- Wprowadzić funkcję w popularnym zbiorze funkcji, zwykle za pomocą flagi.
- Włącz tę funkcję w reprezentatywnej aplikacji produkcyjnej, aby ocenić jakość i integrację z procesem dewelopera.
- Pomiar poprawy wydajności przez śledzenie danych w reprezentatywnych produkcyjnych wersjach aplikacji, które wdrożyły tę funkcję lub ją uaktualniły.
- Włącz funkcję jako domyślną w pakiecie, aby wszyscy użytkownicy korzystający z ulepszonej wersji mogli z niej korzystać.
- Gdy się sprawdzi, użyj dodatkowych frameworków, aby wdrożyć funkcję.
- Wykrywanie luk w platformie internetowej za pomocą pętli sprzężenia zwrotnego.
- Przejdź do kolejnych problemów.
Ukryte narzędzia i wtyczki (webpack, Babel, ESLint, TypeScript itp.) są wspólne dla wielu platform. Pomaga to tworzyć efekty domina, nawet jeśli przyczyniasz się do tworzenia pojedynczego zbioru frameworków.
Ponadto Fundusz na potrzeby ramowego projektu Chrome wspiera finansowo narzędzia i biblioteki open source. Mamy nadzieję, że problemy i poziomy rozwiązań są na tyle podobne, że nasze działania można przełożyć na inne platformy i narzędzia, ale wiemy, że możemy zrobić więcej. Chcemy więc zrobić wszystko, co w naszej mocy, aby biblioteki i platformy, które pomagają deweloperom osiągać sukcesy, mogły się rozwijać. To jeden z powodów, dla których będziemy nadal inwestować w fundusz Chrome Framework. Do tej pory wspierała ona prace nad Webpack 5, Nuxt oraz wydajnością i ulepszeniami ESLint.
Co udało nam się do tej pory osiągnąć?
Nasze działania koncentrowały się na podstawowych optymalizacjach takich zasobów jak obrazy, JS, CSS i czcionki. Wprowadziliśmy kilka ulepszeń, aby poprawić domyślne wartości wielu frameworków, w tym:
- Komponent Image w Next.js, który zawiera sprawdzone metody ładowania obrazów, a następnie współpracę z Nuxt nad tymi metodami. Zastosowanie tego komponentu spowodowało znaczne skrócenie czasu renderowania i skumulowanego przesunięcia układu (np. 57% spadek największego czasu wyrenderowania treści i 100% spadek skumulowanego przesunięcia układu na stronie nextjs.org/give).
- Automatyczne wstawianie deklaracji czcionek internetowych w kodzie CSS w momencie kompilacji. Ta funkcja została wprowadzona w Angular (Google Fonts) i Next.js (Google Fonts i Adobe Fonts), co spowodowało znaczną poprawę wartości Largest Contentful Paint i First Contentful Paint (przykład).
- Wstawianie krytycznego kodu CSS za pomocą Critters w Angularze i Next.js, aby skrócić czas malowania. W połączeniu z funkcją wstawiania czcionek w CSS-ie spowodowało to poprawę wyników Lighthouse o 20–30 punktów w przypadku typowej, dużej aplikacji Angular, gdy zastosowano to w połączeniu z funkcją wstawiania czcionek w CSS-ie.
- gotowy obsługa ESLint w Next.js, która obejmuje niestandardowy wtyczek i konfigurację umożliwiającą udostępnianie, ułatwiającą wykrywanie typowych problemów związanych z ramkami w czasie kompilacji, co przekłada się na bardziej przewidywalną wydajność ładowania;
- Wprowadzenie w Create React App i Next.js wbudowanego narzędzia do przekazywania danych o wydajności, które ułatwia uzyskiwanie informacji o wydajności strony dzięki wskaźnikom web vitals i innym niestandardowym danym.
- Podział na drobne części w Next.js i Gatsby, który pozwolił zmniejszyć rozmiary pakietów o 30–70%, a zarazem poprawić wydajność buforowania. Jest to domyślne ustawienie w Webpack 5.
- oddzielny element polyfill dla starszych przeglądarek, opracowany we współpracy z zespołem Next.js, aby zmniejszyć rozmiar pakietu w przypadku nowoczesnych przeglądarek;
Każda z tych funkcji została zautomatyzowana i włączona domyślnie lub wymaga tylko prostej zgody. Jest to niezbędne, aby deweloperzy mogli łatwo korzystać z tych funkcji bez komplikowania sobie pracy.
Co planujemy na 2021 r.?
Do końca tego roku będziemy się skupiać na pomaganiu zespołom frameworków w ulepszaniu wrażeń użytkowników i ich wyników w przypadku takich danych jak podstawowe wskaźniki internetowe. Te działania obejmują:
- Zgodność ze sprawdzonymi metodami. Więcej informacji znajdziesz w poście na blogu.
- Optymalizacja wydajności wstępnego wczytywania dzięki współpracy z Google w zakresie optymalizacji obrazów, czcionek i kluczowych plików CSS.
- Ładowanie skryptów innych firm z minimalnym wpływem na wydajność dzięki wykorzystaniu naszych doświadczeń w zakresie komponentu skryptu oraz dokładnemu zbadaniu, jak najlepiej uporządkować i uporządkować skrypty innych firm.
- wydajność JavaScripta na dużą skalę (np. obsługa komponentów serwera React w Next.js);
Nasz zespół będzie regularnie publikować informacje o RFC i dokumenty projektowe dotyczące tych pomysłów, aby każdy framework lub deweloper, który chce je wykorzystać, miał do nich dostęp.
Podsumowanie
Zespół Aurora (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, Katie) będzie nadal ściśle współpracować z komunitą frameworków open source nad ulepszaniem domyślnych ustawień dotyczących wrażeń użytkowników w Next.js, Nuxt i Angular. Z czasem będziemy angażować się w jeszcze więcej ram i narzędzi. W nadchodzącym roku będziemy publikować więcej postów na blogu, nagrań z wykładów i prośb o ocenę wpływu.