React Native: Jak działa React Native?

0.62.2+

0:00Jeszcze jest jedna kwestia zanim przejdziemy do faktycznego kodu

0:04chciałem wam powiedzieć jak w ogóle działa react native i na początku chcę

0:08zaznaczyć że te lekcja jest totalnie nieobowiązkowa zahacza o pewne zaawansowane rzeczy i

0:12też nie będę się jakoś za bardzo w niej zagłębiać w szczegóły natomiast myślę że warto

0:16wiedzieć mniej więcej jak to działa a nawet jak was to nie interesuje albo nic nie zrozumiecie to możecie

0:20sobie po całym proszę tu wrócić i przemyśleć zobaczyć i wyciągnać własne

0:24wnioski więc powiem dosłownie w paru slajdach jak to wygląda więc

0:29kilka faktów przede wszystkim jak wiecie albo się dowiecie

0:33kod piszemy w javascript przy użyciu powiedzmy tej samej technologii co w react'cie czyli

0:37tworzymy te same podobne komponenty zarządzamy stanem i tak dalej

0:41i tak dalej i nasz kod jest bundlowany to znaczy że jest

0:46cały ten kod który napiszemy w javascripcie jest wrzucany do jednego

0:50pliku i tak samo się dzieje w przypadku reacta wtedy mam powstaje aplikacja

0:54single page application która jest jednym plikiem oczywiście w przypadku reacta możemy jeszcze korzystać z server

0:58side renderingu i paru innych rzeczy które nam to porozbija webpacka i tak dalej ale w wielkim uproszczeniu

1:02taki w najprostszej wersji mamy po prostu jeden plik który jest bundlowany i do tego służy nam metro bundler

1:06w przypadku react native'a czyli takie narzędzie które nam będzie bundlowało

1:10to co będziemy pisać w naszym javascripcie i mając

1:15tego bundle'a musimy jakoś komunikować się z tą stroną natywną żeby

1:19faktycznie wykonywać ten kod żeby tworzyć te widoki natywne co będę też

1:23pokazywać w dalszych częściach kursu i do tego służy tak zwany bridge

1:28czyli to jest działa mniej więcej tak że nasz javascript mówi okej stwórz

1:32mi widok wysyła tą informację właśnie przez ten bridge ten most

1:36do iOS-a albo do androida w zależności gdzie ta aplikacja jest uruchamiana i

1:41manager po stronie tej aplikacji po prostu ten widok rysuje

1:45tak czyli jakby nasz kod jest po prostu innym językiem który jest później tłumaczony

1:49na to co się dzieje na platformie natywnej i w przypadku takich

1:54w przypadku takiej komunikacji udział biorą cztery elementy

1:58powiesz że ten nasz JS Thread czyli to co uruchamiana nasz silnik JS-owy i

2:03to jest jakby nasz bundle.js czyli to co jakby piszemy w tym JS-ie

2:07a po drugie to jest UIManager czyli to co właśnie o czym mówiłem to jest ten

2:11obiekt który działa po stronie natywnej po stronie iOS-a albo

2:15po stronie androida i on ma dostęp do widoków natywnych

2:19jest w stanie robić coś z tą informacją którą dostanie od tego naszego wątku JS-owego

2:23on się komunikuję z Shadow Node/Tree czyli takim

2:28wirtualnym DOM-em po stronie natywnej który sprawdza co się zmieniło w danym widoku w

2:32danym miejscu i odpowiednio rysuje inny widok i

2:36korzysta też z narzędzia Yoga czyli takiego mechanizmu który nam zamienia

2:40ten layout który mamy flexowy z JS-a do

2:45natywnej implementacji tak bo trochę inaczej się to robi w iOS-ie trochę inaczej się to robi

2:49jak wam pokazywałem w androidzie i ta Yoga jest w stanie zamienić to

2:53co napiszemy w tej naszej strukturze deklaratywnej na właśnie te widoki natywne

2:57jeśli mielibyśmy to pokazać no to wygląda właśnie tak że mamy ten nas po lewej

3:01stronie javascriptowy wątek z naszą logiką mamy jakiś most

3:06pomiędzy mamy jakis most i po prawej stronie mamy właśnie ten wątek natywny

3:10który się komunikuję przez tego bridge'a właśnie przez ten most i po prostu te komunikaty są cały

3:14czas wysyłane jak utworzony jest jakiś widok ta informacja jest wysyłana strona natywna też może

3:18w drugą stronę powiedzieć nam ej na przykład przyszło powiadomienie push tak więc jakby wysyła

3:22tą informację do naszego wątku JS-owego ta komunikacja po

3:26prostu jest poprzez jsony najprościej rzecz ujmując to jest tekst który jest wysyłany

3:30i jak moglibyśmy sobie podejrzeć taką komunikację to wygląda w ten sposób czyli

3:35nasz wątek JS-owy mówi ej panie UIManager stwórz mi

3:39tu widok taki taki taki który posiada taki i takie style który robi to i to

3:43później mówi słuchaj ten widok to jest dziecko tego widoku opakuj mi to

3:47tak zrób to mi to w ten sposób ostyluj to tak nie wiem dodaj

3:51tutaj margines i tak dalej cała ta informacja jest po prostu wysyłana czyli nasz

3:55tak naprawdę react native jest takim narzędziem do tłumaczenia języka

4:00reactowego na język natywny przez to korzystamy

4:04z tych komponentów natywnych i działa to naprawdę bardzo fajnie i bardzo sprawnie

4:08są z tym związane jakieś problemy to znaczy tak

4:15jak tutaj widać ta komunikacja odbywa się poprzez każdorazowe wysyłanie informacji między

4:19wątki natywnym a watkiem JS-owym i to wymaga tego żeby za każdy

4:23wysłać kopie tych samych danych ponieważ tak jak tutaj widać ten

4:28most to tak naprawdę nie jest do końca most tylko to nazwał bym to mostem linowym

4:32czyli że ta komunikacja jest taka ciężka nie możemy przesyłać

4:36na raz dużych kawałków informacji bo byśmy zapchali ten most więc te informacje są tak dzielone wysyłane

4:40i czasem powoduje to pewne problemy wydajnościowe i takim projektem

4:45który powstaje w react native jest Project Fabric

4:49to jest podejście ja nie będę się tutaj za bardzo z tym zgłębiać dołączę

4:53w linkach artykuł który wyjaśnia dużo

4:57bardziej jeśli ktoś byłby zainteresowany natomiast w skrócie to jest projekt który zamienia nam ten bridge

5:02na pewne inne narzędzie które usprawnia tą komunikację czyli już nie będzie trzeba wysyłać

5:06tych informacji tylko będzie można się odwoływać do

5:10tych informacji czyli nasz bridge nasza strona natywna będzie świadoma istnienia

5:14javascriptowej bo w tej chwili po prostu nasłuchuje na te wiadomości ale

5:18to jeszcze trochę ten projekt jest dopiero gdzieś tam w koncepcie natomiast coś takiego będzie

5:22i to na pewno też mega zmieni całe srodowisko chciałbym zaznaczyć jedną

5:26rzecz na koniec tego na koniec tej lekcji że to o czy mówiłem

5:30w tej chwili jakby nie jest tak istotne dla was ale chciałem o tym powiedzieć

5:34i zachęcam was do tego że po przejściu tego kurs na przykład sobie tu wrócić i porównać

5:39wasze doświadczenia z tym o czym mówiłem zawsze warto fajnie wiedzieć

5:43mniej więcej w ogóle jak to działa jak to jest w ja piszę tam view i to jest

5:47powstaje nam jakiś widok natywny i dlatego chciałem zrobić ten wstęp teoretyczny który

5:51może bo trochę nudny ale za chwilę przechodzimy już do konkretów dzięki