Cross Platform10 min czytania27.09.2019

11 aplikacji mobilnych w React Native stworzonych przez światowe marki

Paulina Chmielewska

Head of Marketing

Jednym z najpopularniejszych tematów 2018/2019 w świecie usług tworzenia aplikacji mobilnych jest wieloplatformowość: React Native, Flutter i inne, zarówno ugruntowane, jak i rozwijające się technologie, przyciągają coraz większą uwagę ze wszystkich stron…

Spis treści

Oferujemy React Native w ramach naszych usług od dłuższego czasu i pracujemy nad dodaniem Fluttera, ale wciąż badamy możliwości zastosowania tych technologii w różnych branżach. Dzisiaj chciałabym przedstawić listę popularnych aplikacji utworzonych za pomocą React Native, aby pokazać jego możliwości dostawcom rozwiązań. Czytaj dalej, aby dowiedzieć się, w jaki sposób niektóre znane na świecie marki wykorzystują technologie wieloplatformowe w swoich rozwiązaniach mobilnych.

# 1 – Menedżer reklam na Facebooku

Miałam pewne obawy, czy powinnam o tym wspomnieć, ponieważ istnieje powszechne błędne przekonanie, że Facebook jest w pełni napisany w React Native. Chociaż Facebook stworzył technologię (wprowadzoną w 2013 r.) W wyniku wewnętrznego projektu Hackathon, w rzeczywistości aplikacja Facebook korzysta z React Native tylko w niektórych częściach, skupiając się głównie na Pulpicie wydarzeń i Rynku.

Menedżer reklam na Facebooku to inna historia. Aplikacja do zarządzania reklamami została w pełni napisana w React Native i była pierwszym projektem Facebooka, który został w pełni opracowany w tych ramach. Wybór wydawał się słuszny, ponieważ technologia idealnie pasuje, jeśli chodzi o obsługę różnych formatów reklam, stref czasowych, konwersji walut i formatów dat. Pozwoliło to również na stworzenie intuicyjnego interfejsu użytkownika z prostą nawigacją, świetnymi animacjami i przejściami ekranu. Ludzie polecają tę aplikację ze względu na jej szybkość i łatwość użytkowania.

# 2 – AirBnB

Jest to jedna z najpopularniejszych aplikacji wbudowanych w React Native. AirBnB nieustannie bada i ocenia nowe technologie, aby zapewnić najlepszą obsługę. Wybór React Native opierał się na celach, które wyznaczyli – działając szybciej jako organizacja, utrzymując jakość na poziomie natywnym, jednocześnie poprawiając doświadczenie programistów i pisząc jedną bazę kodów dla swoich produktów zamiast dwóch. W 2016 r. Wieloplatformowa platforma Facebooka zaznaczyła wszystkie pola.

Ich eksperyment z React Native przyniósł owoce w postaci szeregu kluczowych produktów wprowadzonych w ramach. Mimo że React Native osiągnął założone cele, stało się to poważnym wysiłkiem pod względem integracji z istniejącą infrastrukturą natywną i umożliwienia złożonych funkcji natywnych.

Po prawie dwóch latach korzystania z React Native AirBnB podało, że framework jest niesamowitym narzędziem, ale jednocześnie stanowi wyzwanie techniczne i organizacyjne.

W 2018 r. Firma nagle ogłosiła decyzję o wycofaniu React Native do 2019 r. I powrocie do programowania aplikacji mobilnych.

Ponieważ ich rozległa platforma wymagała dużej liczby złożonych natywnych komponentów i funkcji, przejście na natywne struktury było logicznym wyborem. AirBnB doszedł do wniosku, że React Native może być świetnym wyborem dla wielu różnych aplikacji i, w sumie, naprawdę spodobał im się ten framework, ale po prostu nie pasował do ich strategii rozwoju.

# 3 – Discord

Discord to jedna z najpopularniejszych usług komunikacji głosowej i czatu w społeczności graczy. Największy konkurent TeamSpeak skorzystał z React Native i teraz twierdzi, że pomógł im z powodzeniem zwiększyć liczbę użytkowników systemu iOS od zera do milionów na całym świecie. Discord szczyci się tym, że przyjął tę platformę już w dniu jej wdrożenia na iOS i Androida.

Wartości niezgody React Native ze względu na swoją zdolność do utrzymywania małych i wydajnych zespołów programistycznych. Firma podsumowuje React Native w ten sposób: „W Discord przyniosła nam niesamowitą wydajność. Pozwala nam pisać kod wielokrotnego użytku, uczyć się od siebie nawzajem i szybko poruszać się w dwuosobowym zespole. Chociaż istnieją prawdziwe problemy i wyzwania, ogólnie rzecz biorąc zyski znacznie przewyższają koszty, które motywują nas do dalszego inwestowania w platformę ”.

# 4 – SoundCloud

SoundCloud Pulse zastosował nową technologię w swojej aplikacji w sposób stały i rozsądny. Zaczęli myśleć o React Native 5 miesięcy po wydaniu frameworka. Mieli już duże doświadczenie w tworzeniu aplikacji natywnych, co pomogło w przyjęciu React Native tak płynnie, jak to możliwe. Zainicjowali pracę nad stworzeniem prototypu i zaczęli zapoznawać się z nową strukturą.

„Rozpoczęliśmy pracę nad aplikacją z dwoma inżynierami JavaScript i jednym inżynierem iOS. Nie było jeszcze projektów dla aplikacji na iOS, ale wiedzieliśmy, że musimy osiągnąć parytet funkcji w aplikacji na Androida, dlatego użyliśmy aplikacji na Androida jako projektu wersja iOS ”. – Jan Monischke i Peter Minarik mówią w swoim blogu.

Głównym powodem przejścia na React Native był brak rodzimych inżynierów mobilnych, którzy byliby dostępni do opracowywania nowych aplikacji, więc firma musiała zadowolić się tym, co mieli – 2 javascript i 1 iOS, którzy utworzyli nowy, zespół programistów platform. Po rozpoczęciu projektu firma znajdowała coraz więcej powodów, dla których warto pozostać przy React Native. Podsumowanie blogu React Native Soundclouda wyjaśnia to doświadczenie bardziej szczegółowo. Po fazie eksperymentalnej zdecydowali się kontynuować React Native i zaimplementowali platformę w większej liczbie miejsc w SoundCloud.

# 5 – Walmart

Aplikacja Walmart została stworzona, aby umożliwić klientom przeglądanie oferty produktu w sklepie, sprawdzanie cen w sklepie, zamawianie zakupów online lub płacenie za zakupy za pomocą systemu płatności Walmart. Ze względu na dużą złożoność aplikacji i dużą liczbę funkcji Walmart postanowił zbudować rozwiązanie z React Native, aby zmniejszyć wielkość zespołu programistów. Oddzielne zespoły iOS i Android dla projektu tego rozmiaru były, zdaniem Walmart, niewystarczająco wydajne. W ten sposób firma uzasadnia swoją decyzję: „Implementacja natywna jest świetna w teorii, ale praktycznie musimy pomyśleć o wydajności / współużytkowaniu kodu / czasie wprowadzania na rynek, czyli tam, gdzie pojawia się platforma wieloplatformowa, taka jak React Native. „

Obecnie 95% bazy kodu jest współdzielone przez aplikacje na iOS i Androida. Koszty rozwoju zostały zmniejszone dzięki jednemu zespołowi pracującemu na obu platformach. Walmart przeanalizował skuteczność projektu i podsumował go, wskazując zalety i wady struktury React Native. Ich słowa: „Jesteśmy głęboko przekonani, że React Native to fantastyczne środowisko. Zrobił wszystko, czego chcieliśmy od niego, i zrobił to tak wspaniale. Chociaż ma kilka problemów, te problemy są przyćmione przez góry korzyści, które możesz uzyskać Użyj tego.”

# 6 – Pinterest

Pinterest nie od razu wkroczył w trend międzyplatformowy. Przyjęli bardziej ostrożne podejście, obserwując, jak React Native rośnie i rozwija się z czasem. Ostatecznie zdecydowali się na zastosowanie frameworka do projektu aplikacji mobilnej. Po pierwsze, prototypowali funkcję małego zakresu o dużym potencjale uderzenia – widok Selektora tematów. Pinnersi (użytkownicy Pinteresta) widzą ten widok po zarejestrowaniu się jako jeden z najważniejszych ekranów podczas wdrażania.

Udostępnianie kodu między platformami było pozytywnym zaskoczeniem dla zespołu programistów: „Przy użyciu React Native początkowa implementacja w systemie iOS zajęła około 10 dni, w tym przeładowanie wszystkich integracji z naszą istniejącą infrastrukturą. Następnie mogliśmy przenieść ekran na Android w dwa dni ze 100-procentowym współdzielonym kodem interfejsu użytkownika między platformami, co pozwala zaoszczędzić ponad tydzień czasu wdrożenia. ”

Bardzo pozytywne pierwsze wrażenie zachęciło firmę do kontynuacji pracy z React Native. Po dokładnej ocenie zrozumieli, jak korzystanie z frameworka może być korzystne dla ich aplikacji. „Dla nas największą potencjalną korzyścią jest wzrost szybkości programowania. React Native umożliwia nam dzielenie się kodem między platformami. […] Mniej czasu zajmuje standups i spotkania, a także mniej niespójności między platformami.”

W oparciu o potencjalne korzyści Pinterest zdecydował, że React Native będzie dodatkowym narzędziem w zestawie narzędzi inżynierii aplikacji mobilnych obok natywnych techenologies. Pełna konwersja do aplikacji React Native nigdy nie była ich celem końcowym, ale wykorzystali platformę dla większej liczby części aplikacji.

# 7 – Instagram

Wspomniałem wcześniej o Facebooku, ale oprócz głównej aplikacji, siostrzana aplikacja Molocha – Instagram, zawiera także React Native. Praca z architekturą umożliwiającą Instagramowi szybszą wysyłkę funkcji dla aplikacji mobilnych na Androida i iOS. Ponieważ początkowo przedsięwzięcie było dość trudne, postanowili zacząć od małej – zastępując Powiadomienia push pierwotnie zaimplementowane jako WebView wersją wbudowaną React Native. Projektowanie interfejsu użytkownika było dość proste, więc nie wymagało wiele pod względem implementacji.

Okazało się, że program React Native jest znacznie szybszy zarówno dla aplikacji na iOS, jak i na Androida. Właśnie dlatego obecnie 99% postów promujących, 97% SMS Captcha Checkpoint, 85% moderacji komentarzy, 87% reklam generowania wiodących i 92% funkcji ustawień powiadomień push ma ten sam kod na różnych platformach. Firma twierdzi, że zamierzają kontynuować budowę aplikacji za pomocą React Native.

# 8 – Discovery VR

Kto nie zna Discovery Channel? Firma, która za tym stoi, przenosi ją na wyższy poziom, oferując swoim widzom nowe, wciągające doświadczenie swoich produkcji. Zdecydowali się na wirtualną rzeczywistość, aby przybliżyć użytkowników do prawdziwej akcji w odległych i odległych lokalizacjach świata. Nie oglądasz już wideo. Nie możesz wirtualnie przeżyć przygodę: surfowanie, turystyka, jazda na nartach, skoki przez baseny lub nurkowanie. Aplikacja obsługuje także ekskluzywne treści z programów Discovery Channel.

Discovery Channel zbudował doświadczenie użytkownika dzięki React Native. Z zestawem VR możesz poprawić widok 360 stopni i wybrać własną przygodę na leniwe domowe popołudnie.

# 9 – Skype

Użytkownicy Skype narzekają na wygodę korzystania z aplikacji. To było przestarzałe, w niektórych częściach granice przestarzałe, a wydajność stale spadała. Microsoft postanowił całkowicie odnowić aplikację. Firma zbudowała nową aplikację z React Native, odświeżyła projekt i dodała szereg nowych funkcji. Mimo że nowy projekt mocno zapożycza z oryginalnych aplikacji mobilnych na Androida i iOS, User Experience jest nieporównywalnie lepszy.

Zespół programistów Skype wykorzystał React Native nie tylko do aplikacji mobilnej, ale także do aplikacji komputerowej Windows, ponieważ platforma umożliwia tworzenie nie tylko aplikacji iOS, Android, ale także Windows.

# 10 – Adidas Glitch

Ideą Adidas Glitch było wprowadzenie nowego podejścia do promocji produktu. „Para butów, które są dystrybuowane tylko za pośrednictwem aplikacji” to oryginalny pomysł. Zadaniem programistów było napisanie aplikacji, która spersonalizuje doświadczenie związane z zakupem ekskluzywnego produktu – butów piłkarskich Glitch firmy Adidas z wkładką. Projekt graficzny aplikacji był kluczowy, a głównym celem było podkreślenie funkcji skóry / wstawek w butach i pokazanie jej tak blisko rzeczywistych wrażeń, jak to możliwe.

Zespół programistów React Native najpierw współpracował z aplikacją na iOS, a dopiero po wdrożeniu systemu operacyjnego na Androida. Przejścia graficzne okazały się najtrudniejsze z potrzebą użycia OpenGL, aby produkt był prezentowalny i zgodny z projektem. Opracowanie selektora produktów i dostosowywania nie spowodowało problemów, a React Native okazało się właściwym wyborem dla tego projektu.

Najbardziej pozytywnym aspektem korzystania z frameworka było to, że aplikacja na Androida, która została opracowana po iOS, ale używała tej samej bazy kodu, działała bardzo dobrze od samego początku i wymagała bardzo niewielu dostosowań – głównie w zakresie układu i wydajności. Aplikacja na iOS została wydana po ~ 5 miesiącach rozwoju, wersja na Androida została wdrożona w zaledwie 1 miesiąc dzięki udostępnionej bazie kodu.

Aplikacja zdobyła 12 nagród w 2017 r. : Cannes Lions, Campaign Creative Tech Awards, Clio Sports Awards i Masters of Marketing Awards.

# 11 – Bloomberg

Bloomberg wypuścił swoją aplikację w grudniu 2016 r. Po przetestowaniu i prototypowaniu frameworka React Native nowojorski gigant postanowił przeprojektować aplikację konsumencką przy użyciu różnych platform. React Native okazało się najlepszym dostępnym na rynku narzędziem do tworzenia aplikacji natywnych jednocześnie na iOS i Androida. Oto, co firma powiedziała o tym, jak React Native pomógł im przyspieszyć: „… zaletą React Native jest to, że automatyzuje odświeżanie kodu, przyspieszając wprowadzanie nowych funkcji produktu. Zamiast ponownej kompilacji aplikacja ładuje się natychmiast. „

„React Native jest najlepszy na rynku” – powiedział Gabriel Lew, starszy inżynier oprogramowania w Bloomberg, który kierował pracami zespołu programistów, dodając: „Spodziewaj się, że pojawi się w innych aplikacjach mobilnych Bloomberg w przyszłości”.

Podsumowanie 11 najlepszych aplikacji zbudowanych z React Native

Jest wiele, wiele innych, o których nie wspomniałem. Tym razem chciałem skupić się na dużych markach, które zainwestowały w React Native. Niektóre z nich trzymają się tej technologii i widzą pewną prawdę w React Native jako świętym graalu tworzenia aplikacji mobilnych, niektóre używają frameworka w części swoich rozwiązań, a inne szukają różnych rozwiązań – natywnych i wieloplatformowych.

Istnieją zalety i wady rozwoju React Native i uważamy, że może on działać dla Twojego rozwiązania, o ile zaznaczy wszystkie pola w kolumnie „Możliwość zastosowania”. I odwrotnie, istnieje wiele mitów React Native, które krążą od jakiegoś czasu – nie wierz we wszystko, co słyszysz.

Myślę, że chcę cię zostawić, że w rozwoju aplikacji zawsze są opcje. Zawsze możemy wybierać między programowaniem natywnym lub międzyplatformowym – ostateczna decyzja zawsze będzie oparta na tym, co jest szybsze, łatwiejsze lub tańsze.

Paulina Chmielewska

Head of Marketing

Post article