W zespole Chrome dbamy o wygodę użytkowników i rozwijający się ekosystem internetowy. Chcemy, aby użytkownicy mogli komfortowo korzystać z internetu nie tylko za pomocą statycznych dokumentów, ale także wtedy, gdy korzystają z rozbudowanych, wysoce interaktywnych aplikacji.
Narzędzia i platformy open source odgrywają dużą rolę w tworzeniu nowoczesnych aplikacji internetowych i zapewniają deweloperom dobre wrażenia. Te struktury i narzędzia pomagają firmom każdej wielkości, a także osobom indywidualnym tworzącym sieć.
Uważamy, że platformy mogą również odgrywać ważną rolę w pomaganiu deweloperom w kluczowych aspektach związanych z jakością, takimi jak wydajność, dostępność, bezpieczeństwo czy gotowość na urządzenia mobilne. Zamiast prosić każdego dewelopera i właściciela witryny, aby stali się ekspertem w tych dziedzinach i byli na bieżąco z stale zmieniającymi się sprawdzonymi metodami, możemy Ci w tym pomóc za pomocą wbudowanych rozwiązań. Dzięki temu deweloperzy mogą skupić się na tworzeniu funkcji usługi.
Mówiąc w skrócie, uważamy, że wysoki poziom jakości UX staje się efektem ubocznym tworzenia witryn internetowych.
Aurora: współpraca Chrome z internetowymi platformami i narzędziami typu open source
Od niemal 2 lat współpracujemy z jednymi z najpopularniejszych platform takich jak Next.js, Nuxt i Angular, aby zwiększyć wydajność witryn. Wspieramy też popularne narzędzia i biblioteki, takie jak Vue, ESLint czy Webpack. Dziś nadamy mu nazwę Aurora.
Zorza polarna to naturalne światło migoczące na niebie. Chcemy, aby korzystanie z platformy sprawiało wrażenie, ale uznaliśmy, że to odpowiednia nazwa.
W najbliższych miesiącach będziemy udostępniać więcej szczegółów na temat Aurory. Jest to efekt współpracy niewielkiego zespołu inżynierów Chrome (nazywanych wewnętrznie kryptonimem WebSDK) i autorów platform. Naszym celem jest zapewnienie użytkownikom jak najlepszych wrażeń przeznaczonych dla aplikacji w wersji produkcyjnej niezależnie od przeglądarki, w której się ona renderuje.
Jaka jest nasza strategia?
W Google sporo się dowiedzieliśmy, korzystając z platform i narzędzi do tworzenia i obsługiwania aplikacji internetowych na dużą skalę, takich jak wyszukiwarka Google, Mapy, wyszukiwarka grafiki, Zdjęcia Google. Przekonaliśmy się, że platformy mogą odgrywać kluczową rolę w przewidywalnej jakości aplikacji, udostępniając silne ustawienia domyślne i dostosowane narzędzia.
Platformy mają unikalny punkt obserwacyjny, w którym wpływają zarówno na DX, jak i UX, gdy obejmują cały system – klienta i serwer oraz środowiska programistyczne i produkcyjne. Wykorzystują również do integracji narzędzi, takich jak kompilator, pakiet, linter itp.
Gdy rozwiązania są wbudowane w platformę, zespoły programistów mogą z nich korzystać i skupić się na tym, co najważniejsze dla produktu, czyli dostarczaniu użytkownikom świetnych funkcji.
Pracujemy nad ulepszaniem narzędzi, które działają w każdej warstwie stosu, czyli platformach takich jak Next.js, Nuxt i Angular CLI, ale zarządzamy każdym etapem cyklu życia aplikacji. Z tego powodu i w największym stopniu wdrożenia React w ramach głównego ekosystemu platformy UI większość naszych optymalizacji zaczęła się pojawiać w Next.js, a następnie rozszerzyła ją na resztę ekosystemu.
Aurora wspiera sukces na dużą skalę, udostępniając rozwiązania w odpowiedniej warstwie popularnych stosów technologicznych. Dzięki wypełnianiu luki między przeglądarkami a platformami wysokiej jakości treści stają się efektem ubocznym tworzenia treści internetowych, a jednocześnie działają jako pętla informacji zwrotnych do ulepszania platformy internetowej.
Jak wygląda nasz proces pracy?
Nasze zasady dotyczące tego, jak Aurora łączy przeglądarki z ekosystemem programistów, to: pokora, ciekawość, badania naukowe i pragmatyzm. Współpracujemy z autorami platform, a także współpracujemy ze społecznością i przed wprowadzeniem jakichkolwiek zmian dokładnie sprawdzamy treści.
Oto podsumowanie czynności, które podejmujemy w przypadku każdej nowej funkcji, nad którą pracujemy:
- Przedstaw problemy z wrażeniami użytkowników w popularnym stosie za pomocą reprezentatywnych aplikacji.
- Prototypowe rozwiązania rozwiązujące tę kwestię, z naciskiem na „silne ustawienia domyślne”.
- Sprawdź funkcję przy użyciu innego stosu platformy, aby upewnić się, że można ją dostosować.
- Sprawdź tę funkcję, eksperymentując z kilkoma aplikacjami w wersji produkcyjnej – zwykle z testami laboratoryjnymi pod kątem wydajności.
- Projektowanie treści z wykorzystaniem procesu RFC z uwzględnieniem opinii społeczności.
- Umieść element na popularnym stosie, zwykle za flagą.
- Włącz tę funkcję w reprezentatywnej aplikacji produkcyjnej, aby ocenić jakość i integrację przepływu pracy dewelopera.
- Możesz mierzyć wzrost wydajności, śledząc dane w reprezentatywnych aplikacjach produkcyjnych, które wdrożyły tę funkcję lub uaktualniły.
- Włącz tę funkcję jako domyślną w stosunku, aby na tym skorzystać wszyscy użytkownicy, którzy przeszli na nową wersję.
- Gdy to się stanie, skorzystaj z dodatkowych platform, aby wdrożyć tę funkcję.
- Identyfikacja luk w platformie internetowej za pomocą pętli informacji zwrotnych.
- Przejdź do następnego zadania.
Podstawowe narzędzia i wtyczki (webpack, Babel, ESLint, TypeScript itp.) są wykorzystywane w wielu różnych platformach. Pomaga to uzyskać efekty fali, nawet jeśli przyczyniają się one do jednego stosu platform.
Poza tym Chrome Framework Fund wspiera finansowane narzędzia i biblioteki open source. Mamy nadzieję, że problemy i warstwy rozwiązań, które występują w naszych wysiłkach, pokrywają się w wystarczającym stopniu, aby można było przełożyć się na inne platformy i narzędzia. Wiemy jednak, że możemy zrobić więcej. Dlatego chcemy zadbać o to, aby biblioteki i platformy ułatwiały deweloperom odnoszenie sukcesów. Dlatego będziemy nadal inwestować w Chrome Framework Fund. Do tej pory wspierano go w pracy nad pakietami Webpack 5, Nuxt oraz nad wydajnością i ulepszeniami ESLint.
Co udało nam się osiągnąć do tej pory?
Koncentrujemy się na podstawowej optymalizacji zasobów takich jak obrazy, JS, CSS i czcionki. Wprowadziliśmy kilka optymalizacji, które mają poprawić wartości domyślne wielu platform, takich jak:
- Komponent Obraz w kodzie Next.js, który zawiera sprawdzone metody ładowania obrazów, oraz treści powstałe we współpracy z Nuxt. Zastosowanie tego komponentu spowodowało znaczne skrócenie czasu renderowania i przesunięcia układu (np. o 57% zmniejszenie największego wyrenderowania treści i 100% skumulowanego przesunięcia układu na stronie nextjs.org/give).
- Automatyczne wstawianie kodu CSS w przypadku deklaracji czcionek internetowych podczas kompilacji. Ta funkcja jest dostępna w wersjach Angular (Google Fonts) i Next.js (Google Fonts i Adobe Fonts), co w dużym stopniu wprowadza ulepszenia w formatach największej części treści (Largest Contentful) oraz First Contentful Paint (przykład).
- Wbudowanie newralgicznego kodu CSS za pomocą Critters w Angular i Next.js pozwala skrócić czas renderowania. Po połączeniu tej funkcji z funkcją wbudowania CSS czcionek poprawiło to o 20–30 punktów wzrost wydajności w typowej, dużej aplikacji Angular w aplikacji Angular o 20–30 punktach.
- Gotowe do użycia obsługę ESLint w Next.js, która zawiera niestandardową wtyczkę i konfigurację do udostępniania, która ułatwia wychwytywanie typowych problemów ze platformą podczas kompilacji, co przekłada się na bardziej przewidywalne wczytywanie.
- Wprowadzenie wbudowanego ponowienia warstwy wydajności w funkcjach Create React App i Next.js, które ułatwiają analizowanie wydajności strony za pomocą wskaźników internetowych i innych niestandardowych danych.
- Szczegółowa porcja fragmentów jest udostępniana w środowiskach Next.js i Gatsby, co pozwala zmniejszyć rozmiar pakietów o 30–70% i poprawić wydajność buforowania. Stało się to domyślne w pakiecie Webpack 5.
- Oddzielny fragment kodu polyfill dla starszych przeglądarek we współpracy z zespołem Next.js w celu zwiększenia rozmiaru pakietów w nowoczesnych przeglądarkach.
Każda z tych funkcji została domyślnie włączona automatycznie lub wymaga jedynie prostej zgody. Dzięki temu deweloperzy mogą łatwo korzystać z zalet bez komplikacji swojego przepływu pracy.
Co planujemy na 2021 r.?
Przez resztę tego roku będziemy skupiać się na pomaganiu stosom platform w zwiększaniu wygody użytkowników i ich skuteczności w zakresie takich danych jak podstawowe wskaźniki internetowe. Zakres prac:
- Zgodność ze sprawdzonymi metodami. Więcej informacji znajdziesz w poście na blogu.
- Optymalizowanie początkowej wydajności wczytywania przez współpracę w celu optymalizacji obrazów, czcionek i krytycznych elementów CSS.
- Wczytywanie skryptów firm zewnętrznych przy minimalnym wpływie na wydajność jest uzależnione od naszej pracy nad komponentem skryptu oraz pogłębionych analiz dotyczących najlepszej kolejności i sekwencji elementów zewnętrznych.
- Wydajność JavaScriptu na dużą skalę (np. obsługa komponentów serwera React w Next.js).
Nasz zespół będzie się starał regularnie publikować informacje o dokumentach RFC oraz dokumenty projektowe z tymi pomysłami, aby umożliwić wszystkim konfigurowanie platformy lub dewelopera.
Podsumowanie
Zespół Aurora (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, Katie.js, Katie.js) dążą do dalszego udoskonalania środowiska open source Angular i close.js. Z czasem będziemy zwiększać nasze zaangażowanie, aby uwzględnić kolejne platformy i narzędzia. Zaglądaj tu, by w przyszłym roku zamieścić więcej postów na blogu, artykułów i dokumentów RFC naszego zespołu :)