Sisältö
- PWA: t vs. alkuperäiset sovellukset: Mikä on ero?
- Progressiiviset verkkosovellukset: Verkon rakentaminen
- PWA: n vahvuudet
- PWA: n heikkoudet
- Reagoi Native
- React Nativein vahvuudet
- React Nativein heikkoudet
- NativeScript
- NativeScriptin vahvuudet
- NativeScriptin heikkoudet
Mitä lähestymistapaa kannattaa noudattaa sovellusta rakennettaessa? Pitäisikö sinun siirtyä PWA / web-tekniikoihin vai pitäisikö sinun mennä alkuperäiseksi ja suunnitella tiettyjä alustoja? Molemmilla vaihtoehdoilla on hyvät ja huonot puolensa, ja tässä artikkelissa keskitymme muutamiin suosittuihin valintoihin, joita käytetään verkko- ja natiivisovellusten luomiseen.
PWA: t (Progressive Web Apps) eli verkkosovellukset on rakennettu suosituilla verkkotekniikoilla HTML, CSS ja JavaScript ja ne toimivat verkkoselaimessa. (Katso joitain välttämättömiä HTML-tunnisteita, jotka auttavat rakentamistasi.) PWA: t ovat käytännössä mobiilisivustoja, jotka on suunniteltu näyttämään sovelluksilta, ja web-sovellusliittymien käyttö antaa niille samanlaisia toimintoja kuin natiivisovellus.
Lisätietoja sovellusten rakentamisesta on artikkelissamme sovelluksen luomisesta, tai jos se on sivusto, jonka haluat luoda, katso nämä parhaat verkkosivustojen rakentajat ja web-hosting-palvelut.
PWA: t vs. alkuperäiset sovellukset: Mikä on ero?
Progressiivisten verkkosovellusten etuna on, että ne voidaan asentaa ja elää laitteessa ilman sovelluskaupan tarvetta. Ja osa prosessista on Web App Manifest, jonka avulla kehittäjät voivat hallita sovelluksen ulkoasua ja käynnistämistä. Lisäksi web-suunnittelijoilla / käyttöliittymän kehittäjillä on jo tarvittavat taidot aloittaakseen rakentamisen välittömästi. Uutta kieltä ei tarvitse oppia, toisin kuin natiivisovelluksissa.
Natiivisovellukset on rakennettu tietyn käyttöjärjestelmän mielessä - ts. iOS ja Android - ja käytä kehystä tai kieltä tämän tarkoituksen saavuttamiseksi. iOS-sovelluksissa käytetään yleensä Xcode- tai Swift-sovelluksia ja Android-sovelluksia, JavaScriptiä. Mutta tässä artikkelissa keskitymme pariin JavaScript-pohjaisiin avoimen lähdekoodin kehyksiin - React Native ja NativeScript - jotka toimivat molemmilla alustoilla.
Natiivisovellusten etuna on, että ne tuovat tyypillisesti parempia toimintoja, kun ne hyödyntävät paremmin laitteiden ja ohjelmistojen käyttöä, ovat nopeampi ja reagoivampi ja saat laadunvarmistuksen luokituksista sovelluskaupoissa. Mutta se tarkoittaa, että on opittava käyttämään tiettyä kehystä tai kirjastoa.
Tässä tarkastellaan kolmea erilaista vaihtoehtoa - yksi verkko (PWA) ja kaksi natiivi (React Native, NativeScript) - sovelluksen rakentamiseksi. Käymme läpi, miten he toimivat, mitä he voivat tehdä, ja tarkastelemme heidän vahvuuksiaan ja heikkouksiaan auttaaksemme sinua päättämään, minkä vaihtoehdon sinun tulisi valita rakentaaksesi sovelluksesi.
Progressiiviset verkkosovellukset: Verkon rakentaminen
PWA: n vahvuudet
- Sovellukset toimivat myös selaimessa
- Jakelu: selain, yritys- ja sovelluskaupat
- Voi hyödyntää React-, Angular-, Vue-, vanilja- tai muita kehyksiä
PWA: n heikkoudet
- Ei pääsyä kaikkiin natiiviin sovellusliittymiin
- Kyvyt ja myymälän jakelu iOS: lla ja iPadOS: lla ovat rajalliset
- Se on jatkuvassa evoluutiossa
PWA: t ovat nykyinen suunnittelumalli, jolla luodaan tehokkaita, offline-asennettavia, asennettavia sovelluksia vain verkkopinosta: HTML, CSS, JavaScript ja selainten API. Huoltotyöntekijän ja verkkosovelluksen luettelomääritysten ansiosta voimme nyt luoda ensiluokkaisen sovelluskokemuksen asennuksen jälkeen Androidille, iOS: lle, iPadOS: lle, Windowsille, macOS: lle, Chrome OS: lle ja Linuxille.
Voit luoda PWA: ita käyttämällä mitä tahansa arkkitehtuuria: palvelinpuolelta, vanilja JavaScriptiä, React, Vue, Angular tai muita asiakaspuolen kehyksiä. Se voi olla yhden sivun sovellus tai monisivuinen verkkosovellus, ja määritämme, miten aiomme tukea käyttäjiä offline-tilassa.
Tässä lähestymistavassa meidän ei tarvitse pakata ja allekirjoittaa sovelluksemme resursseja: isännöimme tiedostoja vain verkkopalvelimessa, ja palvelutyöntekijä on vastuussa tiedostojen välimuistista asiakaskoneessa ja palvelee niitä asennuksen jälkeen. Tämä tarkoittaa myös sitä, että jos sovellus tarvitsee päivitystä, vaihdat vain palvelimen tiedostot, ja palvelutyöntekijän logiikka on vastuussa niiden päivittämisestä käyttäjien laitteille ilman käyttäjän tai sovelluskaupan väliintuloa.
Jakelun suhteen yleisin tapa on selain. Käyttäjät asentavat sovelluksen selaimesta käyttämällä Lisää aloitusnäyttöön tai Asenna-valikkokohtaa, hyväksymällä asennuskutsu tai käyttämällä mukautettua verkkosovelluksen käyttöliittymää yhteensopivilla alustoilla. On syytä huomata, että Apple hylkää puhtaat PWA: t, jotka on julkaistu App Storessa, ja kannustaa verkkokehittäjiä levittämään sitä Safarin kautta.
Käyttöliittymää hallinnoi puhtaasti web-ajonaika, mikä tarkoittaa, että verkkosuunnittelija on vastuussa jokaisen ohjauksen renderoinnista näytöllä. Jos käytät käyttöliittymäkehystä, kuten Ionic, tai Material Design -kirjastoa, HTML ja CSS jäljittelevät natiivirajapintoja Androidissa tai iOS: ssä, mutta se ei ole pakollista.Kun tehdään PWA-tekniikoita, web-suorituskyvyn tekniikoiden käyttö on pakollista hyvän käyttökokemuksen säilyttämiseksi.
Kykyjen suhteen PWA: lla on pääsy vain kyseisen alustan selainmoottorissa oleviin sovellusliittymiin, eikä sitä voida laajentaa alkuperäisellä koodilla - lukuun ottamatta sovelluskaupan PWA-jakeluja. Tässä asiassa iOS ja iPadOS ovat rajoitetummat PWA-käyttöympäristöt, kun taas Chromella (Android- ja pöytätietokoneiden käyttöjärjestelmille) on enemmän saatavuutta ja se tekee kovasti töitä kaikkien mahdollisten sovellusliittymien lisäämiseksi JavaScriptiin Fugu-projektilla.
- Paras pilvitallennustila: Valitse oikea vaihtoehto sinulle.
Reagoi Native
React Nativein vahvuudet
- Samat mallit kuin React.js: llä
- Jotkut web-sovellusliittymät ovat alttiina
- Verkko- ja työpöytätuki
React Nativein heikkoudet
- Web-käyttöliittymän komponentteja ei voi käyttää uudelleen
- Natiivisilta tarvitsee töitä
- Reagointikokemusta tarvitaan
React Native on avoimen lähdekoodin JavaScript-pohjainen komponenttikehys, jota sponsoroi Facebook ja joka käyttää React-suunnittelumalleja sekä JavaScripti-kieltä kootakseen alkuperäiset sovellukset iOS-, iPadOS- ja Android-laitteille yhdestä lähdekoodista.
Mutta renderöinnissä ei hyväksytä HTML-elementtejä; vain muut natiivikomponentit ovat kelvollisia. Siksi a div> kanssa p> ja a tulo> elementti JSX: n kanssa, renderoit a Näytä> kanssa Teksti> ja a Tekstinsyöttö>. Suunnittelukomponenteissa käytetään edelleen CSS: ää ja asettelu määritetään Flexboxin kautta.
Käyttöliittymää ei renderöidä selaimen DOM: ssä, mutta käyttämällä alkuperäisiä käyttöliittymäkirjastoja Androidissa ja iOS: ssä. Siksi a Painike> ReactNative: sta tulee UIButtonin esiintymä iOS: ssä ja android.widget.Button luokka Androidissa; React Native -sovelluksessa ei ole Web-ajonaikaa.
Kaikki JavaScript-koodi suoritetaan kuitenkin laitteen JavaScript-virtuaalikoneessa, joten sovellusta koottaessa ei ole JavaScriptiä todelliseen natiivikoodimuunnokseen. Web-kehittäjille on joukko tunnettuja sovellusliittymiä, kuten Fetch API, WebSockets ja selaimen ajastimet: setInterval ja requestAnimationFrame. Muut kyvyt otetaan käyttöön alustalla mukautettujen sovellusliittymien, kuten animaatioiden, kautta.
Voit aloittaa nopean React Native -projektin kahdella ilmaisella CLI: llä: Expo tai edistyneempi ja virallisempi ReactNative CLI. Jos käytät virallista CLI: tä, tarvitset myös Android Studion kokoamaan ja testaamaan Android-sovelluksen ja Xcodein tekemään samoin iOS: ssä ja iPadOS: ssa, joten tarvitset MacOS-tietokoneen kyseiselle alustalle.
React Native kokoaa natiivisovellukset iOS: lle ja Androidille, mikä tarkoittaa, että sovelluksesi jakelu noudattaa samoja sääntöjä kuin muut natiivisovellukset: julkisten sovellusten sovelluskaupat, yritysjakelu ja alfa- / beetatestaus. Tyypillisesti et voi levittää sovellusta selaimen kautta, vaikka React Native for Web ja Microsoftin React Native for Windows -alustat voivat auttaa.
NativeScript
NativeScriptin vahvuudet
- Hyvät työkalut koodaamiseen ja testaamiseen
- Laaja galleria sovelluksia, jotka ovat valmiita pelaamiseen
- Kaikki Android- ja iOS-sovellusliittymät ovat alttiina JS: lle
NativeScriptin heikkoudet
- Pieni yhteisö
- Web-käyttöliittymän komponentteja ei voi käyttää uudelleen
- Ei verkko-, työpöytä- tai React-tukea
NativeScript ei ole yhtä tunnettu kuin React Native, mutta se kilpailee samalla alalla: alkuperäiset iOS- ja Android-sovellukset JavaScriptistä ja verkkokehyksistä. Sen avulla voit luoda natiivisovelluksia JavaScriptin tai TypeScriptin ja XML-käyttöliittymätiedoston avulla. Se tukee myös Angular- ja Vue-ratkaisuja heti alusta alkaen, joten se on loistava ratkaisu kehittäjille, jotka ovat tottuneet näihin kehyksiin.
NativeScriptin edut ovat selkeämpiä, kun käytät Angular- tai Vue-asetuksia. Angularille luodaan samat komponentit, joihin olet tottunut, mutta käytät mallissa XML: ää HTML: n sijasta, mukaan lukien kaikki datan sidokset. XML: ssä a: n sijasta div> kanssa p> ja img>, asetat a StackLayout> kanssa Tarra> ja Kuva> komponentti.
CSS: ää ja Sassia tuetaan samalla tyylillä kuin selaimen CSS: ssä. Reititys ja verkon hallinta tapahtuu vakiokulmapalveluiden toteutusten avulla. Vue: lle se on jotain samanlaista; kirjoitat mallin XML-muodossa sen sijaan, että käyttäisit HTML-koodia samassa malli> -elementti .vue-tiedostossa.
NativeScript sisältää kokoelman komponentteja, jotka sitten yhdistetään Android- tai iOS-natiiviin ohjaimiin, joten kun renderät luettelon tai valitsimen, se on natiivisovellus, joka käyttää samaa ideaa kuin React Native -ohjelmassa.
JavaScript- tai TypeScript-koodisi (lähetetty) suoritetaan laitteen virtuaalikoneessa, jossa on silta natiiviin ympäristöön. Kyseisessä sillassa kaikki alkuperäiset Android- tai iOS / iPadOS-sovellusliittymät ovat alttiina, joten huolimatta siitä, että meillä on pääsy alustojen välisiin sovellusliittymiin, voimme välittää tai soittaa minkä tahansa Java- tai Objective-C-koodin JavaScriptiä / TypeScript: ää ja NativeScript yhdistää tietotyypit.
NativeScriptillä on suuri tuki työkaluille, mukaan lukien VS-koodilaajennukset, CLI, hot-reload -testausjärjestelmä ja NativeScript-leikkikentäsovellus, joten sinun ei tarvitse asentaa kaikkia riippuvuuksia testauksen aikana, samoin kuin useita lisäpalveluita, kuten online-palvelu leikkikenttä.
Lopuksi NativeScript kokoaa Android- ja iOS-sovellukset vain, jotka voidaan asentaa virallisilta jakelukanavilta ja sovelluskaupoista, jos noudatat niiden sääntöjä, yritysjakelua ja alfa- / beetatestausta. Tyypillisesti ei ole tapaa jakaa sovelluksia selaimesta, eikä tälle alustalle ole ratkaisuja työpöytäsovelluksiin.
Tämä artikkeli julkaistiin alun perin numero 325 of net, maailman myydyin verkkosivujen suunnittelijoille ja kehittäjille suunnattu lehti. Ostaa numero 325 tai tilaa verkkoon.
Liity joukkoomme huhtikuussa 2020 JavaScript-supertähtien kanssa GenerateJS: ssä - konferenssi, joka auttaa sinua rakentamaan paremman JavaScriptin. Varaa nyt osoitteessagenerateconf.com
