PWA kontra Flutter: szczegółowe porównanie

Biorąc pod uwagę wszystkie komplikacje zachodzące między tymi technologiami, zrozumiałe jest, że na początku może się to wydawać nieco mylące, gdy próbujesz poznać różnicę między tymi dwiema technologiami — Progressive Web App i Flutter. W końcu brzmią one bardzo podobnie w teorii, ponieważ oba mogą być używane do dostarczania angażujących doświadczeń na różnych urządzeniach przy użyciu jednej bazy kodu.

Aby odróżnić te dwie technologie, dzisiaj przyjrzymy się dokładnie tym dwóm technologiom — od sposobu, w jaki działają, po ich rzeczywiste zastosowanie. Przejdźmy od razu:

Krótki przegląd

Co to jest PWA?

Mówiąc prościej, Progressive Web Apps to strony internetowe, które wyglądają i działają jak aplikacja. Technologia ta jest połączeniem najlepszych funkcji zarówno z aplikacji internetowych, jak i aplikacji natywnych, co oznacza, że ​​użytkownicy korzystający z PWA mogą korzystać ze wszystkich funkcji, które wcześniej były dostępne wyłącznie w aplikacjach natywnych, takich jak powiadomienia push, geolokalizacja itp. — a wszystko to przy zachowaniu najlepsze funkcje z sieci

To obiecująca nowa technologia; i w połączeniu z masową adopcją wszystkich wielkich facetów, w tym Microsoft, z ich niedawnym wprowadzeniem PWA do systemu Windows, możesz być pewien, że od teraz będziesz widzieć tylko więcej PWA.

Co to jest trzepotanie?

Znany ze swoich doskonałych możliwości w zakresie tworzenia pikseli, Flutter to najnowszy pakiet SDK (Software Development Kit) o ​​otwartym kodzie źródłowym od Google, który pozwala wykonać zadanie, jeśli chcesz tworzyć aplikacje mobilne, które mają wygląd i działanie aplikacji natywnych, a jednocześnie są dostępne na wielu platformach. Oznacza to, że aplikacje Flutter są budowane z myślą o jednej bazie kodu, co znacznie obniża koszty rozwoju.

Może to wyglądać bardzo podobnie do Progressive Web App, ale możemy zapewnić, że podstawowe mechanizmy, które umożliwiają korzystanie z tych wszystkich natywnych aplikacji, są bardzo różne.

Wchodząc w konkrety

Język

Jak już wcześniej wspomniano, progresywne aplikacje internetowe są bardziej jak nowy standard sieci i nie ma ścisłej reguły co do tego, w jakim języku programowania muszą być zakodowane. Jednak, ponieważ nadal jest to zasadniczo technologia z sieci, języki oparte, takie jak JavaScript , są nadal podstawą rozwoju PWA.

Z drugiej strony Flutter używa języka programowania Dart . Dart jest w pełni zorientowanym obiektowo językiem programowania, a ponieważ ma styl składni oparty na języku C, jest łatwy do nauczenia i opanowania, jeśli znasz podobny styl składni. Co więcej, Dart może zostać skompilowany do kodu ARM i x86, a dzięki nowszej wersji Fluttera możesz nawet oczekiwać, że będziesz w stanie przetranspilować go do JavaScript, aby Twój kod Dart mógł skutecznie działać w Internecie.

Złożoność

Ponieważ PWA opiera się na JavaScript, który jest starszym i bardziej dojrzałym językiem, możesz oczekiwać, że krzywa uczenia się będzie bardziej wyrozumiała, ponieważ dostępnych jest wiele frameworków i bibliotek JavaScript. Flutter – będąc znacznie nowszym językiem – może wydawać się nieco bardziej skomplikowany na pierwszy rzut oka, ponieważ wszystko, od interfejsu użytkownika po kod logiczny, może wydawać się mniej lub bardziej pomieszane we Flutterze. A ponieważ wszystko jest w zasadzie widżetem we Flutter , możesz znaleźć się w sytuacjach, w których skończysz z niezwykle dużym, głębokim i złożonym „drzewem widżetów”.

Wydajność

Jeśli chodzi o wydajność, ta dwójka jest ze sobą zmierzona, a nie jednostronnym meczem, jak można by się spodziewać. W porównaniu z aplikacją Flutter, typowy PWA powinien mieć trochę spadku wydajności, gdy próbuje „rozmawiać” bezpośrednio z kodem natywnym — ponieważ PWA często nadal musi używać mostka JavaScript, aby uzyskać dostęp do podstawowych funkcji urządzenia np. GPS, aparat itp.

Jednak patrząc na testy porównawcze, jasne jest, że frameworki JavaScript, np. NodeJS , mogą w kilku przypadkach działać na równi, jeśli nie lepiej niż Dart (szkielet aplikacji Flutter).

Wynika to z faktu, że JavaScript może lepiej wykorzystać wielordzeniowy charakter nowoczesnych procesorów i bardziej równomiernie rozłożyć obciążenia, mimo że sam język ma charakter jednowątkowy. Dzięki niedawnemu modułowi worker_threads wprowadzonemu przez NodeJS, który umożliwia korzystanie z wątków do równoległego wykonywania procesu JavaScript, JavaScript może teraz lepiej obsługiwać obciążenia intensywnie korzystające z procesora i faktycznie może pokonać języki takie jak Dart.

Cechy

Nie ulega wątpliwości, że Flutter — zestaw SDK stworzony specjalnie do wieloplatformowego tworzenia aplikacji mobilnych — jest znacznie bardziej funkcjonalny niż PWA, które jest oparte na technologiach sieci Web. Aplikacje Flutter mają głębszą integrację z systemem, dzięki czemu są w stanie wykorzystać więcej natywnych funkcji urządzenia.

Co więcej, jeśli chodzi o ogólne wrażenia użytkownika, Flutter ma tutaj przewagę, ponieważ przyjmuje filozofię perfekcji pikseli, dzięki której użytkownicy zarówno z platform iOS, jak i Android mogą doświadczyć tego samego bezproblemowego doświadczenia.

Wynika to z faktu, że Flutter renderuje własne komponenty UI, w przeciwieństwie do większości innych frameworków, które używają natywnych komponentów platformy. W ten sposób aplikacje Flutter są znacznie bardziej spójne na różnych urządzeniach, ale w konsekwencji typowy rozmiar aplikacji Flutter jest znacznie większy niż typowy PWA. Proste „Witaj świecie!” Na przykład aplikacja Flutter może mieć rozmiar powyżej 7 MB, podczas gdy PWA z tą samą zawartością nigdy nie przekracza granicy 1 MB.

Przypadków użycia

Kiedy więc należy wybrać jedno z nich? Cóż, w tym momencie robi się trudno (tak powiedziała), ponieważ oba mogą zapewnić praktycznie identyczne wrażenia użytkownika na różnych platformach i na różnych urządzeniach. Kluczową kwestią jest to, która mocna strona tych technologii wolisz bardziej — zasięg czy doświadczenie użytkownika.

Oczywiście PWA opiera się na technologii internetowej, dzięki czemu może dotrzeć do szerszego grona odbiorców, a nawet może być dostępne w Microsoft Store, skutecznie rozszerzając zasięg każdego z nich na całą bazę instalacyjną Windows 10, czyli prawie 700 milionów aktywnych użytkowników miesięcznie.

Z drugiej strony aplikacja Flutter, dzięki swojej filozofii pixel-perfect, może sprawić, że wrażenia z aplikacji będą o wiele bardziej atrakcyjne, a jednocześnie nadal będą opłacalnym rozwiązaniem dla firm, ponieważ tylko jedna baza kodu jest wymagana zarówno dla systemu Android, jak i Platformy iOS.

Przykłady

Spośród zebranych aplikacji PWA i Flutter są to te bardziej znane, które naszym zdaniem najlepiej odzwierciedlają ich możliwości:

Flutter — The New York Times

Flutter rozpoczął swój nowy rozdział bardzo niedawno, w połowie 2019 roku, ponieważ jego potencjał został zweryfikowany dzięki nowej internetowej wersji gry KENKEN wydanej przez New York Times.

Dla programistów, którzy pracowali nad stworzeniem internetowej wersji swoich aplikacji Flutter, jest to świetna wiadomość, ponieważ pokazuje, do czego jest zdolny framework Flutter, gdy jest on maksymalnie wykorzystany.

PWA — Twitter Lite

Można powiedzieć, że Twitter Lite jest najbardziej udaną implementacją PWA w historii, ponieważ robi to, co PWA robi najlepiej — dostarcza angażujące, podobne do aplikacji doświadczenia na różnych urządzeniach. Użytkownicy, którzy chcą doświadczyć Twitter PWA, mogą uruchomić aplikację na każdym urządzeniu, o jakim tylko przyjdzie im do głowy, czy to na komputerze stacjonarnym, telefonie komórkowym czy tablecie…

Główną różnicą między najlepiej działającymi PWA w porównaniu z aplikacjami Flutter o tej samej wydajności jest to, że całkowity rozmiar twojego PWA nie powinien zajmować więcej niż 2 MB na twoim urządzeniu.

Po przekształceniu swojej strony internetowej w PWA, Twitter odnotował imponujące wyniki. Liczby mówią same za siebie:

• 20% spadek współczynnika odrzuceń,
• 65% wzrost liczby stron na sesję,
• 75% wzrost wysyłanych tweetów.

 Powiązany artykuł: 12 przykładów progresywnych aplikacji internetowych dla Twojej inspiracji

Flutter PWA, czy to możliwe?

Wsparcie internetowe dla Fluttera jest już w toku i znajduje się w fazie beta. Proces udostępniania Fluttera w sieci może być tak prosty, jak kompilacja Darta do JavaScript, zamiast kompilowania go do kodu maszynowego ARM, który jest używany w aplikacjach mobilnych.

Nadal istnieją pewne komplikacje, które sprawiają, że wszystko to jest trochę trudniejsze do osiągnięcia; ale jak zauważono w powyższej grze KENKEN New York Times, możliwe jest zrobienie przyzwoitej implementacji aplikacji Flutter w sieci, a Flutter PWA prawdopodobnie pojawi się wkrótce.

Wniosek

Ponieważ obie są stosunkowo nowymi technologiami o dużym potencjale, warto zbadać więcej opcji i przekonać się, która z nich najlepiej odpowiada Twoim potrzebom programistycznym.

W SimiCart jesteśmy uznaną przez Google agencją rozwoju PWA, gotową wprowadzić zakupy nowej generacji do Twojego sklepu Magento.

Czytaj więcej:
PWA kontra elektron: głębokie nurkowanie

Co to jest PWA? Wszystko, co musisz wiedzieć o progresywnej aplikacji internetowej

Magento PWA Studio vs Vue Storefront: Który z nich jest dla Ciebie?