Przejdź do treści głównej

Bundlowany Hermes

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 →

Ta strona przedstawia przegląd sposobu budowania Hermesa i React Native.

Jeśli szukasz instrukcji używania Hermesa w swojej aplikacji, znajdziesz je na innej stronie: używanie Hermesa

ostrzeżenie

Uwaga: Ta strona stanowi techniczne dogłębne omówienie i jest przeznaczona dla użytkowników rozszerzających funkcjonalność Hermesa lub React Native. Zwykli użytkownicy React Native nie muszą znać szczegółów interakcji między React Native a Hermesem.

Czym jest 'Bundlowany Hermes'​

Poczynając od React Native 0.69.0, każda wersja React Native będzie budowana razem z odpowiadającą wersją Hermesa. Ten model dystrybucji nazywamy Bundlowanym Hermesem.

Od wersji 0.69 zawsze będziesz mieć silnik JS zbudowany i przetestowany razem z każdą wersją React Native, z której możesz korzystać.

Dlaczego przeszliśmy na 'Bundlowany Hermes'​

Historycznie React Native i Hermes korzystały z oddzielnych procesów wydawniczych z różnymi numerami wersji. Oddzielne wydania z różnymi numerami powodowały zamieszanie w ekosystemie open-source, gdzie nie było jasne, czy konkretna wersja Hermesa jest kompatybilna z daną wersją React Native (np. trzeba było wiedzieć, że Hermes 0.11.0 działa tylko z React Native 0.68.0 itd.)

Zarówno Hermes, jak i React Native współdzielą kod JSI (Hermes tutaj i React Native tutaj). Jeśli te dwie kopie JSI rozminą się w czasie, zbudowany Hermes nie będzie kompatybilny z daną wersją React Native. Więcej o tym problemie niekompatybilności ABI można przeczytać tutaj.

Aby rozwiązać ten problem, rozszerzyliśmy proces wydawniczy React Native o pobieranie i budowanie Hermesa, zapewniając używanie tylko jednej kopii JSI podczas budowania Hermesa.

Dzięki temu możemy wydać wersję Hermesa wraz z każdą wersją React Native, mając pewność, że zbudowany silnik Hermes jest w pełni kompatybilny z wydawaną wersją React Native. Dołączamy tę wersję Hermesa do wydawanej wersji React Native, stąd nazwa Bundlowany Hermes.

Jak to wpłynie na deweloperów aplikacji​

Jak wspomniano we wstępie, jeśli jesteś deweloperem aplikacji, ta zmiana nie powinna bezpośrednio wpłynąć na ciebie.

Poniższe akapity opisują wprowadzone zmiany pod maską i wyjaśniają ich uzasadnienie dla przejrzystości.

Użytkownicy iOS​

W systemie iOS przenieśliśmy używany przez ciebie hermes-engine.

Przed React Native 0.69 użytkownicy pobierali pod (tutaj znajdziesz podspec).

W React Native 0.69 użytkownicy zamiast tego używają podspec zdefiniowanego w pliku sdks/hermes-engine/hermes-engine.podspec w pakiecie NPM react-native. Ten podspec korzysta z wstępnie zbudowanego archiwum Hermesa, które przesyłamy do Mavena i na wydanie GitHub React Native jako część procesu wydawania React Native (np. zobacz zasoby tego wydania).

Użytkownicy Androida​

W systemie Android zaktualizujemy plik android/app/build.gradle w domyślnym szablonie w następujący sposób:

diff
dependencies {
    // ...

    if (enableHermes) {
+       implementation("com.facebook.react:hermes-engine:+") {
+           exclude group:'com.facebook.fbjni'
+       }
-       def hermesPath = "../../node_modules/hermes-engine/android/";
-       debugImplementation files(hermesPath + "hermes-debug.aar")
-       releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

Przed React Native 0.69 użytkownicy korzystali z hermes-debug.aar i hermes-release.aar z pakietu NPM hermes-engine.

W React Native 0.69 użytkownicy korzystają z artefaktów wielowariantowych dla Androida dostępnych w folderze android/com/facebook/react/hermes-engine/ w pakiecie NPM react-native. Należy również zauważyć, że w jednej z przyszłych wersji React Native całkowicie usuniemy zależność od hermes-engine.

Użytkownicy Androida w Nowej Architekturze​

Ze względu na specyfikę konfiguracji budowania kodu natywnego (tj. sposób używania NDK), użytkownicy Nowej Architektury będą budować Hermesa ze źródeł.

To wyrównuje mechanizm budowania React Native i Hermesa dla użytkowników Nowej Architektury (będą budować oba frameworki ze źródeł). Oznacza to, że tacy użytkownicy Androida mogą doświadczyć spadku wydajności podczas pierwszego budowania.

Instrukcje optymalizacji czasu budowania i redukcji jego wpływu znajdziesz na tej stronie: Przyspieszanie fazy budowania.

Użytkownicy Androida w Nowej Architekturze budujący na Windowsie​

Użytkownicy budujący aplikacje React Native z Nową Architekturą na maszynach z Windowsem muszą wykonać dodatkowe kroki, aby zapewnić poprawne działanie procesu budowania:

Czy użytkownicy nadal mogą używać innego silnika?​

Tak, użytkownicy mogą dowolnie włączać/wyłączać Hermesa (za pomocą zmiennej enableHermes na Androidzie, hermes_enabled na iOS). Zmiana "Bundled Hermes" wpłynie tylko na sposób budowania i dołączania Hermesa.

Począwszy od React Native 0.70, domyślną wartością dla enableHermes/hermes_enabled jest true.

Jak to wpłynie na współtwórców i twórców rozszerzeń​

Jeśli jesteś współtwórcą React Native lub tworzysz rozszerzenie oparte na React Native lub Hermesie, przeczytaj dalej, ponieważ wyjaśniamy działanie Bundled Hermes.

Jak działa Bundled Hermes pod maską?​

Ten mechanizm opiera się na pobieraniu archiwum tar z kodem źródłowym Hermesa z repozytorium facebook/hermes wewnątrz repozytorium facebook/react-native. Mamy podobny mechanizm dla innych zależności natywnych (Folly, Glog itp.) i dostosowaliśmy Hermesa do tego samego schematu.

Podczas budowania React Native z gałęzi main, pobieramy archiwum tar z gałęzi main facebook/hermes i budujemy je jako część procesu budowania React Native.

Podczas budowania React Native z gałęzi wydania (np. 0.69-stable), używamy tagu w repozytorium Hermes do synchronizacji kodu między oboma repozytoriami. Nazwa konkretnego tagu jest przechowywana w pliku sdks/.hermesversion wewnątrz React Native w gałęzi wydania (np. ten plik w gałęzi wydania 0.69).

W pewnym sensie można to porównać do działania git submodule.

Jeśli rozwijasz funkcjonalności oparte na Hermes, możesz polegać na tych tagach, aby ustalić, która wersja Hermes została użyta podczas budowania React Native, ponieważ wersja React Native jest podana w nazwie tagu (np. hermes-2022-05-20-RNv0.69.0-ee8941b8874132b8f83e4486b63ed5c19fc3f111).

Szczegóły implementacji na Androida​

Aby to zaimplementować na Androida, dodaliśmy nowy proces budowania w katalogu /ReactAndroid/hermes-engine React Native, który zajmuje się kompilacją Hermes i przygotowaniem pakietu do użytku (więcej kontekstu).

Budowanie silnika Hermes możesz teraz uruchomić poleceniem:

bash
// Build a debug version of Hermes
./gradlew :ReactAndroid:hermes-engine:assembleDebug
// Build a release version of Hermes
./gradlew :ReactAndroid:hermes-engine:assembleRelease

z gałęzi main React Native.

Nie będziesz musiał instalować dodatkowych narzędzi (takich jak cmake, ninja lub python3) na swoim komputerze, ponieważ skonfigurowaliśmy kompilację do używania wersji NDK tych narzędzi.

Po stronie konsumenta Gradle wprowadziliśmy także niewielką poprawkę: przeszliśmy z releaseImplementation i debugImplementation na implementation. Jest to możliwe, ponieważ nowszy artefakt Androida hermes-engine jest wariantowo świadomy i prawidłowo dopasuje debugową wersję silnika do debugowej wersji Twojej aplikacji. Nie potrzebujesz żadnej dodatkowej konfiguracji (nawet przy użyciu staging lub innych typów/flavorów budowania).

W szablonie konieczne stało się dodanie tej linii:

exclude group:'com.facebook.fbjni'

Jest to konieczne, ponieważ React Native korzysta z fbjni przy użyciu podejścia niezwiązanego z prefab (tj. rozpakowując plik .aar i wyodrębniając pliki .so). Hermes-engine oraz inne biblioteki używają zamiast tego prefab do korzystania z fbjni. Pracujemy nad rozwiązaniem tego problemu w przyszłości, tak aby import Hermesa był jednolinijkowy.

Szczegóły implementacji na iOS​

Implementacja na iOS opiera się na serii skryptów znajdujących się w następujących lokalizacjach:

  • /scripts/hermes. Skrypty te zawierają logikę pobierania archiwum Hermes, jego rozpakowywania i konfiguracji budowania dla iOS. Są wywoływane podczas pod install, jeśli pole hermes_enabled ma wartość true.

  • /sdks/hermes-engine. Skrypty te zawierają logikę budowania odpowiedzialną za kompilację Hermes. Zostały skopiowane i zaadaptowane z repozytorium facebook/hermes, aby poprawnie działały w ramach React Native. Skrypty w folderze utils są odpowiedzialne za budowanie Hermes dla wszystkich platform macOS.

Hermes jest budowany jako część zadania build_hermes_macos na CircleCI. Zadanie generuje archiwum (tarball), które jest pobierane przez podspec hermes-engine przy użyciu opublikowanej wersji React Native (przykład artefaktów dla React Native 0.69 w build_hermes_macos).

Wstępnie zbudowany Hermes​

Jeśli nie ma gotowych artefaktów dla używanej wersji React Native (np. pracujesz z React Native z gałęzi main), wówczas Hermes będzie musiał zostać zbudowany ze źródeł. Najpierw kompilator Hermes, hermesc, zostanie zbudowany dla macOS podczas pod install, a następnie sam Hermes zostanie zbudowany jako część potoku budowania Xcode przy użyciu skryptu build-hermes-xcode.sh.

Budowanie Hermesa ze źródeł​

Hermes jest zawsze budowany ze źródeł podczas korzystania z React Native z gałęzi main. Jeśli używasz stabilnej wersji React Native, możesz wymusić budowanie Hermesa ze źródeł ustawiając zmienną środowiskową CI na true przy instalacji CocoaPods: CI=true pod install.

Symbole debugowania​

Gotowe artefakty dla Hermesa domyślnie nie zawierają symboli debugowania (dSYMs). Planujemy udostępniać te symbole debugowania dla każdej wersji w przyszłości. Do tego czasu, jeśli potrzebujesz symboli debugowania dla Hermesa, będziesz musiał zbudować Hermesa ze źródeł. Plik hermes.framework.dSYM zostanie utworzony w katalogu budowania obok każdej z frameworków Hermesa.

Obawiam się, że ta zmiana wpływa na mnie​

Chcielibyśmy podkreślić, że jest to w istocie zmiana organizacyjna dotycząca miejsca budowania Hermesa oraz sposobu synchronizacji kodu między dwoma repozytoriami. Ta zmiana powinna być całkowicie niezauważalna dla użytkowników.

Historycznie wydawaliśmy wersję Hermesa dla konkretnej wersji React Native (np. v0.11.0 for RN0.68.x).

Dzięki "Bundled Hermes" możesz natomiast polegać na tagu, który będzie reprezentował wersję używaną podczas wydania konkretnej wersji React Native.