Vsebina
- PWA v primerjavi z izvornimi aplikacijami: Kakšna je razlika?
- Progresivne spletne aplikacije: gradnja za splet
- Prednosti PWA
- Slabosti PWA
- Reagiraj Native
- Prednosti React Native
- Slabosti React Native
- NativeScript
- Prednosti NativeScripta
- Slabosti NativeScripta
Kateri pristop bi morali uporabiti pri izdelavi aplikacije? Ali bi morali ubrati pot PWA / spletnih tehnologij ali bi morali iti domače in oblikovati posebne platforme? Obe možnosti imata svoje prednosti in slabosti, v tem članku pa se osredotočimo na nekaj priljubljenih izbir, ki se uporabljajo za ustvarjanje spletnih in izvornih aplikacij.
PWA (Progressive Web Apps), ki so tudi spletne aplikacije, so zgrajene s priljubljenimi spletnimi tehnologijami HTML, CSS in JavaScript in delujejo v spletnem brskalniku. (Oglejte si nekatere bistvene oznake HTML za pomoč pri gradnji.) PWA so dejansko mobilna spletna mesta, zasnovana tako, da izgledajo kot aplikacija, uporaba spletnih API-jev pa jim daje podobne funkcije kot izvorna aplikacija.
Za več nasvetov o izdelavi aplikacij glejte našo objavo o tem, kako narediti aplikacijo, ali če gre za spletno mesto, ki ga želite ustvariti, si oglejte te najboljše graditelje spletnih strani in storitve spletnega gostovanja.
PWA v primerjavi z izvornimi aplikacijami: Kakšna je razlika?
Prednost naprednih spletnih aplikacij je, da jih je mogoče namestiti in delovati v napravi brez potrebe po trgovini z aplikacijami. Del postopka je tudi manifest spletnih aplikacij, ki razvijalcem omogoča nadzor nad prikazom in zagonom aplikacije. Tudi spletni oblikovalci / razvijalci bodo že imeli nabor spretnosti, potrebnih za takojšnjo gradnjo. Za razliko od domačih aplikacij se novega jezika ni treba učiti.
Izvorne aplikacije so zgrajene z mislijo na določen OS - tj. iOS in Android - in za dosego tega cilja uporabite ogrodje ali jezik. Aplikacije za iOS običajno uporabljajo Xcode ali Swift, za Android pa JavaScript. V tem članku se osredotočamo na nekaj odprtokodnih ogrodjev, ki temeljijo na JavaScript - React Native in NativeScript -, ki delujejo na obeh platformah.
Prednosti izvornih aplikacij so v tem, da običajno prinašajo boljšo funkcionalnost, saj bolje izkoriščajo strojno in programsko opremo naprav, so hitrejše in bolj odzivne ter zagotavljajo kakovost, čeprav ocene v trgovinah z aplikacijami. Toda to bo pomenilo, da se morate naučiti uporabljati določen okvir ali knjižnico.
Tu si ogledujemo tri različne možnosti - eno za splet (PWA) in dve za domači (React Native, NativeScript) - za izdelavo aplikacije. Preučujemo, kako delujejo, kaj lahko počnejo, in preučujemo njihove prednosti in slabosti, da se lažje odločimo, katero možnost bi morali izbrati za izdelavo aplikacije.
Progresivne spletne aplikacije: gradnja za splet
Prednosti PWA
- Aplikacije delujejo tudi v brskalniku
- Distribucija: brskalniki, podjetja in trgovine z aplikacijami
- Lahko uporablja React, Angular, Vue, vanilije ali druge ogrodje
Slabosti PWA
- Ni dostopa do vseh izvornih API-jev
- Možnosti in distribucija trgovin v iOS in iPadOS so omejene
- Je v nenehnem razvoju
PWA so trenutni vzorec načrtovanja za ustvarjanje visoko zmogljivih aplikacij, ki jih je mogoče namestiti brez povezave, in jih je mogoče namestiti z uporabo samo spletnega sklada: HTML, CSS, JavaScript in API-ji brskalnikov. Zahvaljujoč serviserju in specifikacijam manifesta spletne aplikacije lahko zdaj po namestitvi za Android, iOS, iPadOS, Windows, macOS, Chrome OS in Linux ustvarimo prvovrstno izkušnjo aplikacije.
Če želite ustvariti PWA-je, lahko uporabite katero koli arhitekturo: na strani strežnika, vanilije JavaScript, React, Vue, Angular ali drugih okvirov na strani odjemalca. Lahko gre za enostransko ali večstransko spletno aplikacijo in določimo, kako bomo podpirali uporabnike brez povezave.
Pri tem pristopu nam ni treba pakirati in podpisovati virov naše aplikacije: datoteke le gostimo v spletnem strežniku, serviser pa bo odgovoren za predpomnjenje datotek v odjemalcu in jih bo po namestitvi stregel. To pomeni tudi, da če je treba aplikacijo posodobiti, samo spremenite datoteke na strežniku in logika serviserja bo odgovorna za njihovo posodabljanje v uporabniških napravah brez posredovanja uporabnika ali trgovine z aplikacijami.
Kar zadeva distribucijo, je najpogostejši način brskalnik. Uporabniki aplikacijo namestijo iz brskalnika z uporabo elementa menija Dodaj na začetni zaslon ali Namesti, s sprejetjem povabila k namestitvi ali z uporabo uporabniškega vmesnika spletne aplikacije po meri na združljivih platformah. Omeniti velja, da Apple zavrača čiste PWA-je, objavljene v App Store, in spodbuja spletne razvijalce, da jih distribuirajo prek Safarija.
Uporabniški vmesnik izključno upravlja spletno izvajanje, kar pomeni, da je spletni oblikovalec odgovoren za upodabljanje vsakega nadzora na zaslonu. Če uporabljate ogrodje uporabniškega vmesnika, na primer Ionic, ali knjižnico Material Design, bosta HTML in CSS posnemala izvorne vmesnike v sistemih Android ali iOS, vendar to ni obvezno.Pri izvajanju PWA je uporaba tehnik spletne uspešnosti obvezna, da se ohrani dobra uporabniška izkušnja.
Kar zadeva zmožnosti, bo imel PWA dostop samo do API-jev, ki so na voljo v brskalniškem mehanizmu na tej platformi, in ga ni mogoče razširiti z izvorno kodo - z izjemo distribucij aplikacij PWA. Glede tega sta iOS in iPadOS bolj omejeni platformi za PWA, medtem ko ima Chrome (za Android in namizne OS) večjo razpoložljivost in si močno prizadeva dodati vse možne API-je v JavaScript s projektom Fugu.
- Najboljše shranjevanje v oblaku: izberite pravo možnost zase.
Reagiraj Native
Prednosti React Native
- Enaki vzorci kot pri React.js
- Nekateri spletni API-ji so izpostavljeni
- Podpora za splet in namizje
Slabosti React Native
- Komponent spletnega uporabniškega vmesnika ni mogoče znova uporabiti
- Domači most potrebuje nekaj dela
- Potrebne so reakcijske izkušnje
React Native je odprtokodni okvir komponent na osnovi JavaScript, ki ga sponzorira Facebook in uporablja vzorce oblikovanja React ter jezik JavaScript za sestavljanje izvornih aplikacij za iOS, iPadOS in Android iz ene izvorne kode.
Toda nobeni elementi HTML niso sprejemljivi za upodabljanje; veljavne so samo druge izvorne komponente. Zato namesto upodabljanja a div> z p> in a vhod> element z JSX, boste upodobili Pogled> z Besedilo> in a TextInput>. Za oblikovanje komponent še vedno uporabljate CSS, postavitev pa je definirana s Flexboxom.
Uporabniški vmesnik ne bo upodobljen v DOM-u brskalnika, temveč z uporabo knjižnic izvornega uporabniškega vmesnika v sistemih Android in iOS. Zato a Gumb> v ReactNative bo postal primerek UIButton na iOS in android.widget.Button razred na Androidu; v React Native ni spletnega izvajanja.
Vendar se bo vsa koda JavaScript izvedla v navideznem stroju JavaScript v napravi, zato pri sestavljanju aplikacije ni pretvorbe JavaScript v resnično izvorno kodo. Obstaja nabor dobro znanih API-jev za spletne razvijalce, kot so Fetch API, WebSockets in časovniki brskalnika: setInterval in requestAnimationFrame. Druge sposobnosti so na platformi razporejene prek API-jev po meri, kot so animacije.
Hiter projekt React Native lahko začnete z dvema brezplačnima CLI: Expo ali bolj naprednim in uradnim ReactNative CLI. Če uporabljate uradni CLI, potrebujete tudi Android Studio za prevajanje in preizkušanje aplikacije Android in Xcode, da to storite v iOS in iPadOS, zato boste za to platformo potrebovali računalnik macOS.
React Native prevaja izvorne aplikacije za iOS in Android, kar pomeni, da bo distribucija vaše aplikacije sledila enakim pravilom kot druge izvorne aplikacije: trgovine z aplikacijami za javne aplikacije, distribucija v podjetju in testiranje alfa / beta. Običajno aplikacije ne morete distribuirati prek brskalnika, čeprav vam lahko pomagata React Native for Web in Microsoftova React Native for Windows.
NativeScript
Prednosti NativeScripta
- Dobra orodja za kodiranje in testiranje
- Obsežna galerija aplikacij, pripravljenih za igranje
- Vsi API-ji za Android in iOS so izpostavljeni v JS
Slabosti NativeScripta
- Majhna skupnost
- Komponent spletnega uporabniškega vmesnika ni mogoče ponovno uporabiti
- Ni podpore za splet, namizje ali React
NativeScript ni tako znan kot React Native, vendar tekmuje na istem področju: izvorne aplikacije za iOS in Android iz JavaScript in spletnih okvirov. Omogoča uporabo JavaScript ali TypeScript in datoteke uporabniškega vmesnika XML za ustvarjanje izvornih aplikacij. Prav tako podpira Angular in Vue takoj, zato je odlična rešitev za razvijalce, ki so navajeni na te okvire.
Prednosti NativeScripta so jasnejše, če uporabljate Angular ali Vue. Za Angular ustvarite iste komponente, ki ste jih vajeni, vendar namesto HTML-ja za predlogo uporabljate XML, vključno z vsemi vezmi podatkov. V XML namesto div> z p> in an img>, boste postavili StackLayout> z Oznaka> in an Slika> komponenta.
CSS in Sass sta v brskalniku podprta s podobnimi slogi kot CSS. Usmerjanje in upravljanje omrežja se izvajata z izvajanjem standardnih storitev Angular. Za Vue je nekaj podobnega; predlogo napišete v XML, namesto da bi v njej uporabljali HTML predloga> v datoteki .vue.
NativeScript vključuje zbirko komponent, ki se nato preslikajo v izvorni nadzor Android ali iOS, tako da bo, ko upodabljate seznam ali izbirnik, izvorna aplikacija z uporabo iste ideje kot v React Native.
Koda JavaScript ali TypeScript (prevedena) se izvede v navideznem računalniku JavaScript v napravi z mostom v / iz domačega okolja. V tem mostu so izpostavljeni celotni izvorni API-ji za Android ali iOS / iPadOS, tako da lahko kljub dostopu do API-jev med različnimi platformami ustvarimo ali pokličemo katero koli kodo Java ali Objective-C iz JavaScript / TypeScript in NativeScript bo določil tipe podatkov.
NativeScript ima odlično podporo za orodja, vključno z vtičniki kode VS, CLI-jem, sistemom za vročo vnovično nalaganje in aplikacijo za igrišče NativeScript, zato vam med testiranjem ni treba namestiti vseh odvisnosti, pa tudi več dodatnih storitev, kot je spletna igrišče.
Končno NativeScript sestavi aplikacijo za Android in iOS, ki jo je mogoče namestiti iz uradnih distribucijskih kanalov in trgovin z aplikacijami, le če spoštujete njihova pravila, distribucijo v podjetju in testiranje alfa / beta. Običajno ne bo mogoče distribuirati aplikacij iz brskalnika in za to platformo ni rešitev za namizne aplikacije.
Ta članek je bil prvotno objavljen v številka 325 of net, najbolje prodajana revija na svetu za spletne oblikovalce in razvijalce. Nakup številka 325 ali naročite se v mrežo.
Pridružite se nam aprila 2020 z našo vrsto superzvezdnic JavaScript na GenerateJS - konferenca, ki vam pomaga zgraditi boljši JavaScript. Rezervirajte zdaj nageneriraticonf.com
