Zgodność z ekosystemem platformy JavaScript
W poście na blogu wprowadzającym pokazaliśmy, w jaki sposób wiele się dowiedzieliśmy, tworząc i używając platform i narzędzi do tworzenia i obsługiwania aplikacji internetowych na dużą skalę, takich jak wyszukiwarka Google, Mapy, Zdjęcia itd. Chroniąc deweloperów przed pisaniem kodu, który może negatywnie wpływać na wrażenia użytkowników, udowodniliśmy, że platformy mogą odgrywać kluczową rolę w zmienianiu wyników w zakresie wydajności i jakości aplikacji.
Wewnętrznie w Google używamy terminu „Zgodność”, aby opisać tę metodologię. W tym artykule opisujemy, jak planujemy udostępnić tę koncepcję na licencji open source w ekosystemie platformy JavaScript.
Co to jest zgodność?
W Google Conformance okazało się ewolucją. Zespoły korzystały z pomocy niewielkiej grupy doświadczonych specjalistów, którzy przeprowadzili szczegółową weryfikację kodu i sygnalizowali czynniki wpływające na jakość i łatwość obsługi aplikacji znacznie wykraczające poza problemy dotyczące poprawności. Na potrzeby rosnących zespołów deweloperów aplikacji opracowaliśmy system zgodności do kodowania sprawdzonych metod w sposób zautomatyzowany i wykonalny. Pozwoliło to utrzymać wysoki poziom jakości aplikacji i utrzymania bazy kodu niezależnie od liczby współtwórców.
Zgodność to system, który dba o to, aby deweloperzy zostali na dobrze oświetlonej ścieżce, budzą pewność siebie i zapewniają przewidywalne wyniki. Zwiększa produktywność zespołów i staje się kluczowa dla skalowania – w miarę rozwoju zespołów i pojawiania się kolejnych funkcji jednocześnie opracowuje się nowe funkcje. Pozwala deweloperom skupić się na tworzeniu funkcji usługi, uwalniając ich od zawiłości i zmieniającego się krajobrazu w różnych obszarach, takich jak wydajność, dostępność, bezpieczeństwo itp. Każdy może w każdej chwili zrezygnować z zachowania zgodności. Można go też dostosować w zakresie, w jakim zespoły mogą egzekwować to, do czego zobowiążą się dostosować.
Zgodność opiera się na silnych ustawieniach domyślnych i udostępnianiu reguł, które można podjąć w czasie tworzenia. Składa się to z 3 poniższych zasad.
1. Silne ustawienia domyślne
Podstawowym aspektem zgodności jest zapewnienie, że narzędzia, których używają deweloperzy, mają silne ustawienia domyślne. Oznacza to, że rozwiązania są nie tylko wbudowane w struktury, ale także wzorce ich projektowania, aby ułatwić wykonywanie właściwych i trudnych czynności do zastosowania. Platforma wspiera programistów w projektowaniu aplikacji i strukturze kodu.
Aby zapewnić wydajność ładowania, należy zoptymalizować wszystkie zasoby (czcionki, CSS, JavaScript, obrazy itd.). To złożone wyzwanie polegające na skróceniu bajtów, ograniczeniu błądzenia w obie strony oraz wydzieleniu tego, co jest potrzebne do pierwszego renderowania, gotowości wizualnej i interakcji użytkownika. Może to być na przykład wyodrębnianie krytycznego kodu CSS i ustawianie priorytetu ważnych obrazów.
2. Reguły, które można wykorzystać
Nawet po wprowadzeniu podstawowych optymalizacji deweloperzy nadal muszą dokonywać wyborów. Istnieje wiele możliwości optymalizacji związanych z ilością odpowiedzi dewelopera:
- Wartości domyślne, które nie wymagają wprowadzania danych przez programistę, takie jak wbudowanie newralgicznego kodu CSS.
- Wymagana zgoda dewelopera. Można np. użyć komponentu obrazu udostępnionego przez platformę do określania rozmiaru i skalowania obrazów.
- Wymagają zgody dewelopera i dostosowania do własnych potrzeb. Dotyczy to na przykład tagowania ważnych obrazów, aby zostały wczytane z wyprzedzeniem.
- Nie jest to konkretna funkcja, ale rzeczy, które nadal wymagają decyzji dewelopera. Na przykład unikaj stosowania czcionek i skryptów synchronicznych, które opóźniają wczesne renderowanie.
Optymalizacje, które wymagają jakiejkolwiek decyzji dewelopera, mogą zagrażać wydajności aplikacji. W miarę dodawania funkcji, a Twój zespół się rozwija, nawet najbardziej doświadczeni deweloperzy nie są w stanie nadążyć za ciągle zmieniającymi się sprawdzonymi metodami i nie jest to najlepszy sposób na wykorzystanie ich czasu. W kontekście zgodności odpowiednie przydatne reguły są równie ważne jak silne ustawienia domyślne, dzięki czemu aplikacja będzie nadal spełniać określone standardy nawet wtedy, gdy deweloperzy będą wprowadzać zmiany.
3. Czas utworzenia
Problemy z wydajnością należy wykryć i wykluczyć na wczesnym etapie cyklu programowania. Czas tworzenia, zanim kod zostanie zaakceptowany, najlepiej nadaje się do wychwytywania i rozwiązywania problemów. Im później problem utknie w cyklu programowania, tym trudniej jest go rozwiązać i tym drożej. Dotyczy to problemów z poprawnością, ale odnosi się to również do problemów z wydajnością, ponieważ wiele z tych problemów nie zostanie rozwiązanych wstecz po wprowadzeniu zmian w bazie kodu.
Obecnie większość opinii o skuteczności wychodzi poza zakres dokumentacji lub jednorazowych audytów albo pojawia się zbyt późno w wyniku regresji wskaźników po wdrożeniu w środowisku produkcyjnym. Chcemy to zmienić w czasie tworzenia.
Zgodność platform
Aby zadbać o wygodę użytkowników w zakresie wczytywania, należy odpowiedzieć na te pytania:
- Co składa się na optymalne wczytywanie i jakie są typowe problemy, które mogą negatywnie wpływać na jego wczytywanie?
- Jakie rozwiązania, które można stosować, nie wymagają udziału dewelopera?
- Jak możemy mieć pewność, że deweloper będzie wykorzystywał te rozwiązania w optymalny sposób?
- Jakie inne opcje może wpłynąć na szybkość wczytywania stron?
- Jakie wzorce kodu mogą nam pomóc w ocenie tych wyborów (nr 3 i 4 powyżej) na wczesnym etapie tworzenia?
- Jakie reguły możemy opracować, aby ocenić te wzorce kodu? Jak można je zaprezentować deweloperowi w trakcie tworzenia, a jednocześnie płynnie zintegrować je z przepływem pracy?
Aby wprowadzić nasz wewnętrzny model zgodności w Google do platform open source, nasz zespół dokładnie eksperymentował z Next.js. Z przyjemnością przedstawiamy naszą wizję i plany. Zdaliśmy sobie sprawę, że najlepszy zestaw reguł do oceny wzorców kodu będzie wymagał połączenia analizy kodu statycznego i testów dynamicznych. Reguły te mogą obejmować wiele obszarów, w tym:
- ESLint
- TypeScript
- Dynamiczne weryfikacje na serwerze programistycznym użytkownika (po utworzeniu DOM)
- Program do tworzenia pakietów modułów (webpack)
- Narzędzia CSS (wciąż eksploracyjne)
Udostępniając reguły za pomocą różnych narzędzi, zapewniamy, że są one spójne, ale mogą też uwzględniać wszelkie problemy z wrażeniami użytkowników, które bezpośrednio wpływają na szybkość wczytywania. Te reguły mogą być też pokazywane deweloperom w różnych momentach:
- Podczas lokalnego programowania na serwerze programistycznym przeglądarka i IDE użytkownika będą wyświetlać ostrzeżenia, zachęcając deweloperów do wprowadzenia niewielkich zmian w kodzie.
- Podczas kompilacji nierozwiązane problemy zostaną ponownie wyświetlone w terminalu użytkownika
W skrócie zespoły wybierają wyniki, na których im zależy, takie jak podstawowe wskaźniki internetowe czy wydajność wczytywania, oraz włączają odpowiednie zestawy reguł dla wszystkich współtwórców kodu.
Sprawdza się to naprawdę dobrze w przypadku nowych projektów, ale nie jest łatwo uaktualniać duże bazy kodu, aby zapewnić zgodność z pełnymi zestawami reguł. W Google mamy rozbudowany system rezygnacji z reklam na różnych poziomach. Mogą to być poszczególne wiersze kodu źródłowego, całe katalogi, starsze bazy kodu lub części aplikacji, które nie są aktywnie opracowywane. Aktywnie poszukujemy skutecznych strategii udostępniania tych rozwiązań zespołom za pomocą platform open source.
Zgodność w Next.js
ESLint jest powszechnie używany przez programistów JavaScript. Ponad 50% aplikacji Next.js korzysta z ESLint w niektórych częściach procesu tworzenia. Program Next.js w wersji 11 zawiera gotową obsługę ESLint, która obejmuje niestandardową wtyczkę i konfigurację do udostępniania, która ułatwia wychwytywanie typowych problemów ze platformą podczas programowania i w trakcie kompilacji. Pomaga to programistom rozwiązywać poważne problemy podczas tworzenia. Dotyczy to na przykład sytuacji, w której dany komponent jest używany lub nieużywany w sposób, który może obniżyć wydajność, jak w opisie Brak linku HTML do strony. Jeśli czcionka, arkusz stylów lub skrypt może negatywnie wpłynąć na ładowanie zasobów na stronie. na przykład Brak skryptu synchronicznego.
Oprócz standardu ESLint zintegrowane sprawdzanie typu zarówno w programie, jak i w środowisku produkcyjnym, jest obsługiwane w Next.js od wersji 9 z obsługą TypeScriptu. Liczne komponenty udostępniane przez platformę (obraz, skrypt, link) opracowano jako rozszerzenie elementów HTML (<img>, <script>, <a>), aby umożliwić programistom skuteczne dodawanie treści do strony internetowej. Sprawdzanie typu ułatwia odpowiednie korzystanie z tych funkcji, ponieważ zapewnia, że przypisane właściwości i opcje znajdują się w akceptowalnym zakresie obsługiwanych wartości i typów. Zobacz
wymaganą szerokość i wysokość obrazu.
Wyświetlanie błędów wyświetlania tostów i nakładek
Jak już wspomnieliśmy, reguły zgodności mogą pojawiać się w wielu obszarach. Obecnie pracujemy nad sposobami wyświetlania błędów bezpośrednio w przeglądarce w lokalnym środowisku programistycznym użytkownika.
Wiele używanych przez programistów narzędzi do sprawdzania błędów i kontroli (Lighthouse, Chrome DevTools i Problemy z Narzędziami deweloperskimi w Chrome) ma charakter pasywny i w celu pobrania informacji wymaga pewnej interakcji użytkownika. Deweloperzy częściej podejmują działania, gdy błędy pojawiają się bezpośrednio w istniejących narzędziach lub gdy zawierają konkretne i konkretne działania, które należy podjąć, aby rozwiązać problem.
Zgodność z innymi platformami
Zgodność jest najpierw badana w Next.js, a następnie w celu rozszerzenia jej na inne platformy (Nuxt, Angular itp.). ESLint i TypeScript są już używane w wielu platformach na wiele różnych sposobów, ale aktywnie badają koncepcję spójnego systemu wykonawczego na poziomie przeglądarki.
Podsumowanie
Zgodność polega na kodowaniu sprawdzonych metod w zestawy reguł, które mogą być przydatne dla programistów jako proste wzorce kodu. Zespół Aurora skupił się na wydajności wczytywania, ale można zastosować też inne sprawdzone metody, takie jak ułatwienia dostępu i bezpieczeństwo.
Przestrzeganie reguł zgodności powinno zapewniać przewidywalne wyniki, a osiągnięcie wysokiego poprzeczki w zakresie wygody użytkownika może stać się efektem ubocznym rozbudowy stosu technologicznego. Zgodność zwiększa produktywność zespołów i gwarantuje wysoką jakość aplikacji nawet wtedy, gdy zespoły i bazy kodu zmieniają się w miarę upływu czasu.