Obsah
- PWA vs. natívne aplikácie: Aký je rozdiel?
- Progresívne webové aplikácie: Budovanie pre web
- Silné stránky PWA
- Slabé stránky PWA
- Reagovať natívne
- Silné stránky reagujú natívne
- Slabé stránky Reagovať natívne
- NativeScript
- Silné stránky jazyka NativeScript
- Slabiny natívneho jazyka
Aký prístup by ste mali zvoliť pri vytváraní aplikácie? Mali by ste sa vydať cestou PWA / webových technológií alebo by ste mali ísť natívne a navrhovať pre konkrétne platformy? Obe možnosti majú svoje klady a zápory a v tomto článku sa zameriavame na niekoľko populárnych možností používaných pri vytváraní webových a natívnych aplikácií.
PWA (Progresívne webové aplikácie) alias webové aplikácie, sú postavené na populárnych webových technológiách HTML, CSS a JavaScript a fungujú vo webovom prehliadači. (Vyskúšajte niektoré zo základných značiek HTML, ktoré vám pri zostavovaní pomôžu.) PWA sú efektívne mobilné weby navrhnuté tak, aby vyzerali ako aplikácia, a použitie webových rozhraní API im poskytuje podobné funkcie ako natívna aplikácia.
Ďalšie rady týkajúce sa tvorby aplikácií nájdete v našom príspevku o tom, ako vytvoriť aplikáciu. Ak sa jedná o web, ktorý chcete vytvoriť, pozrite si týchto najlepších tvorcov webových stránok a webhostingové služby.
PWA vs. natívne aplikácie: Aký je rozdiel?
Výhodou progresívnych webových aplikácií je, že sú inštalovateľné a zverejnené na zariadení bez potreby obchodu s aplikáciami. Súčasťou tohto procesu je Manifest webových aplikácií, ktorý vývojárom umožňuje ovládať, ako sa aplikácia zobrazuje a ako sa spúšťa. Weboví dizajnéri / vývojári frontendu už tiež budú mať zručnosti potrebné na okamžité začatie budovania. Na rozdiel od natívnych aplikácií sa nemusíte učiť nový jazyk.
Natívne aplikácie sú zostavené s ohľadom na konkrétny OS - tj. iOS a Android - a na splnenie tohto účelu používajú rámec alebo jazyk. Aplikácie pre iOS zvyčajne používajú Xcode alebo Swift a aplikácie pre Android JavaScript. V tomto článku sa ale sústredíme na niekoľko otvorených rámcov založených na JavaScripte - React Native a NativeScript - ktoré fungujú pre obe platformy.
Výhodou natívnych aplikácií je, že zvyčajne prinášajú lepšiu funkčnosť, pretože lepšie využívajú hardvér a softvér zariadení, sú rýchlejšie a pohotovejšie a získate záruku kvality prostredníctvom hodnotení v obchodoch s aplikáciami. Bude to však znamenať, že sa musíte naučiť používať konkrétny rámec alebo knižnicu.
Tu sa pozrieme na tri rôzne možnosti - jednu pre web (PWA) a dve pre natívne (React Native, NativeScript) - pre vytvorenie aplikácie. Prebiehame cez to, ako fungujú, čo môžu robiť, a pozrieme sa na ich silné a slabé stránky, aby sme vám pomohli rozhodnúť sa, ktorú možnosť by ste si mali zvoliť pri zostavovaní svojej aplikácie.
Progresívne webové aplikácie: Budovanie pre web
Silné stránky PWA
- Aplikácie fungujú aj v prehliadači
- Distribúcia: prehliadače, podniky a obchody s aplikáciami
- Môže používať rámce React, Angular, Vue, vanilla alebo iné
Slabé stránky PWA
- Žiadny prístup ku každému natívnemu rozhraniu API
- Schopnosti a distribúcia v obchodoch pre iOS a iPadOS sú obmedzené
- Je to v neustálom vývoji
PWA sú súčasným dizajnovým vzorom na vytváranie vysoko výkonných offline inštalovateľných aplikácií iba pomocou webového zásobníka: HTML, CSS, JavaScript a API prehliadačov. Vďaka servisnému pracovníkovi a špecifikáciám manifestu webovej aplikácie môžeme teraz po inštalácii pre Android, iOS, iPadOS, Windows, macOS, Chrome OS a Linux vytvoriť prvotriedne prostredie pre aplikáciu.
Na vytváranie PWA môžete použiť ľubovoľnú architektúru: zo serverového, vanilkového JavaScriptu, React, Vue, Angular alebo iných rámcov na strane klienta. Môže to byť jednostránková aplikácia alebo viacstránková webová aplikácia a definujeme, ako budeme podporovať používateľov v režime offline.
V tomto prístupe nemusíme baliť a podpisovať zdroje našej aplikácie: súbory iba hostíme na webovom serveri a servisný pracovník bude zodpovedný za ukladanie súborov do pamäte cache v klientovi a po inštalácii ich bude slúžiť. To tiež znamená, že ak je potrebné aplikáciu aktualizovať, stačí zmeniť súbory na serveri a logika servisného pracovníka bude zodpovedná za ich aktualizáciu na zariadeniach používateľov bez zásahu používateľa alebo obchodu s aplikáciami.
Z hľadiska distribúcie je najbežnejšou metódou prehliadač. Používatelia si aplikáciu nainštalujú z prehľadávača pomocou položky ponuky Pridať na domovskú obrazovku alebo Inštalovať, prijatím pozvania na inštaláciu alebo použitím vlastného používateľského rozhrania webovej aplikácie na kompatibilných platformách. Stojí za zmienku, že Apple odmieta čisté PWA zverejnené v App Store a vyzýva vývojárov webu, aby ich distribuovali cez Safari.
Používateľské rozhranie je čisto spravované webovým runtime, čo znamená, že webový dizajnér je zodpovedný za vykreslenie každého ovládacieho prvku na obrazovke. Ak používate UI framework, napríklad Ionic, alebo knižnicu Material Design, HTML a CSS budú napodobňovať natívne rozhrania v systéme Android alebo iOS, ale nie je to povinné.Pri vytváraní PWA je použitie techník výkonu webu povinné, aby bola zaistená dobrá používateľská skúsenosť.
Pokiaľ ide o schopnosti, PWA bude mať prístup iba k API dostupným v engine prehliadača na tejto platforme a nemôže byť rozšírený o natívny kód - s výnimkou distribúcií PWA v obchode s aplikáciami. V tejto veci sú iOS a iPadOS obmedzenejšími platformami pre PWA, zatiaľ čo Chrome (pre Android a desktopové OS) má väčšiu dostupnosť a usilovne pracuje na pridávaní všetkých možných API do JavaScriptu pomocou projektu Fugu.
- Najlepšie cloudové úložisko: Vyberte si tú pravú voľbu pre vás.
Reagovať natívne
Silné stránky reagujú natívne
- Rovnaké vzory ako pri React.js
- Niektoré webové rozhrania API sú zverejnené
- Podpora webu a počítača
Slabé stránky Reagovať natívne
- Súčasti webového používateľského rozhrania nemožno znova použiť
- Natívny most potrebuje trochu práce
- Potrebné sú skúsenosti s reakciou
React Native je open-source framework komponentov založený na JavaScripte, sponzorovaný Facebookom, ktorý využíva návrhové vzory React a jazyk JavaScript na kompiláciu natívnych aplikácií pre iOS, iPadOS a Android z jedného zdrojového kódu.
Na vykreslenie však nie sú akceptované žiadne prvky HTML; platné sú iba ďalšie natívne komponenty. Preto namiesto vykreslenia a div> s p> a a vstup> element s JSX, budete vykresľovať a Zobraziť> s Text> a a Textový vstup>. Pre štýlové komponenty stále používate CSS a rozloženie je definované pomocou Flexboxu.
Používateľské rozhranie sa nebude vykresľovať v DOM prehliadača, ale pomocou natívnych knižníc používateľského rozhrania v systémoch Android a iOS. Preto a Tlačidlo> v ReactNative sa stane inštanciou UIButton pre iOS a Windows android.widget.Button trieda pre Android; v React Native nie je zapojený žiadny webový runtime.
Celý kód JavaScript sa však vykoná vo virtuálnom stroji JavaScriptu na zariadení, takže pri kompilácii aplikácie neexistuje konverzia kódu JavaScript na skutočný natívny kód. Pre webových vývojárov existuje sada známych rozhraní API, ako napríklad Fetch API, WebSockets a časovače prehliadača: setInterval a requestAnimationFrame. Ďalšie schopnosti sú na platforme nasadené prostredníctvom vlastných rozhraní API, ako sú napríklad animácie.
Môžete začať rýchly projekt React Native s dvoma bezplatnými CLI: Expo alebo pokročilejšou a oficiálnejšou ReactNative CLI. Ak používate oficiálne rozhranie CLI, potrebujete aj Android Studio na zostavenie a otestovanie aplikácie pre Android a Xcode, aby bolo možné vykonať rovnaké kroky v systémoch iOS a iPadOS, takže pre túto platformu budete potrebovať počítač so systémom macOS.
Aplikácia React Native kompiluje natívne aplikácie pre iOS a Android, čo znamená, že distribúcia vašej aplikácie sa bude riadiť rovnakými pravidlami ako ostatné natívne aplikácie: obchody s aplikáciami pre verejné aplikácie, podniková distribúcia a testovanie verzie alfa / beta. Aplikáciu zvyčajne nemôžete distribuovať prostredníctvom prehľadávača, aj keď vám môžu pomôcť platformy React Native for Web a Microsoft React Native for Windows.
NativeScript
Silné stránky jazyka NativeScript
- Dobré nástroje na kódovanie a testovanie
- Rozsiahla galéria aplikácií pripravených na hranie
- Všetky rozhrania API pre Android a iOS sú sprístupnené v JS
Slabiny natívneho jazyka
- Malá komunita
- Súčasti webového používateľského rozhrania nemožno znova použiť
- Žiadna podpora pre web, desktop alebo React
NativeScript nie je taký známy ako React Native, ale súťaží v rovnakom odbore: natívne aplikácie pre iOS a Android z JavaScriptu a webových rámcov. Umožňuje vám používať JavaScript alebo TypeScript a súbor používateľského rozhrania XML na vytváranie natívnych aplikácií. Podporuje tiež Angular a Vue hneď po vybalení, takže je to skvelé riešenie pre vývojárov zvyknutých na tieto rámce.
Výhody jazyka NativeScript sú zreteľnejšie, ak používate funkciu Angular alebo Vue. Pre Angular vytvoríte rovnaké komponenty, na aké ste zvyknutí, ale pre šablónu použijete namiesto HTML namiesto XML XML vrátane všetkých väzieb údajov. V XML namiesto a div> s p> a an img>, umiestnite a StackLayout> s Štítok> a an Obrázok> zložka.
CSS a Sass sú v prehliadači podporované podobnými štýlmi ako CSS. Smerovanie a správa siete sa vykonávajú prostredníctvom implementácie štandardných uhlových služieb. Pre Vue je to niečo podobné; šablónu napíšete namiesto XML a nebudete pri tom používať HTML šablóna> prvok vo vašom súbore .vue.
NativeScript obsahuje kolekciu komponentov, ktoré sa potom mapujú na natívny ovládací prvok Android alebo iOS, takže keď vykreslíte zoznam alebo výber, bude to natívna aplikácia s rovnakou myšlienkou ako v React Native.
Váš kód JavaScript alebo TypeScript (transpilovaný) sa vykonáva vo virtuálnom stroji JavaScript v zariadení s mostom do / z natívneho prostredia. V tomto moste sú vystavené celé natívne rozhrania API zo systému Android alebo iOS / iPadOS, takže napriek prístupu k rozhraniam API pre rôzne platformy môžeme vytvoriť inštanciu alebo zavolať akýkoľvek kód Java alebo Objective-C z jazyka JavaScript / TypeScript a NativeScript bude zhromažďovať dátové typy.
NativeScript má skvelú podporu pre nástroje vrátane VS kódových doplnkov, CLI, testovacieho systému hot-reload a aplikácie NativeScript ihrisko, takže pri testovaní nemusíte inštalovať všetky závislosti, ako aj niekoľko ďalších služieb, napríklad online detské ihrisko.
Nakoniec NativeScript kompiluje aplikáciu pre Android a iOS, ktorú je možné nainštalovať z oficiálnych distribučných kanálov a obchodov s aplikáciami, iba ak dodržiavate ich pravidlá, podnikovú distribúciu a testovanie verzie alfa / beta. Spravidla nebude možné distribuovať aplikácie z prehliadača a pre túto platformu neexistujú žiadne riešenia pre aplikácie pre stolné počítače.
Tento článok bol pôvodne publikovaný v vydanie 325 net, svetovo najpredávanejší časopis pre webových dizajnérov a vývojárov. Kúpiť vydanie 325 alebo prihlásiť sa na odber do siete.
Pripojte sa k nám v apríli 2020 s našou zostavou superhviezd JavaScriptu na GenerateJS - konferencii, ktorá vám pomôže vytvoriť lepší JavaScript. Rezervovať teraz nagenerateconf.com
