Przejdź do treści głównej

Hermes jako silnik domyślny

· 5 minut czytania
Michael Leon
Michael Leon
Software Engineer @ Meta
Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

W październiku zeszłego roku ogłosiliśmy, że rozpoczęliśmy prace nad uczynieniem Hermesa domyślnym silnikiem dla wszystkich aplikacji React Native.

Hermes przyniósł znaczne korzyści React Native wewnątrz Meta i wierzymy, że społeczność open-source również na tym skorzysta. Hermes został zaprojektowany dla urządzeń o ograniczonych zasobach i optymalizuje czas uruchamiania, rozmiar aplikacji oraz zużycie pamięci. Kluczową różnicą między Hermesem a innymi silnikami JS jest jego zdolność do wcześniejszej kompilacji kodu JavaScript do bytecode'u. Ten prekompilowany bytecode jest dołączany do pliku binarnego, co pozwala interpreterowi pominąć ten kosztowny krok podczas uruchamiania aplikacji.

Od czasu ogłoszenia włożyliśmy wiele pracy w udoskonalenie Hermesa i dziś z przyjemnością informujemy, że React Native 0.70 będzie domyślnie korzystać z Hermesa jako silnika. Oznacza to, że wszystkie nowe projekty rozpoczynane na wersji 0.70 będą miały domyślnie włączonego Hermesa. Przed planowanym na lipiec wdrożeniem chcemy ściśle współpracować ze społecznością, aby zapewnić płynne przejście i korzyści dla wszystkich użytkowników. W tym wpisie omówimy, czego możecie się spodziewać po tej zmianie, przedstawimy benchmarki wydajnościowe, nowe funkcje i więcej. Pamiętajcie, że nie musicie czekać na React Native 0.70, aby zacząć używać Hermesa - możecie postępować zgodnie z tymi instrukcjami, aby włączyć Hermesa w istniejącej aplikacji React Native.

Należy zauważyć, że choć Hermes będzie domyślnie włączony w nowych projektach React Native, wsparcie dla innych silników będzie kontynuowane.

Benchmarki​

Zmierzyliśmy trzy różne metryki istotne dla twórców aplikacji: TTI, rozmiar pliku binarnego i zużycie pamięci. Do testów wykorzystaliśmy aplikację React Native Mattermost. Eksperymenty przeprowadziliśmy zarówno na Androidzie, jak i iOS, korzystając z wysokiej klasy sprzętu z 2020 roku.

  • TTI (time to interactive) to czas od uruchomienia aplikacji do momentu, w którym użytkownik może z nią współdziałać. W tym benchmarku definiujemy go jako czas od naciśnięcia ikony aplikacji do wyrenderowania pierwszego ekranu. Pokazujemy również nagrania ekranu uruchamiania Mattermost.

  • Rozmiar pliku binarnego mierzono jako rozmiar APK na Androidzie i rozmiar IPA na iOS.

  • Dane dotyczące zużycia pamięci zebrano podczas kilkuminutowego korzystania z aplikacji Mattermost. Te same czynności wykonano w aplikacji na obu silnikach.

Dane benchmarkowe dla Androida​

Wszystkie testy na Androidzie przeprowadzono na Samsungu Galaxy S20.

Android Benchmarking Data

Wideo z TTI​

Android TTI Video

Dane benchmarkowe dla iOS​

Wszystkie testy na iOS przeprowadzono na iPhone'ie 12 Pro.

iOS Benchmarking Data

Wideo z TTI​

iOS TTI Video

Wideo z TTI w zwolnionym tempie, aby lepiej pokazać różnicę w czasie uruchamiania.​

iOS Slowed Down TTI Video

Integracja React Native/Hermes​

Rozwiązaliśmy długotrwały problem powodujący trudności kompatybilnościowe, który regularnie pojawiał się przy wydawaniu nowych wersji React Native: React Native zależał od Hermesa poprzez prekompilowane pliki binarne dystrybuowane przez CocoaPods i npm, co mogło prowadzić do niezgodności API lub ABI. Aby rozwiązać ten problem, począwszy od React Native 0.69, Hermes jest budowany wraz z każdą wersją React Native. Zapewnia to pełną kompatybilność z każdą wersją React Native. Tworzy to również znacznie ściślejszą integrację. Umożliwia szybszą iterację przy tworzeniu funkcji i wdrażaniu poprawek, a także daje nam większą pewność, że duże zmiany w Hermesie są wprowadzane poprawnie. Bardziej szczegółowe informacje o tej zmianie integracji znajdziesz tutaj.

iOS Intl​

Zakończyliśmy implementację odpowiednika dla iOS interfejsu Intl – ECMAScriptowego API międzynarodowego formatowania, które dostarcza szerokiego zakresu funkcji wrażliwych na język. Była to długotrwała luka, która uniemożliwiała niektórym developerom korzystanie z Hermesa. Implementacja dla Androida, zrealizowana we współpracy z Microsoftem, została dostarczona w React Native 0.65. Dzięki React Native 0.70 developerzy otrzymają natywne wsparcie na obu platformach.

Typowe implementacje Intl wymagają importowania dużych tabel przestawnych lub danych takich jak Unicode CLDR. Może to jednak powodować znaczący wzrost rozmiaru nawet o 6MB, dlatego aby uniknąć zwiększania rozmiaru pliku binarnego Hermesa, zaimplementowaliśmy Intl poprzez wywołania API udostępnianych przez samo iOS. Oznacza to, że możemy wykorzystać wszystkie dane lokalizacyjne i międzynarodowe, które są już częścią systemu iOS.

Trwające prace​

W miarę dalszego rozwoju Hermesa, chcemy dać społeczności wgląd w nasze bieżące priorytety: poprawę doświadczeń developerów i zapewnienie, że nikt nie rezygnuje z Hermesa z powodu braku funkcji języka JavaScript. Konkretnie:

  • Umożliwienie developerom uruchamiania profilera próbkującego bezpośrednio z interfejsu Chrome devtools

  • Dodanie wsparcia dla BigInt – długo oczekiwanej funkcji społeczności, która może blokować niektórych developerów przed używaniem Hermesa, ponieważ nie może być wypełniona przez polyfill

  • Dodanie wsparcia dla WeakRef, co udostępni nowe mechanizmy zarządzania pamięcią

Podsumowanie​

Ustanowienie Hermesa jako silnika domyślnego oznacza początek długofalowej podróży. Pracujemy nad nowymi funkcjami, które umożliwią społeczności tworzenie wydajnych aplikacji przez wiele nadchodzących lat. Zachęcamy również społeczność do kontaktu na naszym repozytorium GitHub w celu zgłaszania błędów, pytań, opinii lub pomysłów! Utworzyliśmy etykietę hermes, którą można używać dla wszystkich postów dotyczących Hermesa.