Chrome współpracuje z platformami open source, aby ulepszyć internet
Chrome aktywnie współtworzy ekosystem platform internetowych. Podczas konferencji Chrome Dev Summit 2019 opowiedzieliśmy o tym, nad czym pracowaliśmy w ostatnim roku.
Przeczytaj rozszerzone podsumowanie prezentacji z dodatkowymi szczegółami i zasobami.
Jak ulepszamy internet?
Celem wszystkich członków zespołu Chrome jest ulepszanie internetu. Pracujemy nad ulepszaniem interfejsów API przeglądarki i V8 – podstawowego mechanizmu JavaScript i WebAssembly, który obsługuje Chrome – aby deweloperzy mieli do dyspozycji funkcje, które pomogą im tworzyć świetne strony internetowe. Staramy się też ulepszać witryny, które są już dziś w produkcji, na wiele sposobów współtworząc narzędzia open source.
Większość deweloperów stron internetowych korzysta z narzędzi open source, gdy tylko jest to możliwe, i woli nie tworzyć całkowicie niestandardowej infrastruktury. Platformy JavaScript po stronie klienta i biblioteki interfejsu użytkownika stanowią coraz większą część wykorzystania oprogramowania open source. Dane dotyczące 3 najpopularniejszych platform i bibliotek po stronie klienta – React, Angular i Vue – pokazują , że:
- 72% uczestników pierwszego dorocznego badania MDN wśród deweloperów i projektantów stron internetowych korzysta z co najmniej jednej z tych platform i bibliotek.
- Ponad 320 tys. witryn w 5 mln najpopularniejszych adresów URL analizowanych przez HTTP Archive korzysta z co najmniej jednej z tych platform i bibliotek.
- Gdy pogrupujemy adresy URL według czasu spędzonego na stronie, 30 z 100 najpopularniejszych adresów URL korzysta z co najmniej jednej z tych platform i bibliotek. (Badanie zostało przeprowadzone na podstawie danych wewnętrznych).
Oznacza to, że lepsze narzędzia open source mogą bezpośrednio przyczynić się do ulepszenia internetu. Dlatego inżynierowie Chrome zaczęli bezpośrednio współpracować z zewnętrznymi autorami platform i bibliotek.
Współpraca przy tworzeniu platform internetowych
Platformy powszechnie używane do tworzenia i strukturyzowania stron internetowych dzielą się na 2 kategorie:
- Platformy interfejsu użytkownika (lub biblioteki), takie jak Preact, React czy Vue, które zapewniają kontrolę nad warstwą widoku aplikacji (np. za pomocą modelu komponentów).
- Platformy internetowe, takie jak Next.js, Nuxt.js i Gatsby, które zapewniają kompleksowy system z wbudowanymi funkcjami, np. renderowaniem po stronie serwera. Platformy te zwykle wykorzystują platformę lub bibliotekę interfejsu użytkownika w warstwie widoku.
Deweloperzy mogą nie korzystać z platform, ale łącząc bibliotekę warstwy widoku, router, system stylów, renderer serwera itp., często tworzą własny typ platformy. Platformy internetowe, choć mają określone cechy, domyślnie rozwiązują wiele z tych problemów.
W dalszej części tego posta opisujemy wiele ulepszeń, które niedawno zostały wprowadzone w różnych platformach i narzędziach, w tym te, które zostały opracowane przez zespół Chrome.
Angular
Zespół Angulara wprowadził szereg ulepszeń w wersji 8 platformy:
- Domyślne ładowanie różnicowe, aby zminimalizować niepotrzebne polyfille w nowszych przeglądarkach.
- Obsługa standardowej składni dynamicznego importu do leniwego ładowania tras.
- Obsługa instancji roboczych, które umożliwiają uruchamianie operacji w wątku w tle oddzielonym od wątku głównego.
- Ivy, nowy mechanizm renderowania Angulara, który zapewnia lepszą wydajność ponownej kompilacji i zmniejszenie rozmiarów pakietów, jest dostępny w trybie podglądu w przypadku istniejących projektów.
Więcej informacji o tych ulepszeniach znajdziesz w „Wersji 8 Angulara” . Zespół Chrome z niecierpliwością czeka na ścisłą współpracę z zespołem Angulara w przyszłym roku, gdy pojawią się kolejne funkcje .
Next.js
Next.js to platforma internetowa, która używa Reacta jako warstwy widoku. Oprócz modelu komponentów interfejsu użytkownika, którego wielu deweloperów oczekuje od platformy po stronie klienta, Next.js udostępnia szereg wbudowanych funkcji domyślnych:
- Routing z domyślnym podziałem kodu
- Kompilacja i pakowanie (za pomocą Babel i webpack)
- Renderowanie po stronie serwera
- Mechanizmy pobierania danych na poziomie strony
- Stylizacja zamknięta (za pomocą styled-jsx)
Next.js optymalizuje rozmiary pakietów, a zespół Chrome pomógł zidentyfikować obszary, w których możemy jeszcze bardziej poprawić wydajność. Więcej informacji o każdym z nich znajdziesz w prośbach o komentarze (RFC) i żądaniach scalenia (PR):
- Ulepszona strategia dzielenia webpacka na fragmenty, która emituje bardziej szczegółowe pakiety, zmniejszając ilość zduplikowanego kodu pobieranego przez wiele tras (RFC, PR).
- Ładowanie różnicowe z wzorcem module/nomodule , które może zmniejszyć łączną ilość kodu JavaScript w aplikacjach Next.js nawet o 20% bez konieczności wprowadzania zmian w kodzie (RFC, PR).
- Ulepszone śledzenie wskaźników skuteczności, które wykorzystuje interfejs User Timing API (PR).
Badamy też inne funkcje, które mają na celu poprawę wrażeń użytkowników i deweloperów korzystających z Next.js, takie jak:
- Włączenie trybu współbieżnego, aby odblokować progresywne lub częściowe nawodnienie komponentów.
- System zgodności oparty na webpacku, który analizuje wszystkie pliki źródłowe i wygenerowane zasoby, aby wyświetlać lepsze błędy i ostrzeżenia (RFC).
Nuxt.js
Nuxt.js to platforma internetowa, która łączy Vue.js z różnymi bibliotekami, aby zapewnić określone ustawienia. Podobnie jak Next.js, zawiera wiele funkcji gotowych do użycia:
- Routing z domyślnym podziałem kodu
- Kompilacja i pakowanie (za pomocą Babel i webpack)
- Renderowanie po stronie serwera
- Asynchroniczne pobieranie danych na każdej stronie
- Domyślny magazyn danych (Vuex)
Oprócz bezpośredniej pracy nad poprawą wydajności różnych narzędzi rozszerzyliśmy fundusz na platformy, aby zapewnić wsparcie finansowe większej liczbie platform i bibliotek open source. Dzięki naszemu niedawnemu wsparciu dla Nuxt.js w najbliższej przyszłości pojawi się kilka funkcji, w tym inteligentniejsze renderowanie po stronie serwera i optymalizacja obrazów.
Babel
Poczyniliśmy też postępy w poprawie wydajności ważnego narzędzia bazowego w prawie wszystkich wymienionych platformach – Babel.
Babel kompiluje kod zawierający nowszą składnię na kod, który mogą zrozumieć różne przeglądarki.
Powszechnie używa się @babel/preset-env do kierowania na
nowoczesne przeglądarki, w których można określić różne przeglądarki docelowe, aby zapewnić wystarczającą ilość polyfilli
wymaganych we wszystkich wybranych środowiskach. Jednym ze sposobów określania celów jest użycie <script
type="module">, aby kierować na wszystkie przeglądarki, które obsługują moduły ES.
Aby zoptymalizować ten przypadek, wprowadziliśmy zupełnie nowy preset –
@babel/preset-modules. Zamiast konwertować nowoczesną składnię na starszą, aby uniknąć błędów przeglądarki, preset-modules naprawia każdy konkretny błąd, przekształcając go w najbliższą możliwą nieuszkodzoną nowoczesną składnię. Dzięki temu nowoczesny kod może być dostarczany do większości przeglądarek prawie bez zmian.
Deweloperzy, którzy już używają preset-env, również skorzystają z tych optymalizacji bez konieczności podejmowania żadnych działań, ponieważ wkrótce zostaną one włączone do preset-env.
Co dalej?
Ścisła współpraca z platformami i bibliotekami open source w celu zapewnienia lepszych wrażeń pomaga zespołowi Chrome zrozumieć, co jest najważniejsze dla użytkowników i deweloperów.
Jeśli pracujesz nad platformą internetową, biblioteką interfejsu użytkownika lub dowolną formą narzędzi internetowych (pakiet, kompilator, linter), zgłoś się do funduszu na platformy!