Jakie są zalety i wady podejść do aplikacji mobilnej HTML5, natywnej i hybrydowej?

Chcę opracować aplikację mobilną. Niedawno przeczytałem artykuł na Forum Telerik , który porównuje trzy rodzaje aplikacji mobilnych i nie wiem, od którego powinienem zacząć. Oto obraz opisujący zalety i wady różnych opcji projektowania mobilnego

Aby zdecydować między tymi opcjami projektowania, chciałbym lepiej zrozumieć zalety i wady każdego wyboru architektury wymienionego na schemacie. Jakie są zalety i wady każdego podejścia do architektury?

Jestem programistą mobilnym, który spędził dużo czasu rozważając ten problem.

Dlaczego pytasz?

Najprawdopodobniej masz nadzieję obniżyć koszty opracowywania aplikacji poprzez:

• Wykorzystanie istniejących umiejętności programistycznych HTML5 / Javascript
• Kierowanie na wiele platform bez pisania od podstaw wielu aplikacji
• Nie trzeba utrzymywać wielu baz kodów w przyszłości

Przyczyny mogą również obejmować:

• Rozwój HTML5 / JavaScript postrzegany jako „łatwiejszy” niż rozwój platformy natywnej
• Unikanie płatności opłat rejestracyjnych programu deweloperskiego
• Unikanie ograniczeń zawartości sklepu (hazard itp.)
• Unikanie zakupu sprzętu programistycznego (np. Mac dla programistów iPhone)

Definicje

Ustalmy dokładnie, co rozumiemy przez każde z trzech wymienionych podejść:

Natywna
Aplikacja zainstalowana na urządzeniu, zwykle ze sklepu z aplikacjami (chociaż czasami może być ładowana z boku). Do celów tej dyskusji interfejs użytkownika aplikacji natywnej zwykle nie składa się wyłącznie z widoku pełnoekranowego.

Internet mobilny
W rzeczywistości może to być dowolna strona internetowa, jednak w tej dyskusji zastanówmy się nad jednostronicową aplikacją internetową, która próbuje naśladować wygląd aplikacji natywnej. To nie jest natywna aplikacja, działa w przeglądarce urządzenia.

Aplikacja instanceofnatywna Hybrid Hybrid .

Większość ludzi prawdopodobnie rozumie aplikację hybrydową jako jednostronną aplikację mobilną (ponownie najprawdopodobniej imitującą wygląd aplikacji natywnej), ale pakowaną jako natywna aplikacja z dostępem do usług natywnych (à la Phonegap).

Jednak w rzeczywistości istnieje spektrum między modelem Phonegap a całkowicie rodzimym, do którego przyjdę później.

Internet mobilny

Ograniczenia techniczne
Najpierw wypiszmy niektóre ograniczenia techniczne dotyczące mobilnych aplikacji internetowych, które same w sobie mogą stanowić przełom w zależności od tego, co robisz:

• Tylko interfejs HTML / canvas
• Brak dostępu do niektórych zdarzeń i usług urządzenia (są one szeroko udokumentowane)
• Nie może być wymieniony w sklepach z aplikacjami (co wpływa na wykrywalność)
• Może stać się pełnym ekranem i mieć ikonę ekranu głównego w systemie iOS, jednak dla większości użytkowników jest to niezwykłe i nieznane doświadczenie

Jeśli możesz żyć zgodnie z powyższymi zasadami, czytaj dalej, aby dowiedzieć się więcej na temat wyzwań związanych z jednostronnymi aplikacjami internetowymi w stylu natywnym. Jednak ta sekcja nie byłaby kompletna bez odniesienia do aplikacji FT.

Financial Times FT Web App jest znanym przykładem tego stylu aplikacji. Oto interesująca funkcja z brytyjskiej gazety Guardian na ten temat.

To z pewnością niezwykły wyczyn inżynierii. Zauważ, że obecnie jest on nadal dostępny tylko na iOS - to mówi mi, że odkrycie, że rozwiązywanie wyzwań związanych z zaawansowanym tworzeniem przeglądarek jest naprawdę bardzo trudne.

Jednostronicowe aplikacje internetowe w stylu natywnym

Ta sekcja dotyczy zarówno mobilnego internetu, jak i aplikacji w stylu Phonegap.

Natywny wygląd i działanie aplikacji internetowej uzyskuje się zwykle za pomocą frameworka, takiego jak Sencha Touch, który zapewnia zestaw komponentów interfejsu użytkownika do użycia.

Takie ramy są odpowiednie dla bardzo prostych interfejsów użytkownika. Jednak brakuje im elastyczności. Nie będziesz w stanie wdrożyć żadnego natywnego projektu aplikacji za pomocą Sencha, musisz dostosować swój projekt do tego, co może pomieścić framework.

Główny sposób, w jaki cierpią te frameworki, to próba naśladowania zawiłości interfejsu użytkownika platformy. Czy ten przyjemny, niewielki efekt odbicia pojawia się, gdy przewijasz do końca listy na iPhonie? Twój framework musi naśladować to w Javascript. Nie można go całkowicie odtworzyć, będzie miał tendencję do spowalniania, a Twoi użytkownicy utkną w „niesamowitej dolinie” aplikacji, która wygląda trochę jak natywna, ale najwyraźniej nie jest i jest nietechniczna użytkownik nie będzie w stanie dokładnie wskazać przyczyny.

Mit „HTML5 / Javascript jest łatwy”

Fragmentacja urządzeń w przeglądarkach internetowych jest powszechna, a kiedy wyjdziesz poza najbardziej podstawowy HTML i CSS, zauważysz, że rzeczy nie działają tak, jak można się spodziewać. Być może spędzasz więcej czasu na rozwiązywaniu problemów z interfejsem użytkownika, niż zaoszczędziłbyś, robiąc to natywnie dwa razy. Jeśli korzystasz z natywnej wersji, zwróć uwagę, że natywne widoki aplikacji nie są takie same jak przeglądarki urządzeń i mają własne problemy z fragmentacją.

W miarę jak Twoja aplikacja staje się bardziej funkcjonalna, przekonasz się, że potrzebujesz więcej niż podstawowych umiejętności jquery, aby utrzymać JavaScript w czystości i utrzymaniu.

To powiedziawszy, dzięki temu podejściu można bardzo szybko tworzyć proste, funkcjonalne aplikacje. Ale to całkiem oczywiste, gdy robi to aplikacja.

Dalej wzdłuż spektrum

Tak więc chcemy lepszego UX niż aplikacje w stylu Phonegap, bez wielokrotnego pisania absolutnie wszystkiego od zera. Co możemy zrobić?

Udostępnij kod inny niż interfejs użytkownika

Istnieje szereg technik udostępniania logiki biznesowej na wielu platformach macierzystych. Google uruchomił J2ObjC, który tłumaczy Javę na Objective-C. Dzięki starannemu faktorowaniu kodu biblioteka Java może być używana zarówno na Androidzie, jak i iOS.

Biblioteki takie jak Calatrava i Kirin umożliwiają manipulowanie bazami kodowymi napisanymi w Javascripcie (a zatem wszystkim, co można skompilować do Javascript) z kodu natywnego. Uwaga: Pracuję dla Future Platforms, który stworzył Kirin; odnieśliśmy duży sukces, używając go na iOS z JavaScript generowanym z Javy z GWT, a kod Java jest również uruchamiany natywnie na Androidzie.

Korzystaj z widoków internetowych ... w stosownych przypadkach

Widoki na pełnym ekranie mają wiele do zrobienia, aby naśladować przejścia ekranu i efekty odrzuceń. Ale widok internetowy w natywnej aplikacji Chrome może być nie do odróżnienia od natywnej.

Istnieją standardowe i dobrze udokumentowane metody komunikacji z aplikacjami natywnymi i widokami internetowymi.

Listy i tabele mogą działać szczególnie dobrze, gdy są wykonywane w ten sposób, jednak wprowadzanie tekstu jest przykładem czegoś, co najlepiej obsługiwać natywnie (dla pełnej kontroli nad klawiaturą).

W podsumowaniu

Podejście, które jest dla Ciebie odpowiednie, zależy od tego, jak skomplikowana jest Twoja aplikacja i od jakiego poziomu zaawansowania interfejsu użytkownika będziesz zadowolony.

Moje motto: korzystaj z widoków internetowych, gdziekolwiek możesz, ale upewnij się, że użytkownicy nie mogą powiedzieć .

Najpierw sprawdź tę ankietę, aby dowiedzieć się, co się dzieje!

porównanie trzech typów: Zrozumienie opcji rozwoju aplikacji mobilnych

Porównania między rodzimym a hyprid:

HTML5 vs. Natywny

Aplikacja HTML5 a natywna: którą wybrać?

Ten jest naprawdę dobry: HTML5 v aplikacje natywne: najważniejsze kwestie dotyczące strategii mobilnej

Komentarze:

• Możesz wybrać jedną z nich w zależności od tego, co masz (umiejętności) i co możesz uzyskać (wygląd i działanie, wydajność, funkcjonalność, ...)
• Każdy twórca aplikacji mobilnych powinien mieć jasną wizję / wymagania dotyczące aplikacji, którą ma opracować dla pierwszych i przyszłych wersji! tylko po to, aby upewnić się, że opcja, której użyje, nie ograniczy go w pewnym momencie.
• Nie ma to jak prawdziwe doświadczenie z trzema sposobami i bycie na bieżąco w tym samym czasie, to da ci poczucie i zdolność do podjęcia właściwej decyzji.

Jeśli potrzebujesz uzyskać dostęp do sprzętu telefonu, powinieneś zbudować natywną aplikację (w HTML5 możesz uzyskać dostęp do niektórych komponentów sprzętowych urządzenia, takich jak GPS).

Jeśli czujesz się bardziej komfortowo w tworzeniu stron internetowych, powinieneś się z tym pogodzić, chyba że musisz stworzyć natywną aplikację.

O ile powinieneś wiedzieć, powiedziałbym, że powinieneś pamiętać o wszystkich różnych rozmiarach ekranu (w tym orientacji pionowej i poziomej). Należy pamiętać o różnych wersjach systemu operacyjnego (więcej na Androida). Ponieważ są to urządzenia mobilne, istnieje szansa, że ​​użytkownik odbierze połączenie telefoniczne, to jest telefon, a także nie ma mocy obliczeniowej komputera stacjonarnego lub serwera.

Dla mnie, gdy piszę dowolną aplikację konsumencką, najważniejszy dla jej sukcesu jest akceptacja i postrzeganie aplikacji przez użytkownika. Z tego powodu cztery powody, by opierać się na natywnych aplikacjach, pomimo dodatkowych kosztów związanych z uczeniem się, szkoleniem i utratą WORA (pisz raz uruchamiany w dowolnym miejscu) to:

1. Szybsze uruchamianie aplikacji
2. Płynniejsze przewijanie
3. Interfejs aplikacji zapewniający większą spójność, który jest spójniejszy z resztą systemu operacyjnego i aplikacji
4. Szybsza odpowiedź interfejsu użytkownika aplikacji

Ponad wszystko, czego chcesz, to świetna obsługa, która pomoże Twojej aplikacji odnieść sukces na rynku gardłowym. Oczywiście są wyjątki, szczególnie brak umiejętności, brak czasu i budżetu. Czasami aplikacje są skierowane do ograniczonej grupy użytkowników biznesowych, którzy mogą nie przejmować się takimi rzeczami.

To z podobnych powodów, że Facebook porzucił swoją strategię aplikacji na rzecz natywnych aplikacji dla IOS i Androida:

Proszę przeczytaj:

Mark Zuckerberg: Naszym największym błędem było zbyt duże zakładanie się na HTML5 http://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobile-was-betting-too-much-on- html5 /

Dlaczego Facebook porzucił mobilną sieć i poszedł natywnie dzięki nowej aplikacji na iOS http://readwrite.com/2012/08/23/how-facebook-ditched-the-mobile-web-went-native-with-its-new- ios-app # awesm = ~ o9jDrRefxdgnpS

Mam nadzieję że to pomoże.

Biorąc pod uwagę poniższe, moje obecne stanowisko w tej sprawie jest takie, że hybrydę warto zacząć od zbadania aplikacji, szybkiego powtarzania opinii klientów i ustabilizowania zestawu funkcji. Następnie, aby przepisać aplikację na natywną zgodnie ze specyfikacją, aby poprawić wrażenia.

Wyłączyłem Mobile Web, ponieważ służy on zupełnie innemu celowi. Jeśli chcesz być w sklepach z aplikacjami, wybierz Native / Hybrid. Jeśli chcesz uprościć wdrażanie i chcesz poświęcić doświadczenie i umiejętności techniczne, wybierz Mobile Web.

Za / przeciw Native :

• Pro: Pasuje do reszty doświadczenia z urządzeniem, bez problemów z niesamowitą doliną .
• Pro: Przeważnie zapewnia płynny, spójny interfejs użytkownika, bez opóźnień, bez zacinania się.
• Pro: Kilka ograniczeń technicznych, możesz w pełni wykorzystać urządzenie.
• Pro: Natywne narzędzia zapewniają zgodność z weryfikacją sklepów z aplikacjami.
• Pro: Natywne frameworki obejmują poprawki na wersję platformy, mniej czasu poświęcanego na dostrajanie.
• Przeciw: Trwa budowanie i dlatego zajmuje więcej czasu.
• Przeciw: Wymaga programistów poliglotycznych, które są trudne do znalezienia, drogie.
• Przeciw: Konieczność zapoznania się z interfejsami API każdej platformy urządzeń (iOS / Android / etc).
• Con: Stroma krzywa uczenia się.
• Przeciw: inny zestaw narzędzi dla platformy.

Pro / Cons Hybrid :

• Pro: Pojedyncza baza kodów dla wielu platform urządzeń.
• Pro: Szybkie cykle programowania, doskonała elastyczność układu, idealne do prototypowania i MVP .
• Pro: Wygodna krzywa uczenia się, mnóstwo dokumentacji, ramy, które pomogą ci.
• Pro: Pojedynczy zestaw narzędzi programistycznych. Narzędzia do debugowania w Chrome są doskonałe.
• Pro: Jedna baza kodów do obsługi wielu platform urządzeń.
• Pro: Dostępnych jest wielu programistów, łatwych do nauczenia.
• Con: Wymaga przyzwoitego frameworku interfejsu użytkownika w celu dostosowania interfejsu użytkownika dla każdej platformy, aby był zgodny z doświadczeniem urządzenia. Istnieją rozwiązania takie jak Kendo UI , Sencha Touch .
• Przeciw: Muszą być bardzo świadomi wykorzystania pamięci i obliczeń, niektóre CSS, pętle javascript mogą poważnie spowolnić aplikację. Niezbyt dobre narzędzia dostępne na urządzeniu do debugowania.
• Przeciw: Jeszcze nie dojrzałe, rzeczy mogą się nagle zmienić, narzędzia stają się coraz lepsze.

Jako programista mobilny najgorsze jest dostęp offline. Po prostu zmuszasz użytkowników do korzystania z Internetu, co powinno działać w wielu aplikacjach, ale nie we wszystkich.

Innym wielkim złym aspektem jest powolność. Czas potrzebny do przeanalizowania zdalnych danych może zająć dużo czasu. Tak, możesz wstępnie pobrać dane w czasie ładowania, ale we wszystkich innych przypadkach nie można uniknąć spowolnienia.

Odkryłem, że taka aplikacja zakończyła aplikację droższą niż natywna. Nie polecam ich żadnym moim klientom.

Dużym problemem związanym z aplikacjami hybrydowymi jest fragmentacja frameworków: jest ich znacznie więcej (Ionic, Xamarin, React Native itp.) Niż rodzime interesujące platformy mobilne (zwykle tylko dwie, Android i iOS). Ramy te konkurują ze sobą, pojawiają się, spadają, więc przejście na system hybrydowy nie uratuje cię przed przeskakiwaniem z platformy na platformę, nawet jeśli planujesz utrzymać obecny zespół na całe życie.

Google i Apple starają się jak najlepiej dostarczać i wspierać redaktorów, debuggery, ramy testowe, narzędzia do refaktoryzacji i inne sposoby opracowywania dla nich platform. Dlatego przyjąłbym typowe sformułowanie „ o wiele łatwiej jest opracować aplikację hybrydową, edytować za pomocą ulubionego edytora i otwierać w przeglądarce ” z rozsądną rezerwacją. Xamarin i React Native są platformami programistycznymi, takimi jak Swift lub Java / Android, i chociaż „hello world” może wyglądać na krótszy, to w końcu powinno zająć porównywalny czas na prawidłowe nauczenie się.

Jeśli w każdym razie pojawi się potrzeba natywnych komponentów (na przykład istniejąca biblioteka strony trzeciej musi zostać zintegrowana), otrzymasz trzy frameworki zamiast dwóch: iOS, Android i hybrydowy frameworki na górze, co skończy się o bardziej złożonej architekturze. Debugowanie takich aplikacji, przechodzenie między wywołaniami między warstwami, rejestrowanie wszystkich warstw, synchronizacja kodu jest złożona, a czasem niemożliwa.

Niektórzy twierdzą, że „ aplikacja będzie wyglądać dokładnie tak samo na wszystkich platformach ”. Czy to naprawdę dobra rzecz? Aplikacja na Androida musi wyglądać jak aplikacja na Androida, a aplikacja na iOS musi wyglądać jak aplikacja na iOS.

Co z nowymi funkcjami? Artykuły do ​​noszenia? Aplikacje błyskawiczne oferowane teraz przez platformę Android? Pokazuje dodatkowe dane na wyświetlaczu zewnętrznym? Aplikacje hybrydowe obsługują teraz wiele natywnych funkcji, ale czy naprawdę obsługują wszystkie z nich? W dowolnym momencie natychmiast?

Wreszcie, nie tylko wydajność i wrażenia użytkownika, ale także bezpieczeństwo mogą być bardziej po stronie natywnej aplikacji. Hybrydowe środowisko dodaje warstwę pośredniczości, która może zawierać własne błędy, w tym błędy bezpieczeństwa.

Podsumowując wszystkie powyższe, przy możliwości wyboru, zdecydowanie wybrałbym dwie natywne aplikacje, jedną na iOS i jedną na Androida, lub po prostu zaprojektowałem mobilną wersję strony internetowej, nie zawracając sobie głowy tworzeniem aplikacji dla dowolnej platformy. .