Chrome współpracuje z platformami open source, aby ulepszyć internet
Chrome aktywnie uczestniczy w tworzeniu ekosystemu internetowego. Nasza prezentacja na Chrome Dev Summit 2019 obejmuje to, nad czym pracowaliśmy w ciągu ostatniego roku.
Czytaj dalej, aby przeczytać obszerne podsumowanie rozmowy z dodatkowymi informacjami i materiałami.
Jak sprawiamy, że internet jest lepszy?
Celem każdego członka zespołu Chrome jest ulepszanie internetu. Pracujemy nad udoskonaleniem interfejsów API przeglądarek i V8 – głównych mechanizmów JavaScript i WebAssembly, które wykorzystywana jest w Chrome – aby programiści mieli funkcje ułatwiające tworzenie świetnych stron internetowych. Staramy się też ulepszać witryny, które są już w wersji produkcyjnej, i na wiele sposobów przyczyniamy się do tworzenia narzędzi open source.
Większość programistów stron internetowych w miarę możliwości korzysta z narzędzi typu open source 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 typu open source. Dane o 3 najpopularniejszych platformach i bibliotekach po stronie klienta – React, Angular i Vue – pokazują, że:
- 72% uczestników pierwszej dorocznej ankiety MDN na temat tworzenia witryn dla deweloperów i projektantów korzysta z przynajmniej jednego z tych platform i bibliotek.
- Ponad 320 tys. witryn spośród 5 milionów adresów URL analizowanych przez archiwum HTTP korzysta z co najmniej jednej z tych platform i bibliotek.
- Po pogrupowaniu według czasu poświęconego na korzystanie z nich 30 ze 100 najpopularniejszych adresów URL korzysta z co najmniej 1 z tych platform i bibliotek. (Badania przeprowadzono na podstawie danych wewnętrznych).
Oznacza to, że lepsze narzędzia typu open source mogą bezpośrednio przyczynić się do lepszego działania internetu. Dlatego inżynierowie Chrome zaczęli bezpośrednio współpracować z zewnętrznymi autorami bibliotek i platform.
Wkład w platformy internetowe
Platformy powszechnie używane do tworzenia i struktury stron internetowych dzielą się na 2 kategorie:
- Platformy interfejsu (lub biblioteki), takie jak Preact, React czy Vue, które zapewniają kontrolę nad warstwą widoku aplikacji (np. za pomocą modelu komponentu).
- Platformy internetowe, takie jak Next.js, Nuxt.js i Gatsby, które stanowią kompleksowy system z wbudowanymi sprawdzonymi funkcjami, takimi jak renderowanie po stronie serwera. Zwykle wykorzystują one platformę lub bibliotekę interfejsu użytkownika do warstwy widoku.
Deweloperzy mogą zrezygnować z korzystania z platform, lecz składając bibliotekę warstwy widoku danych, router, system stylu, mechanizm renderowania serwera itp., często tworzą własny typ platformy. Chociaż platformy internetowe zostały opracowane według opinii, wiele z tych problemów są domyślnie w stanie eliminować wiele z tych problemów.
W pozostałej części tego postu znajdziesz wiele ulepszeń, które zostały ostatnio wprowadzone w różnych środowiskach i narzędziach, w tym treści od zespołu Chrome.
Angular
Zespół Angular wprowadził szereg ulepszeń w wersji 8 platformy:
- Domyślnie ładowanie różnicowe pozwala zminimalizować użycie elementów polyfill w nowszych przeglądarkach.
- Obsługa standardowej składni importu dynamicznego w przypadku tras leniwego ładowania.
- Obsługa instancji roboczych internetowych umożliwiająca uruchamianie operacji w wątku głównym niezależnie od wątku głównego.
- W przypadku istniejących projektów Ivy, nowy mechanizm renderowania w Angular, który zapewnia większą wydajność ponownej kompilacji i zmniejsza rozmiar pakietów, jest dostępny w trybie podglądu.
Więcej informacji o tych ulepszeniach znajdziesz w „wersji 8 aplikacji Angular”. Zespół Chrome ma nadzieję, że w przyszłym roku będzie z nimi współpracować w miarę udostępniania kolejnych funkcji.
Next.js
Next.js to platforma internetowa wykorzystująca React jako warstwę widoku. Next.js oprócz modelu interfejsu użytkownika, którego wielu programistów oczekuje od platformy po stronie klienta, oferuje też szereg wbudowanych funkcji domyślnych:
- Routing z domyślnym podziałem kodu
- Kompilacja i grupowanie (za pomocą Babel i pakietu internetowego)
- Renderowanie po stronie serwera
- Mechanizmy pobierania danych na poziomie strony
- Styl zamknięty (z styled-jsx)
Next.js przeprowadza optymalizację pod kątem mniejszych pakietów, a zespół Chrome pomógł nam znaleźć obszary, w których możemy jeszcze bardziej poprawić wydajność. Aby dowiedzieć się więcej o każdej z nich, przejrzyj jej żądania o komentarze (RFC) i żądania pull (PR):
- Ulepszona strategia podziału na fragmenty pakietu internetowego, która emituje bardziej szczegółowe pakiety, zmniejszając ilość zduplikowanego kodu pobieranego za pomocą wielu tras (RFC, PR).
- Wczytywanie różnicowe z wykorzystaniem wzorca modułu/nomodule, który może zmniejszyć ilość kodu JavaScript w aplikacjach Next.js nawet o 20% bez zmian w kodzie (RFC, PR).
- Ulepszone śledzenie danych o skuteczności dzięki wykorzystaniu interfejsu User Timing API (PR).
Pracujemy też nad innymi funkcjami, które usprawnią korzystanie z Next.js zarówno użytkownikom, jak i deweloperom:
- Włączenie trybu równoległego w celu odblokowania progresywnego lub częściowego nawodnienia komponentów.
- Oparty na pakiecie internetowym system zgodności, 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 w celu zapewnienia sprawdzonej konfiguracji. Podobnie jak Next.js, zawiera on wiele gotowych funkcji:
- Routing z domyślnym podziałem kodu
- Kompilacja i grupowanie (za pomocą Babel i pakietu internetowego)
- Renderowanie po stronie serwera
- Asynchroniczne pobieranie danych dla każdej strony
- Domyślny magazyn danych (Vuex)
Oprócz bezpośredniej pracy nad poprawą wydajności różnych narzędzi rozszerzyliśmy fundusz ramowy, aby zapewnić wsparcie finansowe większej liczbie bibliotek i platform open source. Dzięki niedawno wsparciu Nuxt.js kilka funkcji zostanie udostępniona w najbliższej przyszłości, w tym inteligentniejsze renderowanie na serwerze i optymalizacja obrazów.
Babel
Poczyniliśmy też postępy w ulepszaniu skuteczności jednego z ważnych narzędzi bazowych w niemal wszystkich wymienionych platformach, np. Babel.
Babel kompiluje kod, który zawiera nowszą składnię, do postaci zrozumiałej dla różnych przeglądarek.
Najczęściej używa się parametrów @babel/preset-env do kierowania reklam na nowoczesne przeglądarki, w których można określić różne wartości docelowe przeglądarki, aby zapewnić wystarczającą liczbę elementów polyfill we wszystkich wybranych środowiskach. Jednym ze sposobów określenia celów jest użycie elementu <script
type="module"> do kierowania na wszystkie przeglądarki, które obsługują moduły ES.
W tym celu wprowadziliśmy nowe gotowe ustawienia: @babel/preset-modules. Zamiast konwertować nowoczesną składnię na starszą, aby uniknąć błędów w przeglądarce, preset-modules naprawia każdy błąd, przekształcając składnię do możliwie najbliższej, niezakłóconej, nowoczesnej. W rezultacie powstaje nowoczesny kod, który można dostarczyć do większości przeglądarek w niewielkiej postaci.
Deweloperzy, którzy już używają preset-env, również będą mogli skorzystać z tych optymalizacji bez konieczności wykonywania żadnych działań, ponieważ wkrótce zostaną one włączone również do usługi preset-env.
Co dalej?
Bliska współpraca z bibliotekami i platformami open source w celu zapewniania lepszych wrażeń pomaga zespołowi Chrome uświadomić sobie, co jest zasadniczo ważne zarówno dla użytkowników, jak i deweloperów.
Jeśli tworzysz platformę internetową, bibliotekę UI lub inny rodzaj narzędzi internetowych (pakieter, kompilator, linter), prześlij wniosek o fundusz na platformę.