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 za pomocą wbudowanych rozwiązań. 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 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.
Zorza to naturalne zjawisko świetlne, które migocze na niebie. Staramy się, aby aplikacje korzystające z ramek były jak najbardziej atrakcyjne, 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 niewielkim zespołem inżynierów Chrome (wewnętrzny kod roboczy WebSDK) a twórcami frameworka. Naszym celem jest zapewnienie użytkownikom jak najlepszych wrażeń 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 ramek 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 ramki mogą odgrywać kluczową rolę w zapewnianiu przewidywalnej jakości aplikacji, zapewniając solidne wartości domyślne 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 narzędzi, 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 służy jako pętla sprzężenia zwrotnego, która pozwala ulepszać platformę internetową.
Jak wygląda nasz proces pracy?
Nasze zasady dotyczące tego, jak Aurora łączy przeglądarki z ekosystemem deweloperów, to: pokora, ciekawość, pragmatyzm i badania naukowe. Współpracujemy z twórcami frameworków nad ulepszeniami, współpracujemy ze społecznością i przeprowadzamy weryfikację przed wprowadzeniem zmian.
Oto podsumowanie kroków, które wykonujemy w przypadku każdej nowej funkcji, nad którą pracujemy:
- 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 innym zbiorem 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 przyjęły funkcję lub zostały zaktualizowane.
- 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 ram, aby wdrożyć funkcję.
- Wykrywanie luk w platformie internetowej za pomocą pętli sprzężenia zwrotnego.
- Przejdź do kolejnych problemów.
Podstawowe narzędzia i wtyczki (webpack, Babel, ESLint, TypeScript itp.) są współdzielone przez wiele 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 odnosić 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 przesunięcia układu (np. 57% krótszy czas największego wyrenderowania treści i 100% krótszy czas przesunięcia skumulowanego 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 Angular i Next.js, aby skrócić czas malowania. W przypadku typowej, dużej aplikacji Angular, która została połączona z funkcją wstawiania czcionek w CSS, spowodowało to poprawę wyników Lighthouse o 20–30 punktów.
- Wbudowane obsługa ESLint w Next.js, która obejmuje niestandardowy wtyczek i konfigurację umożliwiającą udostępnianie. Ułatwia to wykrywanie typowych problemów związanych z ramkami w czasie kompilacji, co przekłada się na bardziej przewidywalną wydajność wczytywania.
- 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 nami w zakresie optymalizacji obrazów, czcionek i kluczowych elementó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 dokumentach projektowych dotyczących 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 zapytań dotyczących bezpieczeństwa od naszego zespołu.