#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?

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

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.

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.

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.

Z samego założenia powinno działać, nie? Więc tutaj jeżeli chodzi o biblioteki, no poza tym, że ta instalacja jest dwukrokowa, to raczej przebiega to całkiem spoko. I właśnie większość rzeczy jest wbudowanych w stylu jakaś tam nawigacja tych komponentów jest mnóstwo dostępnych. Musiałam instalować bibliotekę do HTTP, żeby to faktycznie z API dało się pobrać jakieś dane, no to do tego musiałam zainstalować paczkę. I szczerze mówiąc, w tym naszym mini przykładowym projekciku, żadnej innej paczki nie potrzebowałam. To też o czymś świadczy, bo podejrzewam, że do React Nativa jednak tam jakieś...

Ze dwie chociaż, czy trzy były potrzebne. Chyba tak. Już nie pamiętam, ale chyba tak. Więc tak to wygląda z perspektywy paczek. Czy to, że React Native ma ich tak dużo, to dobrze? Nie no, to znowu wieczna dyskusja o tym, czy w ogóle się powinno używać niektórych, czy nie powinno. To jest temat na oddzielną dyskusję, dzisiaj tego nie wyjaśnimy na pewno, a szczególnie nie w taki sposób, że ktoś się nie wkurzy. Myślę, że nie da się tego tematu omówić tak, że ktoś się nie wkurzy. Ale myślę, że z perspektywy tego React Native, no wiadomo. Nigdy nie wiesz, czego będziesz potrzebował.

Nie wiem, z angielskiego powiem unsustainable. Tak, no to prawda. No to tu w sumie właśnie to, co wydaje mi się, że jest taką przewagą Fluttera, to jest właśnie jednak to, że może aż tylu bibliotek nie potrzebuje, bo głównie to... Nie mamy wtedy problemów z integracją, bo nie wiem jak tobie, ale mi się parę razy zdarzyło tak, że mam wersję React Nativa jakąś tam i mam sobie bibliotekę jakąś tam i jeszcze inną bibliotekę. No i generalnie potrzebuję tych trzech rzeczy, żeby mi aplikacja działała. No ale no niestety, wiadomo jak jest. Wersje się nie zgadzają. Dziękuję, do widzenia, szukamy pasujących.

To jest wreszcie to, co sprawi, oni na to czekali, żeby wprowadzić 1.0 wreszcie, więc wierzę w to, że wypuszczą. Kto wie, może nie 1.0, tylko 72, tak jak z Reactem, nie wiem, czy ty masz, kiedy ty zacząłeś historię programowania, ale był React 1.3 i później nie było Reacta 1.4, tylko React 14. Dlatego dzisiaj mamy React'a 18, bo po 1.3 wszedł 14 albo 1.4 i 15. Nie pamiętam, czy pierwszy był 14 czy 15 z tych teens, ale może wejdzie React Native 72. Całkiem możliwe w sumie. I wreszcie będzie stabilniej.

Bo to też te zmiany wtedy zazwyczaj na tych kolejnych wersjach będą już code-modowalne, nazwijmy to. Czyli nie będą to na tyle duże breaking changes, że nie będzie się dało zautomatyzować przejścia z jednej wersji na drugą. Tak, no miejmy nadzieję, że to nie będą takie breaking changes, że to będzie jednak łagodniejsze przejście. Dobrze, to możemy pomażlić. Dobra, ocena. Dla paczek. Ja mogę zacząć. W React Native dla mnie to jest nadal, pomimo tego, że uwielbiam to, to dla mnie to jest 3 na 5, bo w sensie to, jaki jest potencjalnie, nawet ja jestem załóżmy 2,5 na 5, bo to ja mogę mówić, że są super i tak dalej, ale fakt, że z wersji na wersję, nie wiadomo kiedy wyjdzie nowa wersja,