Obsah
- PWA vs. nativní aplikace: Jaký je rozdíl?
- Progresivní webové aplikace: Budování pro web
- Silné stránky PWA
- Slabé stránky PWA
- Reagovat nativní
- Silné stránky React Native
- Slabé stránky React Native
- Nativní skript
- Silné stránky NativeScript
- Slabiny nativního skriptu
Jaký přístup byste měli zvolit při vytváření aplikace? Měli byste se vydat cestou PWA / webových technologií nebo byste měli jít nativně a navrhnout pro konkrétní platformy? Obě možnosti mají své klady a zápory a v tomto článku se soustředíme na několik populárních možností používaných k vytváření webových a nativních aplikací.
PWA (Progressive Web Apps) aka webové aplikace, jsou postaveny s populárními webovými technologiemi HTML, CSS a JavaScript a fungují ve webovém prohlížeči. (Podívejte se na některé základní značky HTML, které vám pomohou s vašimi sestaveními.) PWA jsou efektivně mobilní weby navržené tak, aby vypadaly jako aplikace, a používání webových API jim poskytuje funkce podobné nativní aplikaci.
Další rady ohledně vytváření aplikací najdete v našem příspěvku o tom, jak vytvořit aplikaci. Pokud se jedná o web, který chcete vytvořit, podívejte se na tyto špičkové nástroje pro tvorbu webových stránek a webhostingové služby.
PWA vs. nativní aplikace: Jaký je rozdíl?
Progresivní webové aplikace mají tu výhodu, že jsou instalovatelné a živé na zařízení bez nutnosti obchodu s aplikacemi. Součástí procesu je Web App Manifest, který vývojářům umožňuje řídit, jak se aplikace objeví a jak se spustí. Také weboví designéři / vývojáři frontendu již budou mít dovednosti potřebné k okamžitému zahájení vytváření. Na rozdíl od nativních aplikací se nemusíte učit nový jazyk.
Nativní aplikace jsou vytvořeny s ohledem na konkrétní operační systém - tj. iOS a Android - a ke splnění tohoto účelu použijte rozhraní nebo jazyk. Aplikace pro iOS obvykle používají Xcode nebo Swift a aplikace pro Android, JavaScript. V tomto článku se ale soustředíme na několik open-source frameworků založených na JavaScriptu - React Native a NativeScript - které fungují pro obě platformy.
Výhody nativních aplikací spočívají v tom, že obvykle přinášejí lepší funkčnost, protože lépe využívají hardware a software zařízení, jsou rychlejší a citlivější a zaručují kvalitu prostřednictvím hodnocení v obchodech s aplikacemi. Bude to ale znamenat, že se musíte naučit používat konkrétní rámec nebo knihovnu.
Zde se podíváme na tři různé možnosti - jednu pro web (PWA) a dvě pro nativní (React Native, NativeScript) - pro vytváření aplikace. Projdeme si, jak fungují, co mohou dělat, a podíváme se na jejich silné a slabé stránky, abychom vám pomohli rozhodnout, kterou možnost byste si měli zvolit při vytváření aplikace.
Progresivní webové aplikace: Budování pro web
Silné stránky PWA
- Aplikace fungují také v prohlížeči
- Distribuce: prohlížeče, podniky a obchody s aplikacemi
- Může využívat React, Angular, Vue, vanilla nebo jiné rámce
Slabé stránky PWA
- Žádný přístup ke každému nativnímu API
- Schopnosti a distribuce v obchodech pro iOS a iPadOS jsou omezené
- Je to v neustálém vývoji
PWA jsou aktuální návrhový vzor pro vytváření vysoce výkonných offline aplikací s možností instalace pouze pomocí webového zásobníku: HTML, CSS, JavaScript a API prohlížečů. Díky servisnímu pracovníkovi a specifikacím manifestu webové aplikace můžeme nyní po instalaci pro Android, iOS, iPadOS, Windows, macOS, Chrome OS a Linux vytvořit prvotřídní prostředí aplikace.
Chcete-li vytvořit PWA, můžete použít libovolnou architekturu: ze serveru, vanilkového JavaScriptu, React, Vue, Angular nebo jiných rámců na straně klienta. Může to být jednostránková aplikace nebo vícestránková webová aplikace a my definujeme, jak budeme podporovat uživatele v režimu offline.
V tomto přístupu nemusíme balit a podepisovat prostředky naší aplikace: soubory pouze hostujeme na webovém serveru a servisní pracovník bude odpovědný za ukládání do mezipaměti soubory v klientovi a po instalaci je sloužit. To také znamená, že pokud aplikace potřebuje aktualizaci, stačí změnit soubory na serveru a logika pracovníka služby bude odpovědná za jejich aktualizaci na zařízeních uživatelů bez zásahu uživatele nebo obchodu s aplikacemi.
Z hlediska distribuce je nejběžnější metodou prohlížeč. Uživatelé instalují aplikaci z prohlížeče pomocí položky nabídky Přidat na domovskou obrazovku nebo Instalovat, přijetím pozvání k instalaci nebo pomocí vlastního uživatelského rozhraní webové aplikace na kompatibilních platformách. Stojí za zmínku, že Apple odmítá čisté PWA publikované v App Store a podporuje webové vývojáře, aby je distribuovali prostřednictvím Safari.
Uživatelské rozhraní je čistě spravováno webovým modulem runtime, což znamená, že webový designér je zodpovědný za vykreslení každého ovládacího prvku na obrazovce. Pokud používáte rozhraní uživatelského rozhraní, například Ionic, nebo knihovnu Material Design, napodobí HTML a CSS nativní rozhraní v systému Android nebo iOS, ale není to povinné.Při provádění PWA je použití technik výkonu webu povinné, aby byla zajištěna dobrá uživatelská zkušenost.
Pokud jde o schopnosti, PWA bude mít přístup pouze k API dostupným v enginu prohlížeče na této platformě a nelze ji rozšířit o nativní kód - s výjimkou distribucí PWA v obchodě App Store. V této věci jsou iOS a iPadOS omezenějšími platformami pro PWA, zatímco Chrome (pro Android a desktopové OS) má větší dostupnost a tvrdě pracuje na přidání všech možných API do JavaScriptu s projektem Fugu.
- Nejlepší cloudové úložiště: Vyberte si tu správnou možnost.
Reagovat nativní
Silné stránky React Native
- Stejné vzory jako u React.js
- Některá webová rozhraní API jsou vystavena
- Podpora webu a počítače
Slabé stránky React Native
- Nelze znovu použít komponenty webového uživatelského rozhraní
- Nativní most potřebuje nějakou práci
- Je nutná zkušenost s reakcí
React Native je open-source framework komponent založený na JavaScriptu, sponzorovaný Facebookem, který využívá návrhové vzory React a jazyk JavaScript ke kompilaci nativních aplikací pro iOS, iPadOS a Android z jednoho zdrojového kódu.
K vykreslení však nejsou přijaty žádné prvky HTML; platné jsou pouze ostatní nativní komponenty. Proto místo vykreslení a div> s p> a vstup> prvek s JSX, vykreslíte a Zobrazit> s Text> a Textový vstup>. U stylingových komponent stále používáte CSS a rozvržení je definováno prostřednictvím Flexboxu.
Uživatelské rozhraní se nebude vykreslovat v DOM prohlížeče, ale pomocí knihoven nativního uživatelského rozhraní v systémech Android a iOS. Proto a Tlačítko> v ReactNative se stane instancí UIButton na iOS a android.widget.Button třída pro Android; v React Native není zapojen žádný webový běh.
Veškerý kód JavaScriptu se však provede ve virtuálním stroji JavaScript na zařízení, takže při kompilaci aplikace neexistuje žádný převod JavaScriptu na skutečný nativní kód. Pro webové vývojáře existuje sada dobře známých rozhraní API, jako je Fetch API, WebSockets a časovače prohlížeče: setInterval a requestAnimationFrame. Další schopnosti jsou nasazeny na platformě prostřednictvím vlastních API, jako jsou animace.
Můžete zahájit rychlý projekt React Native se dvěma bezplatnými CLI: Expo nebo pokročilejší a oficiální ReactNative CLI. Pokud používáte oficiální rozhraní příkazového řádku, potřebujete také Android Studio ke kompilaci a testování aplikace pro Android a Xcode, abyste mohli dělat totéž na iOS a iPadOS, takže pro tuto platformu budete potřebovat počítač macOS.
React Native kompiluje nativní aplikace pro iOS a Android, což znamená, že distribuce vaší aplikace se bude řídit stejnými pravidly jako ostatní nativní aplikace: obchody s aplikacemi pro veřejné aplikace, podniková distribuce a testování alfa / beta. Typicky nemůžete distribuovat aplikaci prostřednictvím prohlížeče, i když vám mohou pomoci platformy React Native pro Web a Microsoft React Native pro Windows.
Nativní skript
Silné stránky NativeScript
- Dobré nástroje pro kódování a testování
- Rozsáhlá galerie aplikací připravených ke hře
- Všechna rozhraní API pro Android a iOS jsou vystavena v JS
Slabiny nativního skriptu
- Malá komunita
- Nelze znovu použít komponenty webového uživatelského rozhraní
- Žádná podpora pro web, desktop nebo React
NativeScript není tak známý jako React Native, ale soutěží ve stejném oboru: nativní aplikace pro iOS a Android z JavaScriptu a webových frameworků. Umožňuje vám používat JavaScript nebo TypeScript a soubor uživatelského rozhraní XML k vytváření nativních aplikací. Rovněž podporuje Angular a Vue hned po vybalení, takže je to skvělé řešení pro vývojáře zvyklé na tyto rámce.
Výhody NativeScript jsou jasnější, když používáte Angular nebo Vue. Pro Angular vytvoříte stejné komponenty, na které jste zvyklí, ale použijete místo šablony XML místo HTML, včetně všech datových vazeb. V XML namísto a div> s p> a obr, umístíte a StackLayout> s Štítek> a Obrázek> součástka.
CSS a Sass jsou podporovány podobnými styly jako CSS v prohlížeči. Směrování a správa sítě se provádějí prostřednictvím implementací standardních úhlových služeb. Pro Vue je to něco podobného; šablonu napíšete ve formátu XML namísto použití HTML ve stejném formátu šablona> prvek ve vašem souboru .vue.
NativeScript obsahuje kolekci komponent, které jsou poté mapovány na nativní ovládací prvek Android nebo iOS, takže když vykreslíte seznam nebo výběr, bude to nativní aplikace, používající stejný nápad jako v React Native.
Váš kód JavaScript nebo TypeScript (transpilovaný) se provádí ve virtuálním stroji JavaScript na zařízení s mostem do / z nativního prostředí. V tomto mostu jsou vystaveny celé nativní API z Androidu nebo iOS / iPadOSu, takže i přes přístup k API pro různé platformy můžeme vytvořit instanci nebo zavolat jakýkoli kód Java nebo Objective-C z JavaScriptu / TypeScriptu a NativeScript bude zařazovat datové typy.
NativeScript má skvělou podporu pro nástroje, včetně pluginů VS kódu, rozhraní příkazového řádku, testovacího systému hot-reload a aplikace hřiště NativeScript, takže při testování nemusíte instalovat všechny závislosti a také několik dalších služeb, jako je online hřiště.
Nakonec NativeScript kompiluje pouze aplikaci pro Android a iOS, kterou lze nainstalovat z oficiálních distribučních kanálů a obchodů s aplikacemi, pokud dodržujete jejich pravidla, podnikovou distribuci a testování alfa / beta. Typicky nebude možné distribuovat aplikace z prohlížeče a pro tuto platformu neexistují žádná řešení pro desktopové aplikace.
Tento článek byl původně publikován v číslo 325 net, světově nejprodávanější časopis pro webové designéry a vývojáře. Koupit číslo 325 nebo předplatit do sítě.
Připojte se k nám v dubnu 2020 s naší řadou superhvězd JavaScriptu na GenerateJS - konferenci, která vám pomůže vytvořit lepší JavaScript. Zarezervovat nyní nagenerateconf.com
