Flutter vs. React Native. Rzetelne porównanie

Stając przed wyborem technologii cross-platformowej dla nowo powstającej aplikacji mobilnej, najczęstszym dylematem jest wybór pomiędzy Flutter a React Native. Obie technologie są open-sourcowe, rozwijane przez dwóch technologicznych gigantów, posiadają duże społeczności programistów i oferują to samo rozwiązanie: tworzenie kodu, który działa jednocześnie na urządzenia z systemem Android oraz iOS, eliminując konieczność  pisania oddzielnych kodów dla każdej z platform. Jeśli czytasz ten artykuł najprawdopodobniej zadajesz sobie następujące pytania dotyczące wyboru pomiędzy Flutter vs. React Native:

1. Czy aplikacja będzie działać na obu platformach (iOS, Android)?

2. Czy aplikacja będzie działać sprawnie?

3. Czy aplikacja będzie działać przez długi czas i nie narazi mnie na niepotrzebne koszty w przyszłości?

4. Potrzebuję aplikacji zarówno mobilnej, jak i webowej. Czy  będzie to miało wpływ na wybór technologii?

5. Która technologia pozwala na szybsze tworzenie aplikacji?

6. Czy w razie problemów, szybko znajdę developerów, którzy mi pomogą? 

W artykule przyjrzymy się różnicom pomiędzy Flutterem, a  React Native starając sie odpowiedzieć na powyższe pytania.

Krótkie wprowadzenie do Fluttera oraz React Native

Obecnie obie technologie uważa się za równoważne i w większości przypadków można będzie polecić zarówno Flutter jak i React Native. Jednak, jak zwykle, diabeł tkwi w szczegółach, dlatego  przyjrzyjmy się im dokładniej, aby dokonać świadomego wyboru.

React Native to framework stworzony i rozwijany przez Facebook. Oficjalnie pojawił się w 2015 roku. Jest on pisany w języku Javascript i bazuje na React.js. Od lat jest jedną z ważniejszych technologii mobilnych. 

Flutter, nieco młodszy konkurent, zadebiutował oficjalnie w 2017 roku. Został stworzony z ramienia Google i od początku jest prężnie rozwijany, dzięki czemu szybko nadrobił dwa lata prewagi React Native. Według serwisu statista.com Flutter wyprzedził React Native pod względem popularności, już w 2021 roku. Jest pisany w języku Dart. 

Obecnie Flutter to najczęstszy wybór programistów wśród wszystkich technologii mobilnych.

Najważniejsze różnice między Flutter vs. React Native

Gdybyśmy mieli wskazać różnice w obu technologiach, możemy posłużyć się pewnym uproszczeniem:

Flutter to zestaw dobrze dopasowanych do siebie i świetnie udokumentowanych narzędzi do tworzenia aplikacji o ogromnych możliwościach. Jest pisany w języku Dart i bezpośrednio kompiluje się do kodu natywnego dla systemów iOS i Android. Tworzy interfejs użytkownika jednocześnie dla obu platform. Podstawowymi blokami do budowania aplikacji we Flutterze są widgety („window gadget”). Warto wspomnieć, że są one całkowicie tworzone przez silnik Fluttera.

React Native jest swoistym patchworkiem rozwiązań i bibliotek, które nie są z góry narzucone. W tym wypadku developer ma więcej możliwości decyzyjnych, a do rozwiązań programistycznych może podejść bardzo elastycznie. Developerzy frontendowi, którzy dobrze znają ekosystem React.js, nie będą mieć problemu z odszukaniem odpowiedniej biblioteki. React Native jest pisany w popularnym języku Javascript i łączy się z językami natywnymi dla iOS i Android za pośrednictwem mostu  js-bridge i dopiero wtedy tworzy interfejs użytkownika. 

1. Czy aplikacja będzie działać na obu platformach (iOS, Android)?

Każda technologia mobilna ma swoje ograniczenia, jednak jeśli wiemy, że dana funkcjonalność działa na iOS i Android, możemy z dużą dozą prawdopodobieństwa uznać, że developerzy Flutter oraz React Native również sobie poradzą z jej zaimplementowaniem. Obie cross-platformowe platformy korzystają czasami z różnych rozwiązań, a więc implementacja niektórych funkcji znacząco się różni.

W przypadku Fluttera, mamy dużo większe pole do popisu jeśli chodzi o niestandardowy wygląd interfejsu lub animacje. Natomiast w React Native, który opiera się na natywnych elementach, tworzenie skomplikowanego interfejsu lub animacji będzie wymagało większego nakładu prac programisty.

Zdarza się również, że developer musi zakodować daną funkcjonalność po stronie natywnej (skorzystać z rozwiązań oddzielnych dla iOS lub Android, zamiast pisać kod w Dart lub Javascript) lub znaleźć odpowiednią bibliotekę, która to umożliwi. Dodatkowo, do kodu pisanego we Flutter lub React Native, można w każdej chwili włączyć kod natywny, by następnie powrócić do kodu pisanego w technologiach cross-platformowych. 

 2. Czy aplikacja będzie działać sprawnie?

Zarówno React Native, jak i Flutter mają bardzo dobrą wydajność, która niemal dorównuje natywnym rozwiązaniom. Jednak React Native może być nieco mniej wydajny ze względu na wspomniany wcześniej most js-bridge, który spowalnia działanie aplikacji. Flutter nie korzysta z natywnych komponentów, lecz tworzy całkowicie własne, co pozwala mu działać szybciej niż React Native.

Rozmiar aplikacji również będzie stosunkowo większy w przypadku React Native niż Flutter. Jeśli planujesz stworzyć aplikację mobilną o rozbudowanych funkcjonalnościach, Flutter może okazać się lepszą opcją pod względem wydajności. Przykładem aplikacji we Flutter o dużym ruchu może być stworzona przez nas aplikacja Radio Nowy Świat.

3. Czy aplikacja będzie działać przez długi czas i nie narazi mnie na niepotrzebne koszty w przyszłości?

Ponieważ obie technologie są stosunkowo młode, nie powinniśmy się obawiać o to, że w niedalekiej przyszłości przestaną być wspierane, co zmusiłoby do przepisania kodu od nowa.  Flutter i React Native nie zejdą tak szybko ze sceny. Co roku wdrażane są nowe funkcjonalności obu frameworków. Wybierając którykolwiek z nich, możesz spać spokojnie. Pamiętaj jednak, że niezależnie od wybranej technologii, aplikacja będzie wymagała stałej opieki utrzymaniowej, w celu aktualizacji paczek. 

4. Która technologia pozwala na szybsze tworzenie aplikacji?

Powiedzmy sobie szczerze – tutaj zdania są mocno podzielone, ponieważ wszystko zależy od tego, jak rozbudowana ma być aplikacja, jakie funkcjonalności ma oferować oraz na jakie wyzwania natrafisz podczas procesu  developmentu. React Native ma dużo skromniejszą dokumentację niż Flutter, dlatego natrafiając na nietypowy problem, developer często jest zmuszony do poświęcenia większej ilości czasu, aby znaleźć rozwiązanie. 

W przypadku potrzeby stworzenia nie tylko aplikacji mobilnej ale również webowej, dużym plusem Fluttera jest to, że potrafi on stworzyć aplikację dla iOS i Android oraz dla platformy web z poziomu jednego kodu (3 w 1). W przypadku React Native, pisanego w JavaScript, część kodu odpowiadającego za logikę aplikacji można współdzielić zarówno dla platformy web, jak i mobile. Jednak nie jest to całość kodu.

5. Czy w razie problemów, szybko znajdę developerów, którzy mi pomogą?

Flutter i React Native nie są niszowymi technologiami, więc jeśli zajdzie potrzeba włączenia w prace kolejnych developerów, na pewno znajdziesz ich stosunkowo szybko.

React Native to framework, który bazuje na języku Javascript, co automatycznie oznacza, że developerzy frontendu mają możliwość bardzo szybkiego nauczenia się wersji cross-platformowej tego języka. Wydaje się więc, że developerów React Native powinno być dużo więcej niż Flutter, jednak niekoniecznie tak jest.

 Nauka React Native jest łatwiejsza dla programistów, którzy mają już opanowany język Javascript, jednak dla tych, którzy dopiero zaczynają, Flutter może okazać się bardziej przystępną opcją. Być może właśnie dlatego, niegdyś mało używany język Dart, w zawrotnym tempie zyskał tak ogromną liczbę zwolenników. 

Podsumowanie

Technologie Flutter oraz React Native są obecnie głównymi rozwiązaniami cross-platformowymi i mimo różnic, obie są godne polecenia. Flutter będzie lepszym rozwiązaniem, jeśli w aplikacji istotna będzie wydajność, a także płynne animacje i przewijanie, ponadto mamy możliwość stworzyć w nim również aplikacje webowe. React Native ma z kolei bardzo dużą społeczność programistów, a developerzy frontendowi mogą stosunkowo szybko opanować ten framework. Warto  więc trzymać rękę na pulsie i śledzić trendy w rozwoju obu technologii. Znając charakterystykę aplikacji, jej funkcjonalności oraz oczekiwany kierunek dalszego rozwoju, Twój partner technologiczny będzie w stanie doradzić najlepsze rozwiązanie technologiczne dla Twojego projektu.

Pojęcia, które musisz znać

technologia natywna – technologia, która wykorzystuje ten sam język, co oprogramowanie danego urządzenia, tzn. urządzenia z systemem operacyjnym Android korzystają z technologii pisanych w języku Kotlin, a urządzenia z system iOS (urządzenia firmy Apple) korzystają z technologii pisanych w języku Swift.

technologia cross-platformowa – technologia, która jednocześnie działa na urządzeniach z różnymi systemami operacyjnymi, np. Android oraz iOS, zazwyczaj poprzez komplikację do języków tych systemów.

framework – zestaw narzędzi, bibliotek kodu, interfejsów API i innych zasobów, których developerzy mogą używać do tworzenia aplikacji. Frameworki zapewniają strukturę, wsparcie i wskazówki pomagające programistom w tworzeniu solidnych, łatwych w utrzymaniu aplikacji. Popularne frameworki to np. Flutter, React.js, .NET.

dokumentacja – opis możliwych zastosowań i istniejących bibliotek danego frameworka. Zwykle zawiera tutoriale, wskazówki, przykłady kodu i szczegółowe opisy komponentów platformy oraz sposób ich wspólnego działania. 

biblioteka – zbiór wstępnie napisanego kodu, którego można użyć do dodania  funkcjonalności do aplikacji. Biblioteki można łatwo udostępniać i ponownie wykorzystywać 

Dart – język, który wykorzystuje cross-platformowa technologia Flutter

React.js – framework oparty na języku javascript. Jest on bazą dla technologii cross-platformowej React Native.

funkcje natywne – funkcje, które są dostarczane w środowisku oprogramowania danego sprzętu i dedykowane dla niego, np. funkcje lokacyjne (GPS), dostęp do kamery, dostęp do listy kontaktów, odtwarzacz audio/video, notyfikacje push, bluetooth.

wersja stabilna – wersja danego języka lub frameworka uznana za wolną od błędów, której nowe funkcje są dobrze przetestowane

most js-bridge – łącznik pomiędzy kodem pisanym w React Native, a językami natywnymi

release – to wersja oprogramowania, która jest udostępniana publicznie. Zwykle zawiera kombinację nowych funkcji, poprawek błędów, ulepszeń wydajności i innych aktualizacji.