Hybrydowe aplikacje mobilne w 2018. React Native vs Xamarin

Jeśli dopiero rozpoczynasz swoją przygodę z hybrydowymi aplikacjami mobilnymi, możesz czuć się trochę zagubiony. Znalezione w internecie definicje nie zawsze są jednoznaczne, a w poradnikach często brakuje najnowszych informacji. Dlatego też w tym artykule postaramy się odpowiedzieć na pytanie, czym tak właściwie są wieloplatformowe aplikacje mobilne oraz jakie rozwiązania warto wziąć pod uwagę w środku 2018 roku.

Kamil Płaczek. Full-Stack JS Developer w The Software House. Prawdziwy mistrz JavaScript mogący pochwalić się latami doświadczenia zawodowego. Interesuje się uniwersalnym JS i tworzeniem aplikacji wieloplatformowych. Ostatnio skupiony głównie na React i React Native.

Tomek Mróz. New Business Manager w The Software House. Mając 15 lat doświadczenia w IT i sprzedaży, Tomek jest prawdziwym specem jeśli chodzi o dostarczanie software developmentu dla biznesu. Od niedawna dumny tata dwójki dzieci, może też jednak pochwalić się przeszłością godną gwiazdy rocka – na pewno chętnie opowie ci o tym, jak przez szereg lat śpiewał w zespole.

Tak więc zdecydowałeś, że stworzysz aplikację mobilną. Zrobiłeś rozeznanie i napisałeś do wielu firm, które specjalizują się w tworzeniu aplikacji natywnych. W rezultacie dostałeś masę kosztorysów z losowymi numerkami.

Nie byłeś zbyt zachwycony rezultatem, więc przerzuciłeś się na alternatywne rozwiązania. Niestety, mija kilka tygodni, przeszukałeś cały internet, a wcale nie czujesz się mądrzejszy. Już nie do końca ogarniasz czym jest „hybryda” „aplikacje cross-platformowe” itd. Wszystkie artykuły obiecywały, że rozwieją twoje wątpliwości, a skończyło się na sprzecznych teoriach. Sytuacja się pogarsza, a ty kręcisz się w kółko.

Żeby nauczyć się podstaw tworzenia hybrydowych aplikacji mobilnych, trzeba zacząć od samego początku.

Zobacz też

Mobile Prosta implementacja MVVM w aplikacji na Androida

Definicje

Aplikacja cross-platformowa (wieloplatformowa)

Oprogramowanie cross-platformowe z definicji działa na wielu platformach. Może to być pojedyncza baza kodu działająca na różnych systemach operacyjnych, bez specjalnego przygotowania (jak Java). Może to być również ta sama aplikacja – z tą samą logiką biznesową, brandingiem itp. – ale napisana jako dwie oddzielne aplikacje natywne, jedna na iOS i jedna na Androida. Ogólnie rzecz biorąc, „cross-platformowy” to bardzo niejednoznaczne pojęcie.

Hybryda

Hybrydowe aplikacje mobilne (albo po prostu „hybrydy”) są podkategorią oprogramowania cross-platformowego i nie mają jasnej definicji.

Tradycyjne hybrydy to aplikacje internetowe w natywnym opakowaniu.

Programiści tworzą aplikację typu single-page (SPA), która jest przyjazna dla urządzeń mobilnych. Następnie “pakują” ją do wyżej wspomnianego natywnego opakowania. Strona ta wykorzystuje sprzętowe możliwości urządzenia, takie jak kamera czy GPS. W ten sposób powstaje aplikacja internetowa udająca mobilną. Ten sam kod uruchamiany jest na różnych platformach. Natywne opakowanie jest najczęściej częścią wybranego frameworka (jak Apache Cordova, Ionic czy inne).

“Współczesne hybrydy” to zupełnie inna bajka. Nie są to aplikacje internetowe, ale prawdziwe aplikacje mobilne – napisane w JavaScriptcie i przełożone na zestaw natywnych instrukcji. Brzmi nieźle, prawda?

Języki i frameworki

Oto niektóre z dostępnych narzędzi do tworzenia aplikacji wieloplatformowych:

• Xamarin jest zestawem narzędzi (frameworkiem), z wykorzystaniem których możliwe jest tworzenie wieloplatformowych aplikacji mobilnych przy użyciu C# i .NET,
• React Native to framework, w którym programiści budują produkty używając JavaScript i React,
• NativeScript to framework umożliwiający tworzenie aplikacji mobilnych z wykorzystaniem JS i Angular,
• Cordova/PhoneGap/Ionic to frameworki, w których programiści używają HTMLa, CSSa i JS do tworzenia aplikacji mobilnych.

Co jest na rynku

Z biznesowego punktu widzenia, oprogramowanie musi działać, być przyjazne dla użytkownika i długo pozostać w użyciu. Technologia schodzi na dalszy plan, ale niektóre wybory w tej kwestii mają biznesowe konsekwencje. Poniżej znajdziesz kilka przykładów najważniejszych decyzji, które musisz podjąć, jeśli chcesz tworzyć wieloplatformowe aplikacje mobilne.

Strony internetowe i aplikacje progresywne (PWA)

Dzisiejsze strony internetowe to już nie tylko statyczny kontent z masą linków i formularzy. Współczesne aplikacje internetowe rywalizują z oprogramowaniem desktopowym i mobilnym w obszarach UX i funkcjonalności. Pomimo tego, nie wszystko działa tak samo na telefonie komórkowym. Kiedy w grę wchodzi praca w tle, Bluetooth, informacje o baterii lub iOS FaceID, aplikacje in się nie sprawdzą.

Aplikacja progresywna (PWA) to nowe pojęcie, które w pewnym stopniu łączy podejście do tworzenia aplikacji internetowych i natywnych. Jest to aplikacja internetowa, która może działać w trybie offline (do pewnego stopnia) i której ikona jest widoczna na ekranie głównym urządzenia. Jej ograniczenia pozostają jednak takie same. To jak zachowa się aplikacja i co będzie można w niej zrobić, zależy w dużym stopniu od platformy. Pomysł na pewno jest ciekawy i ma duży potencjał, ale trochę czasu jeszcze minie, zanim technologia w pełni dojrzeje (iOS dopiero niedawno zaczął wspierać PWA, w wersji 11.3).

Pamiętaj, że PWA to nic innego jak strona internetowa z aktywnymi powiadomieniami udająca aplikację mobilną.

Tradycyjne (internetowe) hybrydy

Przez lata tradycyjne hybrydy były najpopularniejszym rozwiązaniem dla każdego, kto chciał zbudować szybki MVP albo bardzo prosty produkt. Jeśli chodzi o narzędzia, to jest w czym wybierać: najpopularniejszy Apache Cordova, jego kuzyn PhoneGap, oparty na Angularze Ionic i wiele innych. Zalety tej metody to: jedna baza kodu oraz tańsze koszty developmentu i utrzymania aplikacji. Dodatkowo, możliwe jest łatwe i szybkie stworzenie wersji internetowej produktu. Wady są już mniej oczywiste i nie każdy powie ci o nich wprost.

Niestety, prawda jest taka, że tradycyjne hybrydowe aplikacje mobilne nigdy nie dorównają aplikacjom natywnym, niezależnie od tego, co twierdzą ich twórcy.

Przygotuj się na gorszą wydajność, kiepski UX i wąski wachlarz gotowych do zaimplementowania funkcji. Milion drobnych rzeczy będzie działać wolniej lub nie tak, jak powinny. Nawet jeśli nie będziesz w stanie stwierdzić, co dokładnie jest nie tak, aplikacja zawsze będzie ci się wydawać „jakaś dziwna”.

Na szczęście czas świetności tradycyjnych hybryd już minął, a ostatnie lata przyniosły nam dużo lepsze rozwiązania (przynajmniej według nas).

Oferty pracy z

Xamarin

Xamarin pozwala na tworzenie natywnych aplikacji na wiele platform. Dzięki niemu, programiści C# i .NET mogą budować natywne aplikacje na Androida, iOS i Windowsa. W Xamarinie można to zrobić na 2 sposoby. Pierwszy z nich to Xamarin Forms, który tworzy jedną bazę kodu dzieloną przez wszystkie platformy, prawie bez zmian. Ale jest pewien haczyk: Xamarin.Forms nadaje się do tworzenia prostych MVP, szybkiego prototypowania oraz mega prostych aplikacji. Nawet w dokumentacji Xamarina znajdziesz informację:

Xamarin.Forms pozwala na szybkie prototypowanie aplikacji, które z czasem mogą urosnąć do złożonych aplikacji.

Tak więc używanie Xamarin.Forms w bardziej wymagających projektach może być trudne.

Jeśli chcesz stworzyć złożoną hybrydową aplikację mobilną, możesz to zrobić przy pomocy Xamarina Native. Uzyskasz wygląd i wrażenie aplikacji natywnej, a do tego będziesz pracować używając tylko jednej technologii (C# i .NET). Co oznacza tylko jeden zespół programistów do opłacenia. Minusy? Nie ma już pojedynczej bazy kodu, więc musisz rozpocząć i utrzymać oddzielne projekty – jeden dla każdej platformy. Tylko część bazy kodu może być dzielona (jak logika biznesowa lub komunikacja z API). Implementacje UI muszą pozostać osobne.

Jeśli zatrudniasz programistów .NET, Xamarin Native będzie wspaniałym narzędziem, które pozwoli ci przydzielić dostępne zasoby do developmentu mobilnego. Będzie również działać na Windowsie i ogólnie dobrze się spisywać, co przełoży się na poziom zadowolenia użytkowników. Jaki jest więc koszt? Czas. Aplikacje mobilne zrobione za pomocą Xamarina Native będą bardziej czasochłonne w produkcji w porównaniu do hybryd tradycyjnych.

React Native

Facebook stworzył React Native (RN) dla programistów JavaScript (JS). RN pozwala budować aplikacje mobilne na iOS i Androida w React (bibliotece JS do tworzenia interfejsów użytkownika). To była mądra decyzja – React jest bardzo popularny i przeszedł już chrzest bojowy.

Być może brzmi to jak opis tradycyjnej hybrydy, ale JS jest tu jedynym wspólnym elementem. W RN nie tworzy się stron internetowych w natywnym opakowaniu. Buduje się aplikacje natywne z wykorzystaniem JavaScript (technicznie jest to React i język podobny do HTML). RN przekłada kod na instrukcje dla urządzenia, zarówno na iOS jak i na Androida. W efekcie możesz „mówić” w języku React/JavaScript, a RN przekłada wszystko w czasie rzeczywistym. W ten sposób urządzenia mobilne mogą łatwo wyświetlać np. Androidowe przyciski. Mówimy tutaj o nowoczesnej hybrydzie – jeden kod dla wszystkich systemów operacyjnych.

To z kolei przekłada się na większe zadowolenie użytkownika i wrażenie aplikacji natywnej. Hybrydowe aplikacje mobilne zrobione w RN działają płynniej od hybryd HTMLowych i użytkownik często nie potrafi dostrzec różnicy.

Minusy? Niektóre funkcjonalności specyficzne dla platform mogą być trudne w implementacji. Nie wszystkie rzeczy osiągalne w aplikacjach natywnych będą dostępne od ręki w RN. Z drugiej strony, programista zawsze może dodać natywny fragment kodu dla brakujących funkcjonalności lub skorzystać z tysięcy rozszerzeń przygotowanych już przez społeczność RN. Nawet grube ryby jak Microsoft czy Wix używają RN, co na pewno ma wpływ na imponującą wielkość społeczności.

To prawda, że hybrydowe aplikacje mobilne zrobione w RN w pewnych aspektach nie mogą konkurować z natywnymi. Pomimo tego, efekt końcowy jest zwykle bardzo satysfakcjonujący. Framework RN zdecydowanie przewyższa tradycyjne hybrydy, zarówno jeśli chodzi o zadowolenie użytkownika jak i ogólne działanie. Według nas w The Software House, jest godny uwagi.

Zobacz też

Mobile Android będzie płatny dla producentów smartfonów. To strzał w stopę?

NativeScript

NativeScript to framework do tworzenia wieloplatformowych aplikacji mobilnych, podobny do RN, ale oparty na Angularze (kolejnym frameworku JS). Radzi sobie z problemem tak jak RN – używając natywnych komponentów i klas, które bazują na twoim kodzie JavaScript. Framework posiada masę gotowych do użycia komponentów na różne platformy i w razie potrzeby możesz go rozszerzyć, dokładnie tak jak RN.

Jeśli zatrudniasz programistów JS, którzy znają Angulara, NativeScript to definitywnie coś, co powinieneś rozważyć. Pamiętaj tylko, że na dzień dzisiejszy framework posiada dużo mniejszą społeczność niż RN. A to oznacza mniej gotowych do użycia pluginów i bibliotek.

Xamarin vs React Native

W sierpniu 2018 Xamarin i React Native wydają się przodować, jeśli chodzi o narzędzia do tworzenia wieloplatformowych aplikacji mobilnych. Przynajmniej tak myślimy my. Porównajmy teraz oba frameworki.

Porównanie wyszukiwań internetowych fraz React Native i Xamarin z ostatnich 30 miesięcy. Jak widać, React Native wyszedł na prowadzenie jakiś rok temu (źródło: Google Trends).

Baza kodu

RN korzysta z jednej bazy kodu, współdzielonej przez wszystkie platformy. W rezultacie rzadko potrzebujemy kodu, który jest dedykowany dla jakiejś jednej platformy. Tworzy to pewne ograniczenia, ale z drugiej strony znacznie zmniejsza czas i koszty developmentu. Programiści Xamarina chcieli uzyskać bardziej “natywny” efekt i zdecydowali się współdzielić tylko część kodu. UI buduje się oddzielnie dla każdej platformy. Dzięki temu UI Xamarina wygląda i zachowuje się bardziej jak natywne, ale niestety skutkuje to też dłuższym czasem developmentu.

Wspierane platformy

Jak na razie, RN wspiera iOS i Androida, obsługując powyżej 90% urządzeń mobilnych na świecie. Xamarin wspiera iOS i Androida, jak również Universal Windows Platform i macOS. Jeśli te platformy są kluczowe dla twojego biznesu, powinieneś wybrać Xamarina.

Potrzebne zasoby

Do RN najprawdopodobniej będziesz potrzebować programistów frontendowych, którzy znają Reacta, ale właściwie każdy programista JavaScript powinien dobrze sobie poradzić. Do pisania hybrydowych aplikacji mobilnych w Xamarinie, prawdopodobnie będą ci potrzebni doświadczeni programiści .NET.

Aktualizacje i naprawa błędów

RN uruchamia kod JS w czasie pracy aplikacji. To znaczy, że możesz ulepszać swoją aplikację i wprowadzać poprawki bez aktualizacji aplikacji w sklepie – niektórzy użytkownicy pewnie nawet nie zauważą, że coś się aktualizuje. Xamarin natomiast prekompiluje kod dla każdej platformy w trakcie budowania, a tym samym nie pozwala na dynamiczne aktualizacje. Jeśli trzeba wprowadzić poprawki, za każdym razem musisz aktualizować aplikację w sklepie.

Przypadki użycia

RN nadaje się do:

• Aplikacji, które nie wymagają wielu funkcjonalności i komponentów charakterystycznych dla konkretnej platformy lub aplikacji, które nie są zbyt złożone i nie wymagają natywnego UI,
• Przepisania twojej starej tradycyjnej hybrydy,
• Aplikacji z customowym designem, ale z częściowo zachowanym ‘natywnym UX’.

Xamarin będzie idealny, kiedy:

• Ty lub twoja zaprzyjaźniona firma posiada zespół programistów .NET,
• Potrzebujesz dostępu do złożonych funkcjonalności charakterystycznych dla konkretnej platformy,
• Musisz użyć natywnych komponentów dla każdej platformy, sprawiając, że UI będzie wyglądać dokładnie tak, jak UI tradycyjnej aplikacji natywnej,
• Skupiasz się na platformie Windows.

Podsumowanie

Gdy w grę wchodzi tworzenie hybrydowych aplikacji mobilnych, każdy chwali własną technologię. Musisz o tym pamiętać. Poza tym, kiedy szukasz nowych informacji, postaraj się zawsze patrzeć na datę publikacji – w mobilnym świecie kilka miesięcy to praktycznie stulecie, więc dwuletni artykuł może nieźle namieszać.

Na rynku dużo jest cross-platformowych technologii, ale istnieje tylko kilka naprawdę rozwiniętych i mogących się utrzymać. Tradycyjne hybrydy odpadają – czas ich świetności już minął. W przeciwieństwie do nich, Xamarin i React Native oferują potężny arsenał do budowania hybrydowych aplikacji mobilnych. W The Software House używamy React Native, bo mamy silny zespół Reactowy. Ostatecznie, wybór zależy od twoich preferowanych zasobów i biznesowego celu aplikacji. Pamiętaj o tych kilku podstawowych rzeczach, które przedstawiliśmy powyżej, a na pewno nie będziesz mieć problemu ze znalezieniem zespołu programistów do twojej cross-platformowej aplikacji.

Artykuł został pierwotnie opublikowany na tsh.io. Zdjęcie główne artykułu pochodzi z pexels.com.