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

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.

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

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,

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.

Więc to jest spoko, ale chcesz znaleźć jakąś jedną przykładową rzecz i masz wylistowane wszystkie klasy widżetów dostępne we Flutterze. No i jeżeli nie wiesz, czego do końca szukasz, to nie jest w żaden sposób pokategoryzowane, więc tam było mi się, szczerze mówiąc, bardzo trudno odnaleźć. Też niektóre rzeczy w sumie, no to też jest jakiś tam Dev Experience, bo na przykład niektóre komponenty w stylu ten nasz input we Flutterze, z tego co ogarnęłam we wczorajszym researchu, są dwa rodzaje inputów, z czego jeden działa w formularzu, a drugi nie. Dla mnie to było ogólnie zaskoczenie, że input nie musi koniecznie działać w formularzu.

Myślisz, że gdybyś była bardziej zaznajomiona, to byś chciała pracować w tym stoku technologicznym? Myślę, że w sumie czemu nie? Można by było tego ogólnie spróbować. Można by było spróbować tego na jakichś, nie powiem, że bardziej zaawansowanych rzeczach, ale po prostu na takich bardziej skomplikowanych rzeczach, w stylu właśnie to, co też na początku wspominałeś, jakieś natywne moduły, podpięcie. Nie wiem, nawet płatności, nie? Zobaczenie po prostu, jak to wygląda, bo tutaj nie jestem pewna. To, co trochę mnie martwi, nie martwi we Flutterze.

Do niego instalacja bibliotek. Jest dwukrokowa, to znaczy trzeba podać sobie dokładną wersję biblioteki do pliku i dopiero potem puścić instalację. Coś w tym stylu, aczkolwiek w jednej z bibliotek, tylko że musiałam wejść bezpośrednio w dokumentację biblioteki, a nie w dokumentację Fluttera, bo Flutter w dokumentacji swojej mówi na temat instalacji bibliotek, róbcie to w tych dwóch krokach. Jak wejdzie się w dokumentację bibliotek, tam jest fragment odnośnie tego, że można jedną komendą załatwić ten wpis jakby do tego czegoś w stylu pakiet Jasona załóżmy, nie? Ale zastanawiam się, jak to by było w kwestii właśnie Stripe'a, bo nie wiem, czy Flutter ma wbudowane jakąkolwiek obsługę płatności na przykład.

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.

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.

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.

Więc tutaj akurat to, że Flutter ma w sobie te wersje, może nawet nie tyle wersje, tylko ma w sobie ileś rzeczy i ja się nie muszę zastanawiać, czy to będzie ze sobą kompatybilne, czy będę musiała szukać po jakieś repo, dlaczego to nie działa, to jest naprawdę spoko, bo to myślę, że zaoszczędza też trochę czasu przy ogólnie dewelopmencie, bo jest trochę mniej problemów, przynajmniej w tym jednym miejscu. No, mam nadzieję, że wreszcie React. Czytałem gdzieś, że React jest na ostatniej prostej do wejścia wersji 1.0, że te zmiany ostatnie, które były w tym 0.71, czyli zmiana tej infrastruktury, zmiana na Hermesa wreszcie i tam jeszcze kilka innych,

Myślę, że bardziej o aktywności community przekonalibyśmy się pisząc jakieś bardziej zaawansowane rzeczy, po prostu napotykając jakiś taki problem. Ciężki do ogarnięcia ogólnie i myślę, że problem flutterowy jak flutterowy. Czy Dart jest Dart, czyli język używany we flutterze, jest używany gdzieś poza flutterem? Bo ja szczerze mówiąc próbowałam to znaleźć i znalazłam jakiś jeden framework związany z server site renderingiem bodajże. I no tak zaczęłam patrzeć, że oni się chwalą, że to jest w Dart'cie, tylko że ich repozytorium jest od dwóch lat zarchiwizowane.

Tak, ja pamiętam jeszcze jak współpracowaliśmy bliżej z natywnymi deweloperami. Oni uwielbiali Fluttera, ale oni nienawidzili czegokolwiek co nie jest albo od Apple'a. iOS'owcy tylko lubili rzeczy od Apple'a, Android'owcy lubili tylko rzeczy od Google'a. Więc androidowcy na przykład nie mieli dużego problemu z Flutterem, iOS-owcy nie przepadali za Flutterem, ale to było raczej związane z po prostu lubieniem określonej firmy i wierzeniem, że oni zrobią dobrze. I tu wchodzi React Native pomiędzy. I nikt nie lubił React Native, dlatego że zresztą w tamtej fazie, na tamtym etapie ja też nie przepadałem za React Native, więc to też nie dziwię im się, że nie lubili. Może dzisiaj, kto wie.

Więc nie są często kompatybilne, trzeba poczekać z przesiąściem się na kolejną wersję, ale chce się ludziom i nie wygląda jakby to zaangażowanie spadało. Wręcz przeciwnie. Myślę, że do tego świata React Native'owego co chwila nadchodzi nowa fala osób, które wymyślają to kolejne rzeczy i jest ogromne to community. Ciekawostka, bo tak jeszcze ze swojej perspektywy sprawdziłem, jak chat GPT odpowiada mi na pytania związane z React Native'em i odpowiadał bardzo fajnie. W sensie te rzeczy, które ty miałeś w dokumentacji. Jak jestem Reactowcem, to jak napisać we Flutterze? Chat GPT, jak piszę na webie tak, to jak napisać w React Native albo coś?

To odpowiadał mi fenomenalnie. Obawiam się tego, jak by sobie radził z Flutterem, skoro jest tak... Stosunkowo mało contentu online. To w następnym odcinku. Tak, wszystko w następnym odcinku. Prawdzimy. Wszystko w następnym odcinku. Jak to GPT koduje w React Native i Flutterze. Tak, dokładnie. Dobrze. Mamy temat. Tak, mamy temat kolejny. No, więc jeżeli chodzi o community, to ja uwielbiam to community. Uwielbiam i nienawidzę. Ale raczej uwielbiam. No wiesz, przede wszystkim to jest też to, że community React Native'owe to jest community React'owe tak naprawdę, to jest community JavaScript'owe, TypeScript'owe i po prostu, jeżeli masz jakiś problem, masz jakieś pytanie, to na 99% znajdzie się ktoś, kto miał dokładnie ten sam problem i już obojętnie, czy to będzie TypeScript, czy JavaScript, czy po prostu...

Cokolwiek innego, to raczej to już gdzieś jest, nie? Tak, tak. No tylko trzeba umieć szukać. Jak wszędzie. No tak, ale przynajmniej we Flutterze szukasz dokumentacji. Tak, tak. Ale to ciekawe, czyli Google sobie samemu psuje rynek, bo jak daje ci tak dobrze odpowiedzi, to ludzie nie googlują odpowiedzi. Dobra, to dla mnie community javascriptowe daje 5 na 5. W sensie community React Native'owe daje 5 na 5 dla Ciebie Flutterowe? Ja bym powiedziała tu też podobnie, czyli jakieś 3,5-4, bo nie jestem przekonana, czy znalazłabym odpowiedzi na swoje problemy gdzieś w internecie.

I fajnie, że możemy budować takie aplikacje. Zgadzam się z tym. Ja mam nadzieję, że jednak te mobilne aplikacje to nie umrą tak od razu. Nie, nie, na pewno nie. Że będzie to się faktycznie rozwijać, ale wygląda to tak, jak przed chwilą powiedziałeś, że najprawdopodobniej te natywne to zostaną jednak w grach i tego typu sprawach, a resztę to będą jakieś stronki internetowe i właśnie frameworki w stylu Flutter czy React Native. Albo Kotlin Multiplatform. Jeszcze jest. Oby nie. Ale jest spoko. Dobra, to jest inny temat. Dzięki wszystkim za słuchanie slash oglądanie i do zobaczenia.