Sisu
- PWA-d vs kohalikud rakendused: mis vahe on?
- Progressiivsed veebirakendused: veebi loomine
- PWA tugevused
- PWA-de nõrkused
- Reageeri Native
- React Native tugevused
- React Native nõrkused
- NativeScript
- NativeScripti tugevused
- NativeScripti nõrkused
Millist lähenemist peaksite rakenduse loomisel kasutama? Kas peaksite kasutama PWA / veebitehnoloogia marsruuti või peaksite minema omale ja kujundama konkreetseid platvorme? Mõlemal võimalusel on oma plussid ja miinused ning selles artiklis keskendume mõnele populaarsele valikule, mida kasutatakse veebi- ja omarakenduste loomiseks.
PWA-d (Progressive Web Apps) ehk veebirakendused on loodud populaarsete veebitehnoloogiate HTML, CSS ja JavaScripti abil ning töötavad veebibrauseris. (Tutvuge mõningate oluliste HTML-i siltidega, mis aitavad teil ehitada.) PWA-d on tõhusalt mobiilsed veebisaidid, mis on loodud rakenduse väljanägemiseks ja veebi-API-de kasutamine annab neile funktsionaalsuse, mis sarnaneb kohalikule rakendusele.
Rakenduse loomise kohta lisateabe saamiseks vaadake meie postitust rakenduse loomise kohta või kui see on sait, mille soovite luua, vaadake neid populaarseimaid veebiarendajaid ja veebimajutusteenuseid.
PWA-d vs kohalikud rakendused: mis vahe on?
Progressiivsete veebirakenduste eeliseks on see, et neid saab seadmesse installida ja need on rakenduste poodi vajamata. Ja osa protsessist on veebirakenduste manifest, mis võimaldab arendajatel kontrollida rakenduse ilmumist ja käivitamist. Samuti on veebidisaineritel / esiotsa arendajatel juba vajalikud oskused, et kohe ehitama asuda. Erinevalt omakeelsetest rakendustest pole vaja uut keelt õppida.
Natiivrakendused on üles ehitatud konkreetset operatsioonisüsteemi silmas pidades - st. iOS ja Android - ning kasutage selle eesmärgi täitmiseks raamistikku või keelt. iOS-i rakendustes kasutatakse tavaliselt Xcode'i või Swifti ning Androidi rakendustes JavaScripti. Kuid selle artikli puhul keskendume paarile JavaScripti-põhisele avatud lähtekoodiga raamistikule - React Native ja NativeScript -, mis töötavad mõlema platvormi jaoks.
Natiivrakenduste eelised on need, et need toovad tavaliselt parema funktsionaalsuse, kuna nad kasutavad paremini seadme riist- ja tarkvara, on kiiremad ja reageerivad paremini ning saate rakenduste poodides hinnangute kvaliteedi. Kuid see tähendab, et peate õppima konkreetse raamistiku või teegi kasutamist.
Siin vaatleme rakenduse loomiseks kolme erinevat võimalust - üks veebi (PWA) ja kaks natiivse (React Native, NativeScript) jaoks. Tutvume nende toimimisega, mida nad saavad teha, ja vaatame oma tugevusi ja nõrkusi, et aidata teil otsustada, millise valiku peaksite valima oma rakenduse loomiseks.
Progressiivsed veebirakendused: veebi loomine
PWA tugevused
- Rakendused töötavad ka brauseris
- Levitamine: brauser, ettevõtte ja rakenduste kauplused
- Oskab kasutada React, Angular, Vue, vanilla või muid raamistikke
PWA-de nõrkused
- Igale omasele API-le pole juurdepääsu
- Võimalused ja kaupluste levitamine iOS-is ja iPadOS-is on piiratud
- See on pidevas arengus
PWA-d on praegune kujundusmuster, mille abil saab luua lihtsalt toimivaid võrguühenduseta installitavaid rakendusi, kasutades ainult veebipinu: HTML, CSS, JavaScripti ja brauserite API-sid. Tänu teenindustöötajale ja veebirakenduse manifesti spetsifikatsioonidele saame nüüd pärast Androidi, iOS-i, iPadOS-i, Windowsi, macOS-i, Chrome OS-i ja Linuxi installimist luua esmaklassilise rakenduskogemuse.
PWA-de loomiseks võite kasutada mis tahes arhitektuuri: alates serveripoolsest, vanilli JavaScripti, React, Vue, Angular või muudest kliendipoolsetest raamistikest. See võib olla ühe- või mitmeleheline veebirakendus ja me määratleme, kuidas me toetame kasutajaid võrguühenduseta.
Selles lähenemisviisis ei pea me oma rakenduse ressursse pakkima ja allkirjastama: hostime failid lihtsalt veebiserverisse ja hooldustöötaja vastutab failide vahemällu salvestamise eest kliendis ja teenib neid pärast installimist. See tähendab ka seda, et kui rakendus vajab värskendamist, muudate lihtsalt serveris olevaid faile ja teenindustöötaja loogika vastutab nende värskendamise eest kasutaja seadmetes ilma kasutaja või rakenduse poe sekkumiseta.
Levitamise osas on levinuim meetod brauser. Kasutajad installivad rakenduse brauserist, kasutades menüükäsku Lisa avaekraanile või Installi, aktsepteerides installimiskutset või kasutades ühilduvatel platvormidel kohandatud veebirakenduse kasutajaliidest. Väärib märkimist, et Apple lükkab tagasi App Store'is avaldatud puhtad PWA-d ja julgustab veebiarendajaid neid Safari kaudu levitama.
Kasutajaliidest haldab puhtalt veebi käitusaeg, mis tähendab, et iga juhtelementi kuvamise eest ekraanil vastutab veebidisainer. Kui kasutate kasutajaliidese raamistikku, näiteks Ionic, või materjalidisaini teeki, jäljendavad HTML ja CSS Androidi või iOS-i natiivseid liideseid, kuid see pole kohustuslik.PWA-de tegemisel on veebi jõudlusvõtete rakendamine hea kasutajakogemuse säilitamiseks kohustuslik.
Võimete osas on PWA-l juurdepääs ainult selle platvormi brauserimootoris saadaval olevatele API-dele ja seda ei saa laiendada algse koodiga - välja arvatud rakenduste poe PWA-levitused. Selles küsimuses on iOS ja iPadOS PWA-de piiratumad platvormid, samas kui Chrome'il (Androidi ja lauaarvutite OS-idel) on rohkem kättesaadavust ja ta töötab kõvasti selle nimel, et Fugu-projektiga kõik võimalikud API-d JavaScripti lisada.
- Parim pilvemälu: valige endale sobiv variant.
Reageeri Native
React Native tugevused
- Samad mustrid nagu React.js-i puhul
- Mõni veebi API on avatud
- Veebi- ja töölauatoe
React Native nõrkused
- Veebiliidese komponente ei saa uuesti kasutada
- Põlissild vajab veidi tööd
- Vaja on reaktsioonikogemust
React Native on Facebooki toetatud avatud lähtekoodiga JavaScripti põhine komponentraamistik, mis kasutab Reacti kujundusmustreid ja JavaScripti keelt, et koostada iOS-i, iPadOS-i ja Android-i jaoks mõeldud lähirakendused ühest lähtekoodist.
Kuid renderdamiseks ei aktsepteerita ühtegi HTML-elementi; kehtivad ainult muud kohalikud komponendid. Seetõttu selle asemel, et renderdada a div> koos p> ja a sisend> JSX-i abil renderdate a Vaade> koos Tekst> ja a Tekstisisestus>. Stiilikomponentide jaoks kasutate endiselt CSS-i ja paigutus on määratletud Flexboxi kaudu.
Kasutajaliidest renderdatakse brauseri DOM-is, kuid Androidi ja iOS-i kasutajaliidese teekide abil. Seetõttu a Nupp> ReactNative'is saab UIButtoni eksemplariks iOS-is ja android.widget.Button klass Androidis; React Native pole seotud veebiajaga.
Kuid kogu JavaScripti kood käivitatakse seadmes JavaScripti virtuaalses masinas, nii et rakenduse koostamisel pole JavaScripti reaalse natiivkoodi teisendamiseks. Veebiarendajatele on olemas komplekt tuntud API-sid, näiteks Fetch API, WebSockets ja brauseri taimerid: setInterval ja requestAnimationFrame. Muud võimed on platvormil kasutusel kohandatud API-de, näiteks animatsioonide kaudu.
Kiire React Native projekti saate alustada kahe tasuta CLI-ga: Expo või täpsema ja ametlikuma ReactNative CLI-ga. Kui kasutate ametlikku CLI-d, vajate Androidi rakenduse ja Xcode'i koostamiseks ja testimiseks ka Android Studio'i, et sama toimida ka iOS-is ja iPadOS-is, seega vajate selle platvormi jaoks MacOS-arvutit.
React Native kompileerib iOS-i ja Androidi jaoks natiivrakendusi, mis tähendab, et teie rakenduse levitamisel järgitakse samu reegleid nagu teistes natiivrakendustes: avalike rakenduste rakenduste poed, ettevõtte levitamine ja alfa- / beetatestimine. Tavaliselt ei saa te rakendust brauseri kaudu levitada, kuigi abiks võivad olla React Native for Web ja Microsofti React Native for Windows.
NativeScript
NativeScripti tugevused
- Head vahendid kodeerimiseks ja testimiseks
- Lai galerii rakendustest, mis on mängimiseks valmis
- Kõik Androidi ja iOS-i API-d on JS-is eksponeeritud
NativeScripti nõrkused
- Väike kogukond
- Veebiliidese komponente ei saa uuesti kasutada
- Pole tuge veebis, töölaual ega Reactil
NativeScript ei ole nii tuntud kui React Native, kuid see konkureerib samal alal: iOS-i ja Androidi natiivsed rakendused JavaScripti ja veebiraamistike kaudu. See võimaldab teil natiivrakenduste loomiseks kasutada JavaScripti või TypeScripti ja XML-i kasutajaliidese faili. Samuti toetab see Angular ja Vue kohe karbist välja, seega on see suurepärane lahendus nende raamistikega harjunud arendajatele.
NativeScripti eelised on selgemad, kui kasutate nurgelist või Vue. Angulari jaoks loote samad komponendid, millega olete harjunud, kuid kasutate malli jaoks HTML-i asemel XML-i, sealhulgas kõiki andmete sidumisi. XML-is a asemel div> koos p> ja an img>, asetate a StackLayout> koos Silt> ja an Pilt> komponent.
CSS-i ja Sassi toetatakse brauseris CSS-iga sarnaste stiilidega. Marsruutimine ja võrguhaldus toimub standardsete nurgateenuste juurutamise kaudu. Vue jaoks on see midagi sarnast; kirjutate malli XML-is, selle asemel, et samas HTML-i kasutada mall> element teie .vue-failis.
NativeScript sisaldab komponentide kogu, mis seejärel vastendatakse Androidi või iOS-i natiivjuhtimisega, nii et kui loendi või valija renderdate, on see natiivrakendus, kasutades sama ideed nagu React Native'is.
Teie JavaScripti või TypeScripti kood (transpileeritud) käivitatakse seadmes asuvas JavaScripti virtuaalses masinas, mis ühendab silla algkeskkonda / tagasi. Selles sillas on avatud kõik Androidi või iOS / iPadOS-i natiivsed API-d, nii et hoolimata juurdepääsust platvormidevahelisele API-le, saame installida või helistada mis tahes Java- või Objective-C-koodile JavaScripti / TypeScripti kaudu ja NativeScript annab andmetüübid.
NativeScriptil on tööriistade jaoks suur tugi, sealhulgas VS-koodi pistikprogrammid, CLI, kuuma uuesti laadimise testimissüsteem ja NativeScripti mänguväljaku rakendus, nii et testimise ajal ei pea te installima kõiki sõltuvusi, samuti mitmeid lisateenuseid, näiteks veebipõhiseid teenuseid mänguväljak.
Lõpuks koostab NativeScript ainult Androidile ja iOS-ile mõeldud rakenduse, mille saab installida ametlikest levitamiskanalitest ja rakenduste poodidest, kui järgite nende reegleid, ettevõtte levitamist ja alfa- / beetatestimist. Tavaliselt ei saa rakendusi brauserist levitada ja selle platvormi jaoks pole töölauarakendustele lahendusi.
See artikkel avaldati algselt aastal väljaanne 325 net, maailma enimmüüdud ajakiri veebidisaineritele ja -arendajatele. Osta väljaanne 325 või telli võrku.
Liituge meiega aprillis 2020 koos JavaScripti superstaaride koosseisuga GenerateJS-is - konverents, mis aitab teil paremat JavaScripti luua. Broneeri kohe aadressilgenerateconf.com
