PWA kontra React Native: szczegółowy wygląd

Podobnie jak PWA i Flutter, PWA i React Native są obecnie jednymi z najpopularniejszych podejść do tworzenia aplikacji wieloplatformowych. A badając ten temat, zrozumiałe jest uczucie zakłopotania przy podejmowaniu decyzji o właściwej ścieżce rozwoju dla swojej firmy. W tym artykule omówimy szczegóły dotyczące każdego podejścia programistycznego — od tego, czym one są, ich przypadków użycia i szczegółów dotyczących tego, w jaki sposób każde podejście programistyczne może być korzystne dla Twojej firmy.

Krótkie szczegóły

Oto krótkie podsumowanie każdego podejścia programistycznego, a także przypadki użycia, do których.

Progresywna aplikacja internetowa (PWA)

Definicje

Progressive Web App (PWA) to rozwijające się rozwiązanie do tworzenia aplikacji internetowych . Zasadniczo aplikacje PWA polegają na pracownikach usług i manifestach aplikacji internetowych, aby zapewnić środowisko podobne do aplikacji, które obejmuje funkcje wcześniej dostępne wyłącznie dla aplikacji, takie jak powiadomienia push, dostępność w trybie offline, możliwość instalacji itp.

Przypadki użycia i przykłady

Ze względu na swój internetowy charakter PWA najlepiej nadają się do witryn internetowych, których głównym celem jest zapewnienie bardziej angażujących, niezależnych od łączności doświadczeń — lub po prostu do witryn internetowych, które chcą dotrzeć do szerszego grona odbiorców.

Obecnie aplikacje PWA są szeroko stosowane w branży e-commerce, w której funkcje, takie jak powiadomienia push i dostępność offline, są niezbędne do poprawy współczynników konwersji zakupów i budowania bardziej lojalnej bazy klientów.

 Zalecana literatura: 12 najlepszych przykładów progresywnych aplikacji internetowych (PWA) w 2021 r.

Reaguj natywnie

Definicje

React Native to platforma do tworzenia międzyplatformowych, prawdziwie natywnych aplikacji opartych na języku JavaScript . Aplikacje zbudowane za pomocą React Native mogą wchodzić w interakcję z natywnymi interfejsami API za pośrednictwem deklaratywnego paradygmatu interfejsu użytkownika i języka JavaScript – a to oznacza, że ​​jedna baza kodu React może być używana do obsługi dwóch platform (iOS i Android), a wszystko to bez narażania doświadczeń użytkowników.

Przypadki użycia i przykłady

Trudno jest zdefiniować konkretny przypadek użycia dla React Native, ponieważ służy on do tworzenia różnego rodzaju aplikacji, takich jak popularne aplikacje społecznościowe (np. Facebook, Instagram, Pinterest itp.) lub aplikacje do komunikacji cyfrowej (np. Skype, Discord , Tencent QQ itp.). Aby uzyskać listę aplikacji zbudowanych za pomocą React Native, zapoznaj się z prezentacją aplikacji React Native.

Wchodząc w konkrety

W następnej części zajmiemy się specyfiką każdego podejścia do rozwoju, a także wglądem w to, jak każde podejście do rozwoju może pasować do planu Twojej firmy.

Język

Programy PWA polegają na technologiach internetowych, aby dostarczać środowiska przypominające aplikacje. Tak więc języki internetowe, takie jak HTML, CSS i JavaScript, nadal są podstawowymi językami tworzącymi PWA, podczas gdy aplikacje React Native używają React.js (biblioteki JavaScript) jako podstawowego języka.

Właśnie dlatego przekopując się przez kod aplikacji React Native, powinieneś zauważyć, że ma ona pewne podobieństwa do języków internetowych, z tą jedyną istotną różnicą, że aplikacje React Native używają komponentów natywnych zamiast komponentów internetowych do tworzenia interfejsu użytkownika.

Interfejs użytkownika

Ponieważ aplikacje PWA są oparte na technologiach internetowych i działają na silniku przeglądarki , interfejs użytkownika typowego PWA może nie wydawać się tak natywny dla wprawnych oczu. Jednak dla typowych użytkowników różnice między interfejsem użytkownika przypominającym aplikację PWA a rzeczywistym interfejsem użytkownika aplikacji natywnych są co najwyżej minimalne.

Zamiast tego aplikacja React Native jest w stanie zapewnić prawdziwie natywne doświadczenia , dzięki wykorzystaniu komponentów natywnych — w tym komponentów specyficznych dla platformy, takich jak <DatePickerIOS> i <ProgressViewIOS> dla iOS lub <ViewPagerAndroid> i <ToastAndroid> dla Android.

Wydajność

Spektakl to delikatny temat, bo trudno dojść do prawdy. Jednak ponieważ oba podejścia programistyczne w dużym stopniu wykorzystują JavaScript, można oczekiwać, że wydajność będzie dość podobna na wszystkich końcach — z niewielką przewagą React Native, ponieważ jest on ściślej zintegrowany z używanym systemem i nie musi komunikować się przez przeglądarkę.

Jednak fakt, że PWA działają w środowisku przeglądarki , nie oznacza, że ​​działa tak, jak Twoja przeciętna witryna. Dzięki zaawansowanej metodzie buforowania zastosowanej w PWA, nie ma już okazjonalnych problemów podczas ładowania między stronami, jakie można znaleźć w przeciętnych witrynach/aplikacjach internetowych; a w połączeniu z faktem, że PWA są zasadniczo ulepszonymi aplikacjami jednostronicowymi, postrzegana wydajność PWA jest tak zbliżona do prawdziwego środowiska aplikacji natywnej, jak to tylko możliwe.

Jednym z przykładów jest Temoorst, kuwejcka marka w branży artykułów jednorazowego użytku. Z SimiCart jako preferowanym dostawcą rozwiązań, marka wybrała zarówno aplikację natywną, jak i PWA, aby uzyskać jak najlepszy zwrot z inwestycji, a aspekt wydajnościowy PWA wciąż jest czymś, czego marka się nie spodziewała. W ślepym teście trudno będzie znaleźć różnice w wydajności — i wizualne — między ich PWA a aplikacją React Native.

Aby przetestować różnicę w wydajności między aplikacją React Native a PWA, zachęcamy do wypróbowania aplikacji Temoorst. Same aplikacje są świadectwem tego, jak dobrze zoptymalizowana aplikacja React Native lub PWA może wyglądać po maksymalnym wykorzystaniu.

• Aplikacja React Native : Sklep Google Play | Sklep z aplikacjami Apple
• PWA : https://temoorst.com/

Bezpieczeństwo

Ze względu na wyższy poziom integracji z używanym urządzeniem aplikacja React Native jest naturalnie bezpieczniejsza i mniej podatna na luki. Aby dodać więcej warstw zabezpieczeń do aplikacji React Native, podczas procesu tworzenia można zastosować różne podejścia, takie jak:

• Przypinanie SSL: do zabezpieczania połączeń aplikacji z serwerem
• Brelok/informacje wrażliwe: zapewniaj bezpieczne przechowywanie lokalne wraz z uwierzytelnianiem biometrycznym/twarzy
• Jscrambler: zapobiegaj ingerencji w kod, dodając warstwę samoobrony

Ponieważ aplikacje PWA działają w środowisku przeglądarki i wykorzystują przeglądarkę do większości jej możliwości, większość prac związanych z bezpieczeństwem jest wykonywana przez samą przeglądarkę. W porównaniu ze zwykłą witryną PWA jest bezpieczniejszy, ponieważ podstawowy składnik PWA — service worker — działa tylko przez HTTPS, co oznacza, że ​​komunikacja między stroną klienta a serwerem jest zawsze szyfrowana.

Service Workery działają tylko przez HTTPS. Ponieważ pracownicy usług mogą przechwytywać żądania sieciowe i modyfikować odpowiedzi, ataki typu „man-in-the-middle” mogą być bardzo złe.

Wprowadzenie do Service Workera

Wykrywalność

To tutaj błyszczą PWA. PWA są nie tylko dostępne w Internecie i widoczne dla wyszukiwarek, ale w rzeczywistości można je również opublikować w sklepach z aplikacjami. Google, Microsoft, a nawet Samsung dołączyły do ​​tego trendu, aby dążyć do większej adopcji PWA, wprowadzając przepakowane PWA do swoich sklepów z aplikacjami. Na przykład Microsoft Store idzie o krok dalej i planuje automatycznie ponownie zapełnić swój sklep z aplikacjami wysokiej jakości programami PWA zindeksowanymi przez ich własne roboty indeksujące Bing:

Sklep Microsoft Store, obsługiwany przez robota indeksującego Bing, automatycznie zindeksuje wybraną jakość progresywnej aplikacji internetowej

Witamy progresywne aplikacje internetowe w Microsoft Edge i Windows 10

W tej chwili Apple App Store jest jedynym popularnym rynkiem aplikacji, do którego PWA nie może dotrzeć. Dzieje się tak, ponieważ Apple jasno określiło w swoich wytycznych dotyczących recenzji, że aby aplikacja została zatwierdzona, musi znajdować się „poza przepakowaną witryną” – i jest to zupełnie inna dyskusja sama w sobie o tym, w jaki sposób Apple aktywnie zniechęca do rozwoju w sieci w obawie, że zaszkodzi ich wynikom finansowym.
W porównaniu do PWA, wykrywalność aplikacji zbudowanych za pomocą React Native nie jest tak imponująca, ale wieloplatformowy charakter tego frameworka oznacza, że ​​przy jednej bazie kodu nadal możesz sprawić, by Twoja aplikacja była wykrywalna zarówno w Google Play Store, jak i Apple App Store. Biorąc pod uwagę, że użytkownicy iOS stanowią większość w niektórych krajach (w tym w Stanach Zjednoczonych) – i że PWA nie mogą być publikowane w Apple App Store – powinno to być wystarczającym powodem, aby zdecydować się na tworzenie aplikacji React Native, aby służyć tam, gdzie większość Twoich użytkowników to...

Dostępność sprzętu

Ponieważ aplikacje React Native są prawdziwymi aplikacjami natywnymi, cieszą się znacznie szerszym dostępem do natywnych interfejsów API. A to oznacza, że ​​nawet niski poziom dostępu do sprzętu urządzenia (np. dostęp do NFC (Near Field Communication), listy kontaktów itp.) oraz dostęp systemowy (np. dostęp do ustawień systemowych, dzienników itp.) jest możliwy i może być wykorzystany aby poprawić wrażenia użytkownika.
A ponieważ PWA opiera się na interfejsach API sieci Web w celu zapewnienia dostępu do sprzętu, PWA ma oczywiście bardziej ograniczone możliwości wykorzystania zasobów systemu. W najlepszym przypadku — to znaczy, jeśli używana przeglądarka obsługuje wszystkie najnowsze interfejsy API dostępu do sprzętu — PWA może mieć dostęp do różnych funkcji sprzętowych, które wcześniej były wyłączne dla aplikacji natywnych, takich jak geolokalizacja, dostęp do kamery i mikrofonu, rzeczywistość rozszerzona (z WebXR API urządzenia).

 Zalecana literatura: Progressive Web App (PWA) i dostęp do sprzętu

Koszty rozwoju

Jeśli chodzi o koszty rozwoju, projekty React Native są zazwyczaj drogie ze względu na wysoki poziom złożoności. Na przykład podstawowy projekt React Native często kosztuje powyżej 15 000 USD , podczas gdy podstawowy projekt PWA powinien kosztować tylko około 1000 – 10 000 USD. Jednak w porównaniu z innymi natywnymi frameworkami aplikacji, React Native pozostaje opłacalnym rozwiązaniem dzięki swojej architekturze niezależnej od platformy. Dzięki jednej bazie kodu React Native możesz opublikować swoją aplikację zarówno w Google Play Store, jak i Apple App Store, znacznie zmniejszając całkowite koszty programowania bez szkody dla użytkowników.

I chociaż zazwyczaj jest tańszy niż projekty React Native, koszt rozwoju projektu PWA może się znacznie różnić w zależności od wybranej ścieżki rozwoju. Na przykład, jeśli zdecydujesz się na architekturę headless (która jest bardziej elastycznym, skalowalnym rozwiązaniem w porównaniu z tradycyjną architekturą), możesz spodziewać się znacznego wzrostu kosztów rozwoju PWA ze względu na wyższy poziom wiedzy technicznej wymaganej w procesie .

Wniosek

Ponieważ są to dwie ścieżki rozwoju dla bardzo specyficznych potrzeb, wybór między React Native a PWA może być trudną decyzją. PWA jest lekki, z bezproblemowymi procesami aktualizacji i instalacji, a funkcje i funkcje zapewniane przez PWA powinny być więcej niż wystarczające dla przeciętnego użytkownika aplikacji. Jednak ze względu na obecne ograniczenia, jakie Apple nakłada na swoje sklepy z aplikacjami, dobrym pomysłem może być zainwestowanie w dobrą aplikację React Native, jeśli większość użytkowników mobilnych korzysta z iPhone'a.

Sprzedawcom Magento, którzy chcą tworzyć międzyplatformowe aplikacje React Native lub bezgłowe PWA, w SimiCart oferujemy opłacalne rozwiązania, które pomogą Ci uzyskać przewagę konkurencyjną nad konkurencją.