{"id":3659,"date":"2019-10-18T08:53:44","date_gmt":"2019-10-18T06:53:44","guid":{"rendered":"https:\/\/wp-test.itcraft.pl\/pl\/?p=3659"},"modified":"2024-03-13T10:20:25","modified_gmt":"2024-03-13T09:20:25","slug":"flutter-vs-react-native-porownanie-frameworkow-cross-platform","status":"publish","type":"post","link":"https:\/\/itcraftapps.com\/pl\/blog\/flutter-vs-react-native-porownanie-frameworkow-cross-platform\/","title":{"rendered":"Flutter vs React Native – por\u00f3wnanie framework\u00f3w cross-platform"},"content":{"rendered":"\n

Technologie wieloplatformowe wpisa\u0142y si\u0119 na sta\u0142e w \u015brodowisko tw\u00f3rc\u00f3w oprogramowania mobilnego. W tej chwili g\u0142\u00f3wnymi graczami na rynku s\u0105 Flutter i  React Native<\/a>. Przedstawiamy por\u00f3wnanie tych dw\u00f3ch technologii z punktu widzenia programisty, z nadziej\u0105, \u017ce uda nam si\u0119 pokaza\u0107, co mo\u017cna zyska\u0107 decyduj\u0105c si\u0119 na wyb\u00f3r jednej z nich do zbudowania twojej nast\u0119pnej aplikacji mobilnej.<\/p>\n\n\n\n

Spis tre\u015bci<\/h3>\n\n\n\n
    \n
  1. Historia powstania React Native<\/a><\/span><\/li>\n\n\n\n
  2. Historia powstania Flutter\u2019a<\/a><\/span><\/li>\n\n\n\n
  3. Jak dzia\u0142a React Native?<\/a><\/span><\/li>\n\n\n\n
  4. Czym jest Flutter?<\/a><\/span><\/li>\n\n\n\n
  5. Techniczne por\u00f3wnanie narz\u0119dzi \u2013 jakie narz\u0119dzia s\u0105 dost\u0119pne dla poszczeg\u00f3lnych framework\u00f3w?<\/a><\/span>
    –     React Native<\/a><\/span>
    –     FLUTTER<\/a><\/span> <\/a><\/li>\n\n\n\n
  6. Flutter \u2013 Learning curve<\/a><\/span><\/li>\n\n\n\n
  7. Podsumowanie<\/a><\/span><\/li>\n<\/ol>\n\n\n\n

    Historia powstania React Native<\/h2>\n\n\n\n

    React<\/a> Native zosta\u0142 stworzony przez Facebooka. Historia rozpoczyna si\u0119 od wewn\u0119trznego projektu hackatonu latem 2013. Pierwszy raz, publicznie, zaprezentowano RN w 2015 roku na React.js Con. W marcu 2015, na F8, Facebook poinformowa\u0142, \u017ce React Native jest ju\u017c dost\u0119pny na GitHub’ie. Facebook, rozwijaj\u0105c w\u0142asne produkty, takie jak chocia\u017cby \u015bwietnie znany Messanger oraz do\u015bwiadczenie w webowym frameworku React.js stworzy\u0142 rozwi\u0105zanie dla natywnych komponent\u00f3w aplikacji z w\u0105tku JavaScript.
    <\/p>\n\n\n\n

    Historia powstania Flutter\u2019a<\/h2>\n\n\n\n

    Pierwsza wersja Fluttera, jeszcze pod nazw\u0105 kodow\u0105 \u201cSky\u201d, zosta\u0142a przedstawiona w 2015 roku na konferencji deweloper\u00f3w Dart. Wersj\u0119 1.0 wypuszczono na evencie Flutter Live, <\/em>4.12.2018. By\u0142a to pierwsza stabilna wersja, pozwalaj\u0105ca na kompilowanie natywnych aplikacji Android i iOS<\/a> z jednego kodu. Opr\u00f3cz tego, jako najwa\u017cniejsze zalety frameworka podano: p\u0142ynno\u015b\u0107 dzia\u0142ania na poziomie natywnej aplikacji, oraz zachowuj\u0105cy stan aplikacji Hot Reload.<\/p>\n\n\n\n

    Jak dzia\u0142a React Native?<\/h2>\n\n\n\n

    W React Native podstawowym j\u0119zykiem programowania jest JavaScript. Standardowo do\u0142\u0105czone jest rozszerzenie JSX u\u0142atwiaj\u0105ce pisanie deklaratywnych komponent\u00f3w UI, tak jak w React.js. Programista nie jest ograniczony w u\u017cywaniu innych transpiler\u00f3w. St\u0105d cz\u0119sto w programowaniu React Native spotyka si\u0119 Flow, TypeScript, czy ReasonML. Ponadto mo\u017cna u\u017cywa\u0107 najnowszych konstrukcji j\u0119zyka jak async\/await czy generatory. Docelowo w aplikacji na telefonie znajduje si\u0119 zawsze JavaScript (po transpilacji).
    <\/p>\n\n\n\n

    React Native zawiera zestaw standardowych element\u00f3w UI, wyposa\u017conych w bindingi do natywnych komponent\u00f3w, kt\u00f3re b\u0119d\u0105 u\u017cyte w aplikacji w zale\u017cno\u015bci od systemu operacyjnego. Komponenty mog\u0105 by\u0107 dowolnie grupowane w hierarchicznej strukturze deklaratywnego widoku. Mog\u0105 renderowa\u0107 inne komponenty deklaratywne, lub komponenty z natywnymi bindingami.

    Komponent (React.Component) jest fundamentaln\u0105 koncepcj\u0105 w React Native. Jest to obiekt (albo funkcja) kt\u00f3ry posiada \u201cprops\u201d i \u201cstate\u201d. Dla zadanych props i state komponent ma zwraca\u0107 jaki\u015b widok, i docelowo tylko gdy props albo state si\u0119 zmieni. Props s\u0105 rodzajem argument\u00f3w dla komponentu, kt\u00f3re ustawiane z s\u0105 z zewn\u0105trz – komponent nie ma nad nimi kontroli. State natomiast to dane wewn\u0119trzne, prywatne, w ca\u0142o\u015bci i na wy\u0142\u0105czno\u015b\u0107 pod kontrol\u0105 komponentu.

    React Native stosuje jednokierunkowy przep\u0142yw danych (unidirectional data flow), co odr\u00f3\u017cnia go od innych deklaratywnych framework\u00f3w takich jak Angular (two-way data binding). Skutkuje to lepsz\u0105 wydajno\u015bci\u0105 i \u0142atwiejszym debugowaniem. Jednokierunkowy przep\u0142yw danych w React Native polega na tym \u017ce komponent w fazie renderowania ma do dyspozycji read-only props i state. Mo\u017ce je dowolnie przekszta\u0142ca\u0107, przekazywa\u0107 w d\u00f3\u0142 hierarchii widoku, ale nie powinien ich mutowa\u0107 bezpo\u015brednio, a tym bardziej nie mog\u0105 tego zrobi\u0107 komponenty potomne kt\u00f3re otrzymaj\u0105 te dane jako props. Modyfikacja bezpo\u015brednia props\u00f3w lub state nie b\u0119dzie skutkowa\u0107 od\u015bwie\u017ceniem widoku. Aby tego dokona\u0107 nale\u017cy pos\u0142u\u017cy\u0107 si\u0119 metod\u0105 setState komponentu (albo podobn\u0105 funkcj\u0105 w przypadku u\u017cycia Reduxa czy innych rozwi\u0105za\u0144). Obs\u0142uga zdarze\u0144 przez komponenty potomne powinna zosta\u0107 zrealizowana przez przekazanie w props callback\u00f3w do obs\u0142ugi event\u00f3w, kt\u00f3re w implementacji docelowo wykonuj\u0105 setState rodzica wed\u0142ug potrzeb. <\/p>\n\n\n\n

    Czym jest Flutter?<\/h2>\n\n\n\n

    Aplikacje Flutter<\/a> pisze si\u0119 w Dart, obiektowym j\u0119zyku z systemem typ\u00f3w, \u0142\u0105cz\u0105cym statyczne typowanie z kontrol\u0105 w runtime. Zezwala on na inferencj\u0119 typ\u00f3w, dzi\u0119ki czemu mo\u017cna pomija\u0107 ich deklaracje. Posiada mechanizm async\/await, kt\u00f3ry wraz z typem Future<\/em> pozwala na pisanie asynchronicznego kodu tak, jakby by\u0142 on synchroniczny. Je\u017celi znasz takie j\u0119zyki jak Kotlin czy JavaScript, to jego przyswojenie b\u0119dzie bezproblemowe.<\/p>\n\n\n\n

    Podstawowym budulcem interfejsu u\u017cytkownika jest Widget. Zasada dzia\u0142ania jest podobna do React Native – de facto<\/em> dokumentacja Fluttera wprost wymienia Reacta jako inspiracj\u0119. Poszczeg\u00f3lne elementy uk\u0142ada si\u0119 w hierarchiczn\u0105 struktur\u0119, budowan\u0105 od nowa za ka\u017cdym razem, gdy stan aplikacji si\u0119 zmienia. Nie znaczy to jednak, \u017ce widok jest co chwil\u0119 budowany od nowa. Zwr\u00f3cona struktura jest jedynie po\u015brednikiem, na podstawie kt\u00f3rego framework modyfikuje widoczny interfejs. W ten spos\u00f3b Flutter zamienia znany z platform natywnych styl imperatywny<\/em> na deklaratywny<\/em>, zdejmuj\u0105c z programisty ci\u0119\u017car pisania i zarz\u0105dzania przej\u015bciami pomi\u0119dzy mo\u017cliwymi stanami interfejsu.<\/p>\n\n\n\n

    Flutter zapewnia szerok\u0105 palet\u0119 gotowych widget\u00f3w, zgodnych z wytycznymi Material Design. Programista ma do dyspozycji mi\u0119dzy innymi przyciski, pola tekstowe z tytu\u0142ami, czy wrappery zarz\u0105dzaj\u0105ce umiejscowieniem belek czy p\u0142ywaj\u0105cych przycisk\u00f3w. Pewien problem mo\u017ce sprawia\u0107 rozmieszczanie element\u00f3w na ekranie. Pozycj\u0119 i dekoracj\u0119 komponent\u00f3w definiujemy umieszczaj\u0105c je w kontenerach. Cz\u0119sto powoduje to rozrastanie si\u0119 struktury i zmusza do zapami\u0119tania zachowa\u0144 i zale\u017cno\u015bci pomi\u0119dzy kilkoma rodzajami kontener\u00f3w.<\/p>\n\n\n\n

    Architektura BLoC (Bussiness Logic Component) jest jednym z rozwi\u0105za\u0144 proponowanych przez Google. Umieszcza ona przypadki u\u017cycia w osobnych klasach. Komunikacja z nimi odbywa si\u0119 przez strumienie asynchroniczne, interfejs publikuje zdarzenia w odpowiednich \u201cwej\u015bciach\u201d BLoC-\u00f3w i jednocze\u015bnie nas\u0142uchuje wyj\u015b\u0107, kt\u00f3rymi \u201csp\u0142ywaj\u0105\u201d kolejne stany aplikacji. Po\u015brednikiem pomi\u0119dzy tymi komponentami a interfejsem jest widget StreamBuilder, odbieraj\u0105cy dane ze strumieni. Podstawowym za\u0142o\u017ceniem tej architektury jest dostosowanie aplikacji do dzia\u0142ania w \u015brodowisku asynchronicznym – w kt\u00f3rym rozmaite dane nap\u0142ywaj\u0105 w dowolnych momentach i w dowolnej kolejno\u015bci. W tym rozwi\u0105zaniu na pewno odnajd\u0105 si\u0119 programi\u015bci natywni, zaznajomieni z RxJav\u0105 czy architektur\u0105 MVVM. Nie jest to jednak jedyna droga, Flutter mo\u017ce wsp\u00f3\u0142pracowa\u0107 np. z Reduxem a stan mo\u017ce by\u0107 propagowany przez same komponenty. Proces ten mo\u017cna te\u017c upro\u015bci\u0107 przez InheritedWidget <\/em>skracaj\u0105cy drog\u0119 do docelowego komponentu, jak\u0105 musz\u0105 przeby\u0107 dane. Kolejnym rozwi\u0105zaniem mo\u017ce by\u0107 Provider<\/em>, biblioteka \u0142\u0105cz\u0105ca Dependency injection<\/em> i zarz\u0105dzanie stanem aplikacji. Za jej pomoc\u0105 programista mo\u017ce dostarczy\u0107 niezb\u0119dne warto\u015bci w odpowiednie miejsca interfejsu. Wstrzykiwa\u0107 mo\u017cna dowolne obiekty, proste dane, strumienie, b\u0105d\u017a obiekty obserwuj\u0105ce zmiany danych (np. ChangeNotifier<\/em>).
    Wszystkie powy\u017csze rozwi\u0105zania s\u0105 dobrze udokumentowane i obja\u015bnione w oficjalnych przewodnikach. Wielu programistom u\u0142atwi to wdro\u017cenie znanych ju\u017c im rozwi\u0105za\u0144.
    <\/p>\n\n\n\n

    Techniczne por\u00f3wnanie narz\u0119dzi – jakie narz\u0119dzia s\u0105 dost\u0119pne dla poszczeg\u00f3lnych framework\u00f3w?<\/h2>\n\n\n\n

    React Native<\/h2>\n\n\n\n

    Hot \/ Live reload<\/h3>\n\n\n\n

    Mocne przy\u015bpieszenie procesu developmentu, gdy\u017c ka\u017cd\u0105 zmian\u0119 w JavaScript mo\u017cemy w sekund\u0119 zobaczy\u0107 na telefonie. Funkcja ograniczona tylko do trybu debugowania (musi by\u0107 pod\u0142\u0105czony metro bundler), a zmiany natywne nie s\u0105 widoczne.<\/p>\n\n\n\n

    Expo<\/h3>\n\n\n\n

    Wystarczy zainstalowa\u0107 jedn\u0105 aplikacj\u0119 Expo na telefonie, a kod aplikacji RN mo\u017cemy pobiera\u0107 z internetu, czy kodu QR i b\u0142yskawicznie aktualizowa\u0107 gdy si\u0119 zmieni. Nie nadaje si\u0119 do tworzenia aplikacji produkcyjnych, a raczej do szybkiego prototypowania. Je\u015bli tylko chcemy doda\u0107 prawdziwe pushe, czy Crashlytics albo jak\u0105kolwiek bibliotek\u0119 nie uj\u0119t\u0105 w Expo SDK, musimy zako\u0144czy\u0107 prac\u0119 z Expo i wyeksportowa\u0107 (expo eject) projekt do wersji \u201cpe\u0142nej\u201d.<\/p>\n\n\n\n

    snack.expo.io <\/h3>\n\n\n\n

    Nie musimy nawet instalowa\u0107 Expo w telefonie, mo\u017cemy symulowa\u0107 aplikacj\u0119 w przegl\u0105darce!<\/p>\n\n\n\n

    React Native CLI <\/h3>\n\n\n\n

    Program, kt\u00f3ry potrafi nam wygenerowa\u0107 nowy projekt React native. Niestety bardzo ograniczone opcje, a programu u\u017cywa si\u0119 z terminala.
    Z do\u015bwiadczenia mog\u0119 powiedzie\u0107 \u017ce po utworzeniu projektu nadal jest mn\u00f3stwo pracy inicjalizacyjnej jak generowanie certyfikat\u00f3w, dodawanie wariant\u00f3w dev\/prod czy podpinanie Crashlytics. <\/em>Mo\u017cna przygotowa\u0107 szablon projektu, by inicjalizacja nowych projekt\u00f3w przebiega\u0142a szybciej, ale \u015brodowisko React Native tak szybko si\u0119 zmienia, \u017ce taki szablon wykorzystaliby\u015bmy tylko raz. S\u0142abiutko w por\u00f3wnaniu do kreator\u00f3w projekt\u00f3w w Android Studio \/ XCode.<\/em><\/p>\n\n\n\n

    Testowanie <\/em><\/h3>\n\n\n\n

    Przede wszystkim niewielkie mam do\u015bwiadczenie w tej kwestii.<\/em>
    Jest kilka framework\u00f3w pod React Native. Domy\u015blnie w\u0142\u0105czony jest \u201cJest\u201d. \u0141atwo mo\u017cemy doda\u0107 nowe testy jednostkowe. Wrzucamy do __tests__ i odpalamy poleceniem \u201cnpm test\u201d. Trzeba uwa\u017ca\u0107 z importami do natywnych modu\u0142\u00f3w – potrzebne s\u0105 mocki, a tych cz\u0119sto brakuje w paczkach z npm, albo dzia\u0142aj\u0105 \u017ale.<\/p>\n\n\n\n

    Wdra\u017canie i budowanie apki<\/h3>\n\n\n\n


    Wszystko trzeba robi\u0107 natywnie i jeste\u015bmy ograniczeni do tego co oferuje Android Studio \/ XCode. Szczeg\u00f3lnie problematyczne dla programist\u00f3w niedo\u015bwiadczonych wystarczaj\u0105co z developmentem natywnym (ja) – nie do\u015b\u0107 \u017ce 2x wi\u0119cej platform do zarz\u0105dzania, to jeszcze na ka\u017cdej platformie idzie 2x wolniej ni\u017c natywnemu deweloperowi.<\/em>Brak zalet React Native na tym obszarze.<\/p>\n\n\n\n

    FLUTTER <\/h2>\n\n\n\n

    Flutter oferuje pluginy u\u0142atwiaj\u0105ce prac\u0119 w Android Studio, oraz Visual Studio Code. Wspomagaj\u0105 one tworzenie projekt\u00f3w, debugowanie oraz funkcj\u0119 Hot Reload. <\/p>\n\n\n\n

    DevTools <\/h3>\n\n\n\n

    Narz\u0119dzie do debugowania i profilowania apki, odpalane w przegl\u0105darce. Pozwala ono mi\u0119dzy innymi na przegl\u0105danie interfejsu w formie drzewa i na sprawdzanie poszczeg\u00f3lnych widget\u00f3w. Umo\u017cliwia te\u017c \u015bledzenie zu\u017cycia pami\u0119ci, zasob\u00f3w CPU i testowanie apki pod k\u0105tem wydajno\u015bci.<\/p>\n\n\n\n

    Debugger OEM (Original Equipment Manufacturer) <\/h3>\n\n\n\n

    Pozwala na debugowanie nie tylko kodu Dart, ale te\u017c plik\u00f3w wygenerowanych dla konkretnej platformy. Jest to szczeg\u00f3lnie u\u017cyteczne przy pisaniu w\u0142asnych rozwi\u0105za\u0144 dla danego systemu.<\/p>\n\n\n\n

    Testowanie <\/h3>\n\n\n\n

    Flutter oferuje w\u0142asny plugin przeznaczony do przeprowadzania test\u00f3w jednostkowych, integracyjnych, oraz sprawdzania widget\u00f3w. Do mockowania zale\u017cno\u015bci, oficjalna dokumentacja zaleca Mockito. <\/p>\n\n\n\n

    Flutter wspiera flavory pozwalaj\u0105ce konfigurowa\u0107 r\u00f3\u017cne warianty budowania, wyszukuj\u0105c istniej\u0105ce android productFlavors <\/em>oraz iOS schema<\/em>. Mo\u017cna odwo\u0142ywa\u0107 si\u0119 do nich bezpo\u015brednio w kodzie Dart a tak\u017ce wywo\u0142ywa\u0107 je bezpo\u015brednio z Flutter CLI, jednak najpierw musz\u0105 by\u0107 skonfigurowane osobno dla ka\u017cdej platformy. Proces opisuj\u0105 jedynie artyku\u0142y od community.<\/p>\n\n\n\n

    Do przygotowania wersji release konieczne jest samodzielne skonfigurowanie ka\u017cdej platformy osobno. Dokumentacja opisuje proces edycji poszczeg\u00f3lnych plik\u00f3w, jednak znajomo\u015b\u0107 Androida oraz iOS na pewno przyspieszy ten proces.<\/p>\n\n\n\n

    Flutter – Learning curve<\/h2>\n\n\n\n

    Google aktywnie zach\u0119ca deweloper\u00f3w do nauki i przesiadki na Fluttera. Dost\u0119pnych jest wiele materia\u0142\u00f3w szkoleniowych takich jak prelekcje, czy seria wideo tutoriali. <\/p>\n\n\n\n

    Dokumentacja jest wyj\u0105tkowo wyczerpuj\u0105ca, zapewnia wiele przyk\u0142ad\u00f3w i obja\u015bnia wiele aspekt\u00f3w pracy z frameworkiem, od budowania interfejsu po pisanie test\u00f3w. Autorzy frameworka przedstawiaj\u0105 gotowe przepisy na wiele element\u00f3w wsp\u00f3\u0142czesnej aplikacji. Proponuj\u0105 te\u017c nowoczesny wzorzec architektoniczny, BLoC.  Ogromn\u0105 zalet\u0105 jest sekcja przeznaczona dla programist\u00f3w znaj\u0105cych inne popularne platformy, mobilne oraz web. T\u0142umaczy ona kluczowe r\u00f3\u017cnice pomi\u0119dzy nimi a Flutterem. <\/p>\n\n\n\n

    Z tego powodu nauka frameworka nie sprawia du\u017cych trudno\u015bci. W zale\u017cno\u015bci od posiadanego do\u015bwiadczenia, konieczna mo\u017ce by\u0107 nauka takich zagadnie\u0144 jak np. ReactiveX, deklaratywny UI czy wzorzec async\/await. Framework wykorzystuje j\u0119zyk Dart, nie tak popularny jak np. JavaScript czy Java, wi\u0119c cz\u0119\u015b\u0107 programist\u00f3w b\u0119dzie musia\u0142a po\u015bwi\u0119ci\u0107 czas na przyswojenie sk\u0142adni. W rankingu popularno\u015bci Stack Overflow z 2019, zaj\u0105\u0142 22 miejsce z wynikiem 1.9% – wynik kontrastuje z zajmuj\u0105cym pierwsze miejsce JavaScript. Jest on jednak do\u015b\u0107 podobny do innych j\u0119zyk\u00f3w obiektowych i posiada bezpiecze\u0144stwo typ\u00f3w, wi\u0119c przesiadka nie powinna sprawia\u0107 problem\u00f3w. <\/p>\n\n\n\n

    Ponadto, we wspomnianym rankingu, w kategorii \u201cMost Loved\u201d, oba j\u0119zyki maj\u0105 niemal identyczny wynik, JS – 66.8%, Dart – 66.3%. Kategoria pokazuje ilu deweloper\u00f3w jest zainteresowanych dalsz\u0105 prac\u0105 z dan\u0105 technologi\u0105. Bior\u0105c pod uwag\u0119, \u017ce wi\u0119kszo\u015b\u0107 wynik\u00f3w jest zbli\u017cona do 60%, Dart mo\u017ce by\u0107 technologi\u0105 \u0142atw\u0105 i ciekaw\u0105 w nauce.<\/p>\n\n\n\n

    Podsumowanie<\/h2>\n\n\n\n

    Frameworki wieloplatformowe rozwijaj\u0105 si\u0119 i zdobywaj\u0105 coraz wi\u0119ksz\u0105 popularno\u015b\u0107. Rozwi\u0105zania produkuj\u0105ce aplikacje zbli\u017cone do natywnych, zdecydowanie wypieraj\u0105 te hybrydowe, oferuj\u0105c lepsz\u0105 wydajno\u015b\u0107 oraz natywny wygl\u0105d i zachowanie aplikacji. Flutter i React Native zdaj\u0105 si\u0119 by\u0107 najwa\u017cniejszymi konkurentami w dziedzinie cross-platform.

    Oba frameworki buduj\u0105 widoki w spos\u00f3b deklaratywny. Wprowadzaj\u0105 analogiczne poj\u0119cia Component i Widget, b\u0119d\u0105cych podstawowym budulcem aplikacji, dzia\u0142aj\u0105cymi na podstawie niezmiennego stanu. Ka\u017cdy z nich oferuje te\u017c funkcj\u0119 Hot Reload pozwalaj\u0105c\u0105 na szybkie prze\u0142adowanie dzia\u0142aj\u0105cej aplikacji i sprawdzanie wprowadzonych zmian.<\/p>\n\n\n\n

    U swoich podstaw, obie technologie s\u0105 do\u015b\u0107 podobne. Pos\u0142uguj\u0105 si\u0119 deklaratywnym stylem budowania UI i s\u0105 do\u015b\u0107 elastyczne, pozwalaj\u0105c programi\u015bcie na zastosowanie r\u00f3\u017cnych technik zarz\u0105dzania stanem aplikacji. Dost\u0119p do funkcji urz\u0105dze\u0144 zapewniaj\u0105 pluginy. <\/p>\n\n\n\n

    React Native na tym polu bardziej polega na spo\u0142eczno\u015bci, maj\u0105c do dyspozycji kilka osobnych bibliotek dla tych samych zada\u0144. Mo\u017ce by\u0107 to zar\u00f3wno wada, jak i zaleta. Flutter pozostaje pod wi\u0119ksz\u0105 kontrol\u0105 swoich autor\u00f3w, kt\u00f3rzy sami zapewniaj\u0105 wi\u0119cej gotowych rozwi\u0105za\u0144. Jednocze\u015bnie wsp\u00f3\u0142pracuj\u0105 oni z rosn\u0105cym community, kt\u00f3re dostarcza brakuj\u0105cych narz\u0119dzi, jak np. obs\u0142uga bazy danych. <\/p>\n\n\n\n

    Ostateczna decyzja o zastosowaniu technologii nale\u017cy do deweloper\u00f3w. Flutter jako m\u0142odszy framework, si\u0142\u0105 rzeczy jest mniej popularny. React Native, pos\u0142uguje si\u0119 JavaScript i zbudowany jest na bazie React.js, mo\u017ce by\u0107 wi\u0119c bardziej atrakcyjny dla web developer\u00f3w. <\/p>\n\n\n\n

    Niemniej obie technologie posiadaj\u0105 pewien pr\u00f3g wej\u015bcia. Programi\u015bci do\u015bwiadczeni w technologiach natywnych b\u0119d\u0105 musieli przyswoi\u0107 wzorce znane raczej z web. Natomiast front-endowcy b\u0119d\u0105 musieli zmierzy\u0107 si\u0119 ze specyfik\u0105 platform mobilnych. Przydatna b\u0119dzie tak\u017ce wiedza na temat platform docelowych, cho\u0107by dla usprawnienia procesu budowania i wdra\u017cania aplikacji.
    <\/p>\n","protected":false},"excerpt":{"rendered":"

    Technologie wieloplatformowe wpisa\u0142y si\u0119 na sta\u0142e w \u015brodowisko tw\u00f3rc\u00f3w oprogramowania mobilnego. W tej chwili g\u0142\u00f3wnymi graczami na rynku s\u0105 Flutter i  React Native. Przedstawiamy por\u00f3wnanie tych dw\u00f3ch technologii z punktu widzenia programisty, z nadziej\u0105, \u017ce uda nam si\u0119 pokaza\u0107, co mo\u017cna zyska\u0107 decyduj\u0105c si\u0119 na wyb\u00f3r jednej z nich do zbudowania twojej nast\u0119pnej aplikacji mobilnej.…<\/p>\n","protected":false},"author":12,"featured_media":10378,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[9,12,5],"tags":[],"class_list":{"0":"post-3659","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-aplikacje-cross-platform","8":"category-flutter-development","9":"category-news"},"acf":[],"yoast_head":"\nFlutter vs React Native - por\u00f3wnanie framework\u00f3w cross-platform - itCraft<\/title>\n<meta name=\"description\" content=\"React Natvie vs Flutter - Wszystko co powiniene\u015b wiedzie\u0107 o frameworkach cross-platform ale boisz si\u0119 zapyta\u0107.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itcraftapps.com\/pl\/blog\/flutter-vs-react-native-porownanie-frameworkow-cross-platform\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter vs React Native - por\u00f3wnanie framework\u00f3w cross-platform - itCraft\" \/>\n<meta property=\"og:description\" content=\"React Natvie vs Flutter - Wszystko co powiniene\u015b wiedzie\u0107 o frameworkach cross-platform ale boisz si\u0119 zapyta\u0107.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itcraftapps.com\/pl\/blog\/flutter-vs-react-native-porownanie-frameworkow-cross-platform\/\" \/>\n<meta property=\"og:site_name\" content=\"Aplikacje mobilne i webowe dla firm | itCraft\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-18T06:53:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-13T09:20:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/10\/itcraft_header_flutter_vs_react_PL.png\" \/>\n\t<meta property=\"og:image:width\" content=\"831\" \/>\n\t<meta property=\"og:image:height\" content=\"401\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"itcseo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flutter vs React Native - por\u00f3wnanie framework\u00f3w cross-platform - itCraft","description":"React Natvie vs Flutter - Wszystko co powiniene\u015b wiedzie\u0107 o frameworkach cross-platform ale boisz si\u0119 zapyta\u0107.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itcraftapps.com\/pl\/blog\/flutter-vs-react-native-porownanie-frameworkow-cross-platform\/","og_locale":"pl_PL","og_type":"article","og_title":"Flutter vs React Native - por\u00f3wnanie framework\u00f3w cross-platform - itCraft","og_description":"React Natvie vs Flutter - Wszystko co powiniene\u015b wiedzie\u0107 o frameworkach cross-platform ale boisz si\u0119 zapyta\u0107.","og_url":"https:\/\/itcraftapps.com\/pl\/blog\/flutter-vs-react-native-porownanie-frameworkow-cross-platform\/","og_site_name":"Aplikacje mobilne i webowe dla firm | itCraft","article_published_time":"2019-10-18T06:53:44+00:00","article_modified_time":"2024-03-13T09:20:25+00:00","og_image":[{"width":831,"height":401,"url":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/10\/itcraft_header_flutter_vs_react_PL.png","type":"image\/png"}],"author":"itcseo","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/itcraftapps.com\/pl\/blog\/flutter-vs-react-native-porownanie-frameworkow-cross-platform\/","url":"https:\/\/itcraftapps.com\/pl\/blog\/flutter-vs-react-native-porownanie-frameworkow-cross-platform\/","name":"Flutter vs React Native - por\u00f3wnanie framework\u00f3w cross-platform - itCraft","isPartOf":{"@id":"https:\/\/itcraftapps.com\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itcraftapps.com\/pl\/blog\/flutter-vs-react-native-porownanie-frameworkow-cross-platform\/#primaryimage"},"image":{"@id":"https:\/\/itcraftapps.com\/pl\/blog\/flutter-vs-react-native-porownanie-frameworkow-cross-platform\/#primaryimage"},"thumbnailUrl":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/10\/itcraft_header_flutter_vs_react_PL.png","datePublished":"2019-10-18T06:53:44+00:00","dateModified":"2024-03-13T09:20:25+00:00","author":{"@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/d2fc85f8fb53798d0b727d373f9e39b7"},"description":"React Natvie vs Flutter - Wszystko co powiniene\u015b wiedzie\u0107 o frameworkach cross-platform ale boisz si\u0119 zapyta\u0107.","breadcrumb":{"@id":"https:\/\/itcraftapps.com\/pl\/blog\/flutter-vs-react-native-porownanie-frameworkow-cross-platform\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itcraftapps.com\/pl\/blog\/flutter-vs-react-native-porownanie-frameworkow-cross-platform\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/itcraftapps.com\/pl\/blog\/flutter-vs-react-native-porownanie-frameworkow-cross-platform\/#primaryimage","url":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/10\/itcraft_header_flutter_vs_react_PL.png","contentUrl":"https:\/\/itcraftapps.com\/pl\/wp-content\/uploads\/sites\/5\/2019\/10\/itcraft_header_flutter_vs_react_PL.png","width":831,"height":401,"caption":"Flutter vs React Native - por\u00f3wnanie framework\u00f3w cross-platform"},{"@type":"BreadcrumbList","@id":"https:\/\/itcraftapps.com\/pl\/blog\/flutter-vs-react-native-porownanie-frameworkow-cross-platform\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/itcraftapps.com\/pl\/"},{"@type":"ListItem","position":2,"name":"Flutter vs React Native – por\u00f3wnanie framework\u00f3w cross-platform"}]},{"@type":"WebSite","@id":"https:\/\/itcraftapps.com\/pl\/#website","url":"https:\/\/itcraftapps.com\/pl\/","name":"Aplikacje mobilne i webowe dla firm | itCraft","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itcraftapps.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Person","@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/d2fc85f8fb53798d0b727d373f9e39b7","name":"itcseo","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/itcraftapps.com\/pl\/#\/schema\/person\/image\/","url":"https:\/\/itcraftapps.com\/pl\/wp-content\/litespeed\/avatar\/5\/8d5121d60f83294679f3ed7498971492.jpg?ver=1775758459","contentUrl":"https:\/\/itcraftapps.com\/pl\/wp-content\/litespeed\/avatar\/5\/8d5121d60f83294679f3ed7498971492.jpg?ver=1775758459","caption":"itcseo"},"url":"https:\/\/itcraftapps.com\/pl\/blog\/author\/itcseo\/"}]}},"_links":{"self":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts\/3659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/comments?post=3659"}],"version-history":[{"count":0,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/posts\/3659\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/media\/10378"}],"wp:attachment":[{"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/media?parent=3659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/categories?post=3659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itcraftapps.com\/pl\/wp-json\/wp\/v2\/tags?post=3659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}