#11 Dev Experience w React Native i Flutterze. Agnieszka Młyńska i Michał Warda

Słuchacie Iteracji, podcastu EL Passion. Rozmawiamy o designie, dewelopmencie, biznesie i o tym, jak pogodzić wszystkie racje w IT, nie tylko dla kodujących. Cześć, witamy w kolejnym odcinku Iteracji. Ja jestem Michał, jestem CTO w EL Passion, a ze mną jest Agnieszka. Przedstawiasz się, Agnieszka? Hej, jestem Aga, jestem React Native developerką w EL Passion. Super. I dzisiejszy temat, który będziemy poruszać jest trochę analogiczny do tego, który poruszaliśmy poprzednio, czyli dzisiaj będziemy poruszać temat React Native vs Flutter. Przednio rozmawialiśmy o ban kontra dino, dzisiaj React Native vs Flutter.

Zabrałem najlepszą osobę jaką znam od React Native'a razem tutaj do przeprowadzenia tej dyskusji i będziemy rozmawiać, starać się opowiedzieć o tym nie tylko z perspektywy takiego szarego blog posta, który zawsze wymienia to w To samo w ramach dyskusji w ogóle o tych technologiach, ale też z naszej perspektywy, naszego osobistego odczucia tego, co jest fajne, co jest niefajne, co działa, co nie działa. Znowu postanowiliśmy, że zrobimy nawet jakąś taką prostą apkę, żeby przetestować nasze spostrzeżenia i dzisiaj będziemy o tym dyskutować. No, to może opowiedz nam, Agnieszka, jakie kategorie, w jakich kategoriach będziemy interpretować React Native kontra Flutter.

Można by gadać i gadać. Czy można w niej robić grę? Czy raczej nie? Pewnie w żadnej z tych lepiej gry nie robić. Ale jest jeszcze masa kwestii, których dzisiaj nie poruszymy. Może jak będziecie zainteresowani tematem, to jeszcze wrócimy i o tym pogadamy. Ale zacznijmy w ogóle od tego Dev Experience. Bo stworzyliśmy sobie aplikację i ja się zajmowałem React Native'em tak pokrętnie, żeby Agnieszka nie miała tak łatwo i żebym ja jeszcze odświeżył swoje skille. Ja zajmowałem się React Native'em i budowaliśmy aplikację, która tam miała sprawdzić kilka rzeczy. To ogólnie prosta koncepcja. Input, scroll view. I pobieranie z API.

Pobieranie zewnętrznych danych i stack jeszcze, czyli nawigacja po ekranach. Tak, przechodzenie pomiędzy ekranami. To było dla nas takie MVP zero. Ja, tak jak zawsze, ten input i przechodzenie pomiędzy ekranami to jest w każdej aplikacji praktycznie. Tak ja jeszcze uwielbiam sprawdzić scroll view, dlatego że przyzwyczajony jestem do tego, że Lubię, jak to React Native robi i chciałem zobaczyć, czy Flutter sobie radzi równie dobrze z tym, że jak mamy scroll view, to bardzo łatwo się z niego korzysta. Więc ja opowiem o tym, jak mi poszło z React Native. Ogólnie stworzenie tej aplikacji było dla mnie ultra proste.

Zajęło mi to tyle, co stworzenie aplikacji webowej. W sumie nawet nie musiałem przechodzić przez tutoriale, teraz aktualnie jak React Native już ma takie bardzo fajne wsparcie dla TypeScriptu, to właściwie było klikanie uwytypowanych rzeczy, koncepcję pobierania rzeczy z API, to już myślę, że wszyscy mają w małym palcu, jeżeli chodzi o React, no może nie wszyscy. Ale każdy, kto miał styczność z Reactem, miał taką umiejętność. Jeżeli chodzi o setup środowiska, czyli ten Dev Experience z setupu środowiska, to poszedł mi gładko. Postanowiłem, że będę szedł zgodnie z tutorialem. Myślę, że tutaj ważna kwestia, nie dewelopowałem na iOS. Tylko robiłem to tylko i wyłącznie na Androida, bo mam Linuxa u siebie, więc nie próbowałem odpalać Maca Mini po to, żeby na nim iOSa odpalać, ale jeżeli chodzi o development na Linuxie, przeszedłem czyściutko przez tutorial.

Wszystko u mnie działało. Oczywiście Android Studio instalowało się przez pół godziny, ale powiem szczerze, że cały experience był bardzo płynny. Mam wrażenie, że też się w miarę szybko kompilowało. Od momentu, kiedy ostatnio skorzystałem z React Native wymieniłem kompa, ale też nie jest to jakaś bestia kompletna, więc wszystko działało w miarę szybko. I myślę, że jeżeli ktoś już miał styczność z React Native, to z perspektywy Dev Experience to było dla mnie naprawdę spoko. Jak było we Flutterze? No to tutaj ja niestety aż tak łatwo nie miałam, żeby nie trzeba było w tutoriale patrzeć, bo jednak musiałam zajrzeć do tej dokumentacji.

Myślę, że sporo czasu zaoszczędziło mi tutaj to, o czym wspomniałeś przed chwilą, czyli instalowanie Android Studio. Instalowanie Xcode, setupowanie wszelkiego rodzaju SDK i jakichś innych narzędzi. W związku z tym, że ja na swoim Macu miałam to już setupowane pod React Nativa, no to do Fluttera tak naprawdę jednej czy dwóch paczek mi brakowało. I sam Flutter o dziwo wstał bez większych, w sumie bez żadnych problemów. Przykładową apkę udało się odpalić, co też jestem w szoku. Fajnie, że poszło, ale nie spodziewałam się, że od razu się uda jednak. Więc to całkiem fajnie. No ale tak jak mówię, ja musiałam pokorzystać jednak z dokumentacji, żeby zobaczyć jak to wygląda, co tam się dzieje i od czego w ogóle zacząć, nie?

Więc tak to wygląda z perspektywy samego setupu w sumie środowiska, przygotowania tego do odpalenia w ogóle apki. Okej, to jeszcze się spytam z perspektywy Dev Experience'u, bo ja postawiłem sobie za... jeszcze taki challenge sobie zrobiłem. Spróbuję odpalić testy w tym środowisku React Native'owym i powiem szczerze, że tutaj chyba się nic nie zmieniło, szczególnie od ostatniego momentu, kiedy korzystałem. Czyli, żeby odpalić testy React Native'owe na emulatorze, nadal jest potrzebny emulator, dziwo. W sensie, no bo mamy w świecie tych aplikacji, które nie muszą korzystać z emulatora do tego, żeby działać, no to mamy de facto dwa rodzaje testów.

Może tu jakaś inna biblioteka czy coś by pomogła, bo prawdopodobnie korzystałeś z React Testing Library. A z tego co pamiętam, to Detox pozwalał na takie właśnie odpalanie testów na emulatorze. I kiedyś nawet jakieś filmiki widziałam. Miałam okazję zresztą to setupować kiedyś, ale filmiki jakieś były. Jak pokazywali, jak faktycznie to się przeklikuje na emulatorze. Więc to akurat może by poszło łatwiej setupować, korzystając z innej linki zwyczajnie. Tak jak mówię, z mojej perspektywy to było zdecydowanie coś innego niż pisanie aplikacji webowych. No tak bym to nazwał.

No dobra, a jak we Flutterze? Ja akurat we Flutterze nie podejmowałam jakby próby ogarniania testów, bo samo ogarnięcie składni jak to w ogóle ruszyć, no bo mimo wszystko to wygląda zupełnie inaczej niż taki React Native, do którego jestem przyzwyczajona. Zamiast komponentów mamy jakieś magiczne widżety, które w sumie niby zachowują się podobnie, ale tak nie do końca. Jakieś takie rzeczy w stylu stylowanie oczywiście też jest, ale nie jest to wyodrębnione tak jak w React Native, tylko składniowo wiadomo to wygląda zupełnie inaczej, no inny język. Więc tutaj ja podejścia do testów szczerze mówiąc nie robiłam, bo stwierdziłam, że

Agnieszka Młyńska, Michał Warda. Myślę, że to by nie poszło i tak jak patrzę na to dzisiaj, to wiem, że dobrze zrobiłam, że nie zaczynałam tych testów, bo bym nie zdążyła zwyczajnie, nie? Okej, ale z tego co, bo ja też trochę we Flutterze, może nie akurat do tego zadania, ale trochę się bawiłem wcześniej, To jeżeli chodzi o setup, to tutaj jest też bardzo fajnie pod tym kątem, że jest ten testowy renderer, też można odpalać tak testy i też można, nawet ten testowy renderer działa tak bardziej niż ten, który jest w React Native, analogicznie do

Do tego samego device'a, bo oni tam też odpalają ten WebGL, w sensie OpenGL, czyli renderowanie faktycznych widoków. Więc możesz w tym testowym rendererze też odpalić faktyczne te aplikacje end-to-end. Bo tak jak w tym testowym rendererze React Native'owym, to nie odpalasz de facto Tak w przypadku Fluttera to działa i słyszałem, że bardzo dużo czasu się oszczędza właśnie na tym, że nie trzeba odpalać tych testów z emulatorem, a osiąga się praktycznie te same wyniki, co właśnie na testach z emulatorem.

Więc jestem ciekaw tego, wiem, że nie zdążyliśmy, ale z perspektywy Dev Experience'u jeszcze takie jakbyś powiedziała o Poza postawieniem aplikacji. To, co mi tak naprawdę chyba najmocniej pomogło, to była taka bardzo fajna sekcja w dokumentacji Flutterowej, a mianowicie Flutter dla React Native Developerów. I to jest naprawdę bardzo fajnie przemyślana ta dokumentacja, no bo Flutter jest rozwijającym się cały czas frameworkiem i takie wydaje mi się, że jest dosyć duże parcie w tej chwili na Fluttera. Więc jakby ta sekcja taka, bo wiadomo nie tylko dla React Native developerów, ale jest wyszczególnione dla tych, co dewelopują natywne aplikacje, dla Androida, dla tych co web i tego typu rzeczy.

Więc próbują zachęcić tych innych developerów, żeby jednak przyszli do Fluttera. No i jak to wygląda? Wygląda to w ten sposób, że mamy wyszczególnione różne rzeczy, które ogólnie są w React Native i od razu pod danym przykładem, na przykład w React Native mamy view, jakiś kontenerek na kawałek ekranu załóżmy, no i jest od razu wyszczególnione, że w React Native wygląda to tak, a we Flutterze wygląda to w ten sposób. No dla mnie, jako osoby, która w React Native robi, to to ułatwiało trochę tak naprawdę pierwsze uruchomienie, napisanie pierwszych ekranów, bo myślałam sobie tak, no w React Native zrobiłabym to tak,

Ciekawe, jak to zrobić tutaj, a dokumentacja mi mówi, zobacz, tu masz jak to zrobić, jak to wyglądało w React Native. Więc to z takiej perspektywy właśnie uczenia się tego frameworka dla osoby, która robiła w innych technologiach, uważam, że naprawdę mega dobrze to przemyśleli, bo to wygląda solidnie całkiem. Ogólnie, ja pamiętam jeszcze dokumentację też od Google'a co do Angular'a. Ma swoje wady i zalety ten framework, ale jeżeli chodzi o dokumentację, to jest zdecydowanie kompletna, a tak bym ją nazwał. Też to właśnie duży nacisk na testy, na to jak to działa, duży nacisk na to, żeby ludzie zrozumieli jakie są patterny używane, bo też zauważyłem, że te frameworki od Google'a zazwyczaj są bardziej złożone niż na przykład taki React,

Który daje Ci, nie wiem, prawie że nic, koncepcję komponentu i koncepcję nestowania komponentu i hooki, co najwyżej od niedawna, czyli stanowość jakąś tam. Tak te frameworki od Google'a zazwyczaj jeszcze dorzucają jakiś kontener i jakieś swoje koncepcje na to, jak asynchroniczność ogrywać, jakieś tam eriksy, czy tym podobne ogrywanie właśnie coli do zewnętrznych, więc dużo większe są te frameworki. Czyli, a jestem ciekaw tego calla do zewnętrznego API, gładko to poszło? Tak, w miarę tak, bo znowu w dokumentacji React Native idź do Fluttera. Tam o tym mówili, też bardzo fajnie mają i to wszystko w dokumentacji.

Jestem zdziwiona, że nawet nie miałam jakoś naprawdę dużych problemów z ogarnięciem tego. Co do dokumentacji, no tu... Część rzeczy mają spoko, część mi się bardzo nie podobała, ze względu na to, że na przykład widżetów jest mnóstwo. To, co przed chwilą wspominałeś, React Native jest w sumie, no w sumie daje nam mało, Flutter daje nam mnóstwo rzeczy. I teraz w tej dokumentacji taki sobie ktoś nowy w technologii chce sobie znaleźć rzecz, jedną konkretną. Scroll View. Nie ma czegoś takiego. Jest zamiast tego ListView, ale o tym też wspominają w tej cudownej stronie React Native i w ogóle.

A ty próbowałeś tego React Native'a zbuildować? Tyle co, wiesz, React Native Build na koniec. I zadziałało? Zadziałało, zadziałało. Właśnie to jest dla mnie fascynujące z perspektywy Dev Experience'u ten React Native. Mi, u mnie działa. To byłem zaskoczony. Tak, żeby było jasne, jeszcze bez Expo to wszystko robiłem, bo tak chciałem... Legitnie. W sensie, ja zakładam, że w większości appach mamy natywne moduły, to Expo nadal mi tam się nie zgrywa. Więc bez Expo i działa, to działa. Byłem zafascynowany tym. Dobra, to od 1 do 5, Dev Experience.

Czy takie rzeczy w stylu chcemy AWS-a podpiąć, nie? No i jak to wygląda z tej perspektywy? Jasne. No za mało czasu. Ale biblioteki to oddzielny temat, który będziemy poruszać. Wyobraźmy sobie scenariusz, że jesteś trochę bardziej doświadczona, bo ja na przykład z React Native'em i bibliotekami i upgrade'owaniem to też nie jest jak jest super. Dobra, ja dam swoją ocenę. Ja React Native'owi na ten moment daję 4 na 5. 4 dlatego, że nadal to nie jest 1.0 wersja i nadal te przejścia z wersji na wersję pływają Trudne. Trudne. I frustrujące.

Ty wiesz o tym nawet lepiej niż ja. Myślę, że to jest ogromna zaleta Fluttera, że tam już jest ta wersja stabilna i nie ma tyle breaking changes. I wsparcie dla bibliotek, nawet jeżeli to jest dwukrokowe, To mniej więcej wiesz czego się spodziewać i nie spodziewasz się tego, że jak przejdziesz z wersji 0.70 na 0.71, to czwarte twoich bibliotek już nie działa. Więc tutaj z perspektywy Dev Experience myślę, że to jest ten punkcik, który zabieramy React Native'owi, ale wszystko inne u mnie działa. Wszystko inne u mnie działa. Dlatego myślę, że twoje trzy... To myślę, że faktycznie tak jakbym posiedziała nawet dwa czy trzy dni czy coś takiego, żeby bardziej się przyzwyczaić do czegoś innego, do składni, to myślę, że te cztery to byłoby spoko całkiem.

Warte sprawdzenia w sumie kiedyś tej pozostałej części. Dobra, to przejdźmy płynnie do tych bibliotek. Bo biblioteki to jest dla mnie temat rzeka. Ale jeżeli chodzi o React Nativa, to ja, w sensie to community node'owe, MPM-owe, nazwijmy to, MPM-owe community, Jakie jest, każdy wie. Są wady i zalety tego. Ja chciałem powiedzieć tylko, że od któregoś tam Reacta 0.60 ileś, jak się pojawiła ta możliwość automatycznej instalacji, to dziś Po tym, załóżmy, dwóch latach od momentu, kiedy to wprowadzili, już większość bibliotek z tego korzysta.

I jak ja na przykład miałem zainstalować sobie kilka tych, to nawet łącznie próbowałem coś natywnego tam wrzucić, no to pyk, pyk, mamy to. I to w porównaniu do tego, co ja przeżywałem jeszcze właśnie dwa lata temu korzystając, no to wreszcie, wreszcie, no wiecie, React Native ma ile? Już sześć, siedem lat ta technologia, a tutaj wreszcie mamy możliwość tego, żeby płynnie instalować dependencies natywne i też fakt, że można wreszcie pisać je nie tylko w Objective-C i w Javie, ale można chyba by default teraz dependencies iOS-owe, więc się pisze w Swifcie już.

Wreszcie! A androidowe chyba nadal w Javie, ale tam jest dużo łatwiej dorzucić kotlina. No to ja jestem w stanie pisać natywne jakieś tam biblioteki, pomimo, że już mam małe doświadczenie z natywnymi technologiami. To mi się podoba. Ilość bibliotek jest kosmicznie duża. Właściwie ja to analizuję w miarę bieżąco, jak przychodzą do nas jacyś klienci i robimy estymacje, próbujemy. Zawsze czegoś szukam, zawsze coś testujemy. No to okazuje się, że na 95% potrzeb naszych klientów jesteśmy w stanie odpowiedzieć React Native. Bo jest na to lipka. Tak. I jest aktualna. I jest aktualna, i jest. I nawet powiedziałbym, że są nawet przemyślane.

I to naprawdę daje duży benefit i da się z głową podchodzić do tego, żeby te rzeczy budować. Myślę, że to nie jest write once. Pamiętam tę prezentację pierwszą React Native'ową. Learn once, write anywhere. Learn once, write anywhere. Ale dodatkowo teraz myślę, że właśnie z perspektywy paczek jest bardzo dużo rzeczy, które są faktycznie write once, use anywhere. Szczególnie jeżeli robimy to w ramach tej samej aplikacji, tego samego, jakaś logika formularzy, walidacje i tak dalej, współdzielenie tego, no działa tak, tak, tak fajnie to działa. Znowu w naszym defaultowym stacku. Cześć. Tak, jest sprawdzone, działa.

No dobra, to porozmawiajmy o tych paczkach we Flutterze. Jak to wygląda we Flutterze? We Flutterze wygląda to tak, że większość rzeczy nie jest w oddzielnych paczkach, bo jest po prostu we Flutterze bezpośrednio. Więc z jednej strony Flutter ma zdecydowanie mniej dostępnych paczek niż React Native. Z drugiej strony Flutter ma zdecydowanie więcej rzeczy sam w sobie, więc może nie ma potrzeby Tak, no tak.