Zawartość
- PWA a aplikacje natywne: jaka jest różnica?
- Progresywne aplikacje internetowe: tworzenie aplikacji internetowych
- Mocne strony PWA
- Słabe strony PWA
- React Native
- Mocne strony React Native
- Słabe strony React Native
- NativeScript
- Mocne strony języka NativeScript
- Słabe strony języka NativeScript
Jakie podejście należy przyjąć podczas tworzenia aplikacji? Czy powinieneś wybrać ścieżkę PWA / technologie internetowe, czy też wybrać natywną i projektować dla konkretnych platform? Obie opcje mają swoje wady i zalety. W tym artykule skupimy się na kilku popularnych opcjach używanych do tworzenia aplikacji internetowych i natywnych.
PWA (Progressive Web Apps), czyli aplikacje internetowe, są zbudowane przy użyciu popularnych technologii internetowych HTML, CSS i JavaScript i działają w przeglądarce internetowej. (Zapoznaj się z niektórymi niezbędnymi tagami HTML, które pomogą Ci w tworzeniu kompilacji). PWA to w rzeczywistości mobilne witryny internetowe zaprojektowane tak, aby wyglądały jak aplikacja, a korzystanie z internetowych interfejsów API zapewnia im funkcjonalność podobną do aplikacji natywnej.
Więcej porad na temat tworzenia aplikacji znajdziesz w naszym poście na temat tworzenia aplikacji. Jeśli jest to witryna, którą chcesz utworzyć, zapoznaj się z tymi najlepszymi twórcami witryn i usługami hostingowymi.
PWA a aplikacje natywne: jaka jest różnica?
Progresywne aplikacje internetowe mają tę zaletę, że można je zainstalować i działać na urządzeniu bez konieczności posiadania sklepu z aplikacjami. Częścią tego procesu jest też manifest aplikacji internetowej, który pozwala programistom kontrolować sposób wyświetlania aplikacji i jej uruchamiania. Ponadto projektanci stron internetowych / programiści front-endu będą już mieli umiejętności potrzebne do natychmiastowego rozpoczęcia tworzenia. W przeciwieństwie do aplikacji natywnych nie trzeba uczyć się nowego języka.
Aplikacje natywne są tworzone z myślą o konkretnym systemie operacyjnym - tj. iOS i Android - i używaj frameworka lub języka, aby osiągnąć ten cel. Aplikacje na iOS zazwyczaj używają Xcode lub Swift, a aplikacje na Androida - JavaScript. Jednak w tym artykule skupiamy się na kilku opartych na JavaScript frameworkach open source - React Native i NativeScript - które działają na obu platformach.
Zaletą aplikacji natywnych jest to, że zazwyczaj zapewniają lepszą funkcjonalność, ponieważ lepiej wykorzystują sprzęt i oprogramowanie urządzenia, są szybsze i bardziej responsywne, a oceny w sklepach z aplikacjami zapewniają gwarancję jakości. Będzie to jednak oznaczać konieczność nauczenia się korzystania z określonego frameworka lub biblioteki.
Tutaj przyjrzymy się trzem różnym opcjom - jednej dla sieci (PWA) i dwóch dla natywnych (React Native, NativeScript) - do tworzenia aplikacji. Omawiamy, jak działają, co mogą zrobić i przyglądamy się ich mocnym i słabym stronom, aby pomóc Ci zdecydować, którą opcję wybrać, aby zbudować swoją aplikację.
Progresywne aplikacje internetowe: tworzenie aplikacji internetowych
Mocne strony PWA
- Aplikacje działają również w przeglądarce
- Dystrybucja: przeglądarka, sklepy firmowe i aplikacje
- Może wykorzystywać frameworki React, Angular, Vue, vanilla lub inne
Słabe strony PWA
- Brak dostępu do każdego natywnego interfejsu API
- Możliwości i dystrybucja sklepu na iOS i iPadOS są ograniczone
- Jest w ciągłej ewolucji
PWA to aktualny wzorzec projektowy służący do tworzenia wysokowydajnych aplikacji offline, które można zainstalować przy użyciu samego stosu internetowego: HTML, CSS, JavaScript i interfejsów API przeglądarek. Dzięki Service Worker i specyfikacjom manifestu aplikacji internetowej możemy teraz tworzyć pierwszorzędne wrażenia z aplikacji po zainstalowaniu aplikacji na Androida, iOS, iPadOS, Windows, macOS, Chrome OS i Linux.
Do tworzenia PWA możesz wykorzystać dowolną architekturę: po stronie serwera, waniliowy JavaScript, React, Vue, Angular lub inne frameworki po stronie klienta. Może to być aplikacja jednostronicowa lub wielostronicowa aplikacja internetowa i określamy, w jaki sposób będziemy wspierać użytkowników w trybie offline.
W tym podejściu nie musimy pakować i podpisywać zasobów naszej aplikacji: po prostu hostujemy pliki na serwerze WWW, a pracownik serwisu będzie odpowiedzialny za buforowanie plików w kliencie i udostępnianie ich po instalacji. Oznacza to również, że jeśli aplikacja wymaga aktualizacji, wystarczy zmienić pliki na serwerze, a logika pracownika serwisu będzie odpowiedzialna za aktualizację ich na urządzeniach użytkowników bez interwencji użytkownika lub sklepu z aplikacjami.
Pod względem dystrybucji najpopularniejszą metodą jest przeglądarka. Użytkownicy instalują aplikację z przeglądarki, używając pozycji menu Dodaj do ekranu głównego lub Instaluj, akceptując zaproszenie do instalacji lub używając niestandardowego interfejsu użytkownika aplikacji internetowej na kompatybilnych platformach. Warto zauważyć, że Apple odrzuca czyste PWA publikowane w App Store i zachęca twórców stron internetowych do rozpowszechniania ich za pośrednictwem Safari.
Interfejs użytkownika jest zarządzany wyłącznie przez środowisko wykonawcze sieci Web, co oznacza, że projektant stron internetowych jest odpowiedzialny za renderowanie każdego elementu sterującego na ekranie. Jeśli używasz frameworka UI, takiego jak Ionic, lub biblioteki Material Design, HTML i CSS będą naśladować natywne interfejsy w systemie Android lub iOS, ale nie jest to obowiązkowe.Podczas wykonywania PWA stosowanie technik wydajności sieci jest obowiązkowe, aby zachować dobre wrażenia użytkownika.
Pod względem możliwości PWA będzie mieć dostęp tylko do API dostępnych w silniku przeglądarki na tej platformie i nie da się go rozszerzyć o kod natywny - z wyjątkiem dystrybucji PWA App Store. W tej kwestii iOS i iPadOS są bardziej ograniczonymi platformami dla PWA, podczas gdy Chrome (na Androida i systemy operacyjne na komputery stacjonarne) ma większą dostępność i ciężko pracuje, aby dodać wszystkie możliwe API do JavaScript za pomocą projektu Fugu.
- Najlepsze miejsce do przechowywania w chmurze: wybierz odpowiednią opcję dla siebie.
React Native
Mocne strony React Native
- Te same wzorce co w React.js
- Niektóre internetowe interfejsy API są ujawniane
- Wsparcie internetowe i stacjonarne
Słabe strony React Native
- Nie można ponownie wykorzystać składników interfejsu internetowego
- Natywny most wymaga trochę pracy
- Potrzebne jest doświadczenie w reagowaniu
React Native to oparty na JavaScript komponent open source, sponsorowany przez Facebooka, który wykorzystuje wzorce projektowe React, a także język JavaScript do kompilowania natywnych aplikacji na iOS, iPadOS i Android z jednego kodu źródłowego.
Ale żadne elementy HTML nie są akceptowane do renderowania; tylko inne komponenty natywne są prawidłowe. Dlatego zamiast renderować plik div> z p> i a wejście> element z JSX, będziesz renderować plik Widok> z Tekst> i a TextInput>. Do stylizacji komponentów nadal używasz CSS, a układ jest definiowany przez Flexbox.
Interfejs użytkownika nie będzie renderowany w DOM przeglądarki, ale przy użyciu natywnych bibliotek interfejsu użytkownika na Androida i iOS. Dlatego a Przycisk> w ReactNative stanie się instancją UIButton na iOS i android.widget.Button zajęcia na Androidzie; w React Native nie ma środowiska uruchomieniowego.
Jednak cały kod JavaScript zostanie wykonany na maszynie wirtualnej JavaScript na urządzeniu, więc podczas kompilowania aplikacji nie ma konwersji kodu JavaScript na rzeczywisty kod natywny. Istnieje zestaw dobrze znanych interfejsów API dla programistów internetowych, takich jak Fetch API, WebSockets i liczniki czasu przeglądarki: setInterval i requestAnimationFrame. Inne możliwości są wdrażane na platformie za pośrednictwem niestandardowych interfejsów API, takich jak animacje.
Możesz rozpocząć szybki projekt React Native z dwoma darmowymi CLI: Expo lub bardziej zaawansowanym i oficjalnym ReactNative CLI. Jeśli korzystasz z oficjalnego interfejsu wiersza polecenia, potrzebujesz również Android Studio, aby skompilować i przetestować aplikację na Androida oraz Xcode, aby zrobić to samo na iOS i iPadOS, więc będziesz potrzebować komputera z systemem macOS dla tej platformy.
React Native kompiluje aplikacje natywne na iOS i Androida, co oznacza, że dystrybucja Twojej aplikacji będzie przebiegać zgodnie z tymi samymi regułami, co inne aplikacje natywne: sklepy z aplikacjami dla aplikacji publicznych, dystrybucja korporacyjna i testy alfa / beta. Zwykle nie można rozpowszechniać aplikacji za pośrednictwem przeglądarki, chociaż mogą pomóc React Native dla sieci Web i Microsoft React Native dla platform Windows.
NativeScript
Mocne strony języka NativeScript
- Dobre narzędzia do kodowania i testowania
- Obszerna galeria aplikacji gotowych do zabawy
- Wszystkie interfejsy API systemu Android i iOS są udostępniane w języku JS
Słabe strony języka NativeScript
- Mała społeczność
- Nie można ponownie wykorzystać składników interfejsu internetowego
- Brak wsparcia internetowego, stacjonarnego lub React
NativeScript nie jest tak dobrze znany jak React Native, ale konkuruje w tej samej dziedzinie: natywnych aplikacjach na iOS i Androida z JavaScript i frameworków internetowych. Umożliwia tworzenie aplikacji natywnych przy użyciu języka JavaScript lub TypeScript oraz pliku interfejsu użytkownika XML. Obsługuje również Angular i Vue od razu po wyjęciu z pudełka, więc jest to świetne rozwiązanie dla programistów przyzwyczajonych do tych frameworków.
Zalety NativeScript są wyraźniejsze, gdy używasz Angular lub Vue. W przypadku Angular tworzysz te same komponenty, do których jesteś przyzwyczajony, ale używając XML zamiast HTML dla szablonu, w tym wszystkie powiązania danych. W XML zamiast pliku div> z p> i img>, umieścisz StackLayout> z Etykieta> i Obraz> składnik.
CSS i Sass są obsługiwane z podobnymi stylami do CSS w przeglądarce. Zarządzanie routingiem i siecią odbywa się poprzez implementacje standardowych usług Angular. W przypadku Vue jest to coś podobnego; piszesz szablon w XML zamiast używać HTML w tym samym szablon> element w pliku .vue.
NativeScript zawiera kolekcję komponentów, które są następnie mapowane na natywną kontrolkę systemu Android lub iOS, więc kiedy renderujesz listę lub selektor, będzie to natywna aplikacja, używając tego samego pomysłu, co w React Native.
Twój kod JavaScript lub TypeScript (transpiled) jest wykonywany na maszynie wirtualnej JavaScript na urządzeniu z mostem do / ze środowiska natywnego. W tym pomoście widoczne są całe natywne interfejsy API z systemu Android lub iOS / iPadOS, więc pomimo dostępu do międzyplatformowych interfejsów API możemy utworzyć wystąpienie lub wywołać dowolny kod Java lub Objective-C z JavaScript / TypeScript, a NativeScript będzie organizować typy danych.
NativeScript ma świetne wsparcie dla narzędzi, w tym wtyczek kodu VS, CLI, systemu testowania ponownego ładowania na gorąco i aplikacji NativeScript dla placu zabaw, więc nie musisz instalować wszystkich zależności podczas testowania, a także kilka dodatkowych usług, takich jak online plac zabaw.
Wreszcie, NativeScript kompiluje tylko aplikację na Androida i iOS, którą można zainstalować z oficjalnych kanałów dystrybucji i sklepów z aplikacjami, jeśli przestrzegasz ich zasad, dystrybucji korporacyjnej i testów alfa / beta. Zwykle nie będzie możliwości dystrybucji aplikacji z przeglądarki i nie ma rozwiązań dla aplikacji komputerowych na tę platformę.
Ten artykuł został pierwotnie opublikowany w nr 325 of net, najlepiej sprzedającego się magazynu na świecie dla projektantów i programistów stron internetowych. Kup nr 325 lub Subskrybuj do sieci.
Dołącz do nas w kwietniu 2020 r. Z naszym składem supergwiazd JavaScript na GenerateJS - konferencji pomagającej w tworzeniu lepszego JavaScript. Zarezerwuj teraz nagenerateconf.com
