React Native ma wiele zalet, takich jak obsługa wielu platform, aktualizacje OTA, przeładowywanie na żywo, efektywność kosztowa itp., ale największym wąskim gardłem w skalowaniu aplikacji natywnych React była wydajność w miarę dodawania kolejnych modułów, gdy aplikacja wymaga dużej ilości danych lub gdy istnieje wiele wymagane przejazdy przez most.

Ale jak działa obecna architektura?

Architektura React Native opiera się na trzech wątkach: a) Wątek UI: Jest to główny wątek aplikacji, który jest używany do renderowania widoków dla Androida i iOS. b) Wątek cienia: Jest to rodzaj wątku tła, który oblicza układ elementów (za pomocą Yoga ) przed renderowaniem na platformie hosta. c) Wątek JS: Dołączony JS, który jest odpowiedzialny za obsługę całej logiki w twojej natywnej aplikacji reagującej.

Interakcja między tymi wątkami nie jest bezpośrednia i za każdym razem, gdy jeden wątek musi wchodzić w interakcję z drugim wątkiem, musi przejść ciężkie zadanie serializacji i deserializacji danych do formatu JSON, aby przejść przez most. Powoduje to niepotrzebne kopiowanie danych, a ten most może dość łatwo zostać przepełniony, ponieważ operacje są asynchroniczne i nie ma ścisłego pisania.

Niektóre ograniczenia obecnej architektury:
1. Javascript i strona natywna nie są świadome siebie nawzajem i polegają na asynchronicznych komunikatach JSON.
2. Wszystkie moduły ładują się podczas uruchamiania, co wydłuża czas interakcji.
3. Brak priorytetów działań: Ważne interakcje użytkownika nie mogą mieć priorytetu w stosunku do innych działań.
4. Serializacja mostka
5. Elementy interfejsu użytkownika nie są dostępne bezpośrednio z wątku JS.

Przedstawiamy JSI

JSI wprowadza dużą zmianę w sposobie interakcji javascript i części natywnej. Zapewnia bezpośrednią komunikację między tymi dwiema sferami za pomocą interfejsu między JS i C++. Korzystając z interfejsu JavaScript, JS może przechowywać odniesienia do obiektów hosta i wywoływać na nich metody. Z pomocą obiektu hosta możemy teraz używać obiektów natywnych w kontekście javascript. Most, który był największym wąskim gardłem, jest podzielony na części:

Tkanina

Nowy system renderowania stworzony przez Facebooka, będący re-architekturą menedżera interfejsu użytkownika. Ten renderer jest zaimplementowany w C++, a rdzeń jest współdzielony między platformami. W poprzedniej implementacji tworzenie układu obejmowało wiele kroków, takich jak serializacja JSON i przeskakiwanie przez most, co miało poważne problemy, gdy most został zablokowany, np.: Spadki klatek podczas przewijania nieskończonej listy. Nowa implementacja umożliwia menedżerowi interfejsu użytkownika tworzenie Shadow Tree bezpośrednio w C++, co znacznie poprawia wrażenia, zmniejszając liczbę skoków między światami. Operacje są synchroniczne i bezpieczne dla wątków, które są wykonywane z React (JavaScript) do renderera (C++), zwykle w wątku JavaScript. Wiąże się to również z mniejszą serializacją danych, ponieważ wartości javascript można pobrać bezpośrednio z JSI. Ta bezpośrednia kontrola pomaga również w ustalaniu priorytetów działań, renderer może teraz nadać priorytet niektórym interakcjom użytkownika, aby zapewnić ich terminową obsługę. To znacznie poprawi wydajność list, nawigacji i obsługi gestów.

Moduły Turbo

W poprzedniej implementacji nie mieliśmy odniesienia do modułów natywnych, więc każdy moduł był ładowany podczas uruchamiania, co zwiększa TTI (Time to Interactive), ale dzięki modułom turbo możemy leniwie ładować moduły, gdy jest to wymagane, co pomoże w poprawie czasu uruchamiania. Na przykład: Jeśli masz moduł do drukowania dokumentu z linku, moglibyśmy teraz załadować ten moduł, gdy wylądujemy na ekranie drukowania, a nie podczas uruchamiania aplikacji, co było wykonywane w poprzedniej architekturze. Możliwość napisania modułu w języku C++ również zwiększa tę zaletę, ponieważ zmniejsza liczbę zduplikowanych implementacji na różnych platformach.

Kodgen

Aby połączyć to wszystko razem i zapewnić kompatybilność obu dziedzin, zespół React Native stworzył narzędzie do sprawdzania typów, aby zautomatyzować kompatybilność między JS a stroną natywną. To narzędzie nazywa się Codegen. Wykorzystuje podejście modułowe, co oznacza, że ​​każdy język JavaScript o statycznym typie może być obsługiwany za pomocą parsera dla tego systemu. Używając wpisanego kodu JavaScript jako źródła prawdy, ten generator może definiować pliki interfejsów potrzebne modułom Fabric i TurboModules do bezpiecznego wysyłania wiadomości między domenami. Codegen zapewnia również bezpieczeństwo typu czasu kompilacji, co oznacza, że ​​oba środowiska mogą wykonywać polecenia bez żadnych kontroli w czasie wykonywania, co oznacza mniejszy rozmiar kodu do wysłania i szybsze wykonanie.
Ponieważ teraz mamy kod C++, a C++ jest silnie typowany, wymuszamy wpisywanie naszego kodu JS, ponieważ musimy zdefiniować typy i nie możemy pisać nigdzie w kodzie. Zasadniczo tworzy dla ciebie interfejs, a teraz, ponieważ są one generowane i są w C++, możemy teraz w zasadzie ufać wysyłanym danym i nie musimy chodzić tam iz powrotem weryfikując dane. Oznacza to również, że za pomocą kontroli typu możemy łatwo zidentyfikować problemy w fazie rozwoju, które mogły spowodować śmiertelne awarie lub złe wrażenia użytkownika.

Niektóre główne zalety JSI

1. Kod Javascript może zawierać odniesienia do dowolnych elementów natywnego interfejsu użytkownika i wywoływać na nim metody (podobnie jak manipulacja DOM w Internecie)
2. Szybkie i bezpośrednie powiązania z kodem natywnym, które mogą znacznie poprawić wydajność, na przykład MMKV używa JSI, który jest ~30x szybszy niż Asyncstorage.
3. Można używać silników innych niż JavaScript Core.
4. Moduły natywne można ładować w razie potrzeby.
5. Statyczne sprawdzanie typu w celu zapewnienia zgodności kodu JS i kodu natywnego.

React native JSI jest obecnie w fazie eksperymentalnego wdrażania, a ponieważ więcej projektów przyjmie tę zmianę, dowiemy się więcej o ograniczeniach i wpływie nowej architektury, ale jedno jest pewne, przyszłość tworzenia aplikacji natywnych i międzyplatformowych React wydaje się ekscytujące.