Sadržaj
- PWA i nativne aplikacije: Koja je razlika?
- Progresivne web aplikacije: Izgradnja za web
- Snage PWA-a
- Slabosti PWA-a
- Reagiraj nativni
- Snage React Native-a
- Slabosti React Nativea
- NativeScript
- Prednosti NativeScripta
- Slabosti NativeScripta
Koji biste pristup trebali primijeniti prilikom izrade aplikacije? Trebate li krenuti putem PWA / web tehnologija ili biste trebali krenuti u matičnu mrežu i dizajnirati za određene platforme? Obje opcije imaju svoje prednosti i nedostatke, a u ovom se članku koncentriramo na nekoliko popularnih izbora koji se koriste za stvaranje web i izvornih aplikacija.
PWA (Progresivne web aplikacije) zvane web aplikacije izgrađene su s popularnim web tehnologijama HTML, CSS i JavaScript i rade u web pregledniku. (Provjerite neke od bitnih HTML oznaka koje će vam pomoći u gradnji.) PWA su učinkovito mobilne web stranice dizajnirane da izgledaju poput aplikacije, a upotreba web API-ja daje im funkcionalnost sličnu izvornoj aplikaciji.
Dodatne savjete o izradi aplikacija potražite u našem postu o tome kako izraditi aplikaciju ili ako se radi o web mjestu koje želite stvoriti pogledajte ove najbolje graditelje web stranica i usluge web hostinga.
PWA i nativne aplikacije: Koja je razlika?
Prednost progresivnih web aplikacija je u tome što ih je moguće instalirati i raditi na uređaju bez potrebe za trgovinom aplikacija. Dio procesa je i Web App Manifest koji omogućava programerima da kontroliraju kako se neka aplikacija pojavljuje i kako se pokreće. Također, web dizajneri / front end programeri već će imati skup vještina potrebnih da odmah počnu graditi. Za razliku od izvornih aplikacija, nije potrebno učiti novi jezik.
Izvorne aplikacije izrađene su s određenim OS-om na umu - tj. iOS i Android - i upotrijebite okvir ili jezik da ispunite tu svrhu. iOS aplikacije obično koriste Xcode ili Swift, a Android aplikacije JavaScript. Ali, za ovaj se članak usredotočujemo na nekoliko okvira otvorenog koda utemeljenih na JavaScript - React Native i NativeScript - koji rade na obje platforme.
Prednosti izvornih aplikacija je u tome što obično donose bolju funkcionalnost jer bolje koriste hardver i softver uređaja, brže su i brže reagiraju te dobivate jamstvo kvalitete putem ocjena u trgovinama aplikacija. Ali, to će značiti da morate naučiti kako koristiti određeni okvir ili knjižnicu.
Ovdje gledamo tri različite opcije - jednu za web (PWA) i dvije za izvorne (React Native, NativeScript) - za izgradnju aplikacije. Prolazimo kroz njihovo funkcioniranje, što mogu učiniti i promatramo njihove snage i slabosti kako bismo vam pomogli da odlučite koju biste opciju trebali odabrati za izgradnju svoje aplikacije.
Progresivne web aplikacije: Izgradnja za web
Snage PWA-a
- Aplikacije također rade u pregledniku
- Distribucija: prodavaonice preglednika, poduzeća i aplikacija
- Može koristiti React, Angular, Vue, vanilla ili druge okvire
Slabosti PWA-a
- Nema pristupa svakom izvornom API-ju
- Mogućnosti i distribucija trgovina na iOS-u i iPadOS-u su ograničene
- U kontinuiranoj je evoluciji
PWA su trenutni obrazac dizajna za stvaranje visoko učinkovitih, izvanmrežnih aplikacija koje se mogu instalirati, koristeći samo web stog: HTML, CSS, JavaScript i API-je preglednika. Zahvaljujući uslužnom radniku i specifikacijama manifesta web-aplikacije, sada možemo stvoriti prvoklasno iskustvo aplikacije nakon instalacije za Android, iOS, iPadOS, Windows, macOS, Chrome OS i Linux.
Da biste stvorili PWA-ove, možete koristiti bilo koju arhitekturu: na strani poslužitelja, vanilin JavaScript, React, Vue, Angular ili druge okvire na strani klijenta. To može biti aplikacija na jednoj stranici ili web stranica na više stranica, a mi definiramo kako ćemo podržavati korisnike dok su izvan mreže.
U ovom pristupu ne trebamo pakirati i potpisivati resurse naše aplikacije: datoteke samo hostiramo na web poslužitelju, a uslužni radnik bit će odgovoran za predmemoriranje datoteka u klijentu i poslužit će ih nakon instalacije. To također znači ako aplikaciju treba ažurirati, samo promijenite datoteke na poslužitelju, a logika uslužnog radnika bit će odgovorna za njihovo ažuriranje na uređajima korisnika bez intervencije korisnika ili trgovine aplikacija.
Što se tiče distribucije, najčešći je način preglednik. Korisnici instaliraju aplikaciju iz preglednika pomoću stavke izbornika Dodaj na početni zaslon ili Instaliraj, prihvaćanjem poziva za instalaciju ili korištenjem prilagođenog korisničkog sučelja web aplikacije na kompatibilnim platformama. Vrijedno je napomenuti da Apple odbacuje čiste PWA-ove objavljene u App Storeu i potiče web programere da ih distribuiraju putem Safarija.
Korisničkim sučeljem isključivo upravlja web izvršavanje, što znači da je web dizajner odgovoran za prikazivanje svake kontrole na zaslonu. Ako upotrebljavate okvir korisničkog sučelja, kao što je Ionic, ili biblioteku Materijalnog dizajna, HTML i CSS imitirat će izvorna sučelja na Androidu ili iOS-u, ali to nije obvezno.Kada radite PWA-ove, primjena tehnika web izvedbe obavezna je kako bi se zadržalo dobro korisničko iskustvo.
Što se tiče mogućnosti, PWA će imati pristup samo API-jevima dostupnim u mehanizmu preglednika na toj platformi i ne može se proširiti nativnim kodom - s izuzetkom distribucije aplikacija PWA u trgovini aplikacija. U tom su pogledu iOS i iPadOS ograničenije platforme za PWA-ove, dok Chrome (za Android i OS-ove stolnih računala) ima veću dostupnost i naporno radi na dodavanju svakog mogućeg API-ja u JavaScript s projektom Fugu.
- Najbolja pohrana u oblaku: odaberite pravu opciju za sebe.
Reagiraj nativni
Snage React Native-a
- Isti obrasci kao kod React.js
- Otkriveni su neki web API-ji
- Podrška za web i radnu površinu
Slabosti React Nativea
- Nije moguće ponovno upotrijebiti komponente web korisničkog sučelja
- Zavičajni most treba malo posla
- Potrebno je reagirati iskustvo
React Native je otvoreni izvorni okvir komponenata zasnovan na JavaScriptu, sponzoriran od strane Facebooka, koji koristi React uzorke dizajna, kao i JavaScript jezik za kompajliranje izvornih aplikacija za iOS, iPadOS i Android iz jednog izvornog koda.
Ali nijedan HTML element nije prihvaćen za prikazivanje; vrijede samo ostale izvorne komponente. Stoga, umjesto prikazivanja a div> s p> i a ulaz> element s JSX-om, prikazat ćete Pogled> s Tekst> i a Unos teksta>. Za styling komponente i dalje koristite CSS, a izgled se definira putem Flexboxa.
Korisničko sučelje neće se prikazivati u DOM-u preglednika, već pomoću matičnih biblioteka korisničkog sučelja na Androidu i iOS-u. Stoga, a Gumb> u ReactNative postat će instanca UIButton na iOS i android.widget.Button klasa na Androidu; u React Nativeu nije uključeno vrijeme izvođenja weba.
Međutim, sav JavaScript kôd izvršit će se na JavaScript virtualnom stroju na uređaju, tako da prilikom sastavljanja aplikacije nema pretvorbe JavaScript u stvarni izvorni kôd. Postoji niz dobro poznatih API-ja za web programere, kao što su Fetch API, WebSockets i tajmeri preglednika: setInterval i requestAnimationFrame. Ostale sposobnosti su raspoređene na platformi putem prilagođenih API-ja, poput animacija.
Možete započeti brzi React Native projekt s dva besplatna CLI-ja: Expo ili naprednijim i službenim ReactNative CLI-jem. Ako koristite službeni CLI, potreban vam je i Android Studio za kompajliranje i testiranje Android aplikacije i Xcode-a da bi to učinili na iOS-u i iPadOS-u, pa će vam za tu platformu trebati računalo macOS.
React Native kompajlira izvorne aplikacije za iOS i Android, što znači da će distribucija vaše aplikacije slijediti ista pravila kao i ostale izvorne aplikacije: trgovine aplikacija za javne aplikacije, distribucija u poduzeću i alfa / beta testiranje. Tipično ne možete distribuirati aplikaciju putem preglednika, iako vam mogu pomoći React Native for Web i Microsoftov React Native za Windows platforme.
NativeScript
Prednosti NativeScripta
- Dobri alati za kodiranje i testiranje
- Opsežna galerija aplikacija spremnih za igru
- Svi Android i iOS API-ji izloženi su u JS-u
Slabosti NativeScripta
- Mala zajednica
- Nije moguće ponovno upotrijebiti komponente web korisničkog sučelja
- Nema podrške za web, radnu površinu ili React
NativeScript nije toliko poznat kao React Native, ali se natječe u istom polju: izvorne iOS i Android aplikacije iz JavaScript-a i web okvira. Omogućuje vam upotrebu JavaScript ili TypeScript i XML datoteke korisničkog sučelja za stvaranje izvornih aplikacija. Također podržava Angular i Vue odmah, pa je izvrsno rješenje za programere koji su navikli na te okvire.
Prednosti NativeScript-a jasnije su kada koristite Angular ili Vue. Za Angular stvarate iste komponente na koje ste navikli, ali koristite XML umjesto HTML-a za predložak, uključujući sva povezivanja podataka. U XML-u, umjesto div> s p> i an img>, postavit ćete StackLayout> s Oznaka> i an Slika> komponenta.
CSS i Sass podržani su sličnim stilovima kao CSS u pregledniku. Usmjeravanje i upravljanje mrežom obavljaju se kroz implementaciju standardnih usluga Angular. Za Vuea je nešto slično; napišete predložak u XML, umjesto da u njemu koristite HTML predložak> element u vašoj .vue datoteci.
NativeScript uključuje zbirku komponenata koje se zatim preslikavaju na matičnu kontrolu Androida ili iOS-a, pa će, kada generirate popis ili alat za odabir, to biti izvorna aplikacija, koristeći istu ideju kao u React Native.
Vaš JavaScript ili TypeScript kôd (prepisan) izvršava se u virtualnom stroju JavaScript na uređaju s mostom u / iz matičnog okruženja. U tom su mostu izloženi čitavi izvorni API-ji s Androida ili iOS-a / iPadOS-a, pa unatoč tome što imamo pristup API-ima na više platformi, možemo instancirati ili nazvati bilo koji Java ili Objective-C kôd iz JavaScript / TypeScript i NativeScript će marširati tipove podataka.
NativeScript ima izvrsnu podršku za alate, uključujući dodatke za VS kôd, CLI, sustav za testiranje vrućeg ponovnog učitavanja i aplikaciju za igralište NativeScript, tako da ne morate instalirati sve ovisnosti tijekom testiranja, kao i nekoliko dodatnih usluga poput mrežne igralište.
Konačno, NativeScript sastavlja aplikaciju za Android i iOS koju je moguće instalirati sa službenih kanala distribucije i iz trgovina aplikacija ako se pridržavate njihovih pravila, distribucije u poduzeću i alfa / beta testiranja. Obično neće biti načina za distribuciju aplikacija iz preglednika i za ovu platformu ne postoje rješenja za stolne aplikacije.
Ovaj je članak izvorno objavljen u izdanje 325 of net, najprodavaniji svjetski časopis za web dizajnere i programere. Kupiti izdanje 325 ili pretplatite se umrežiti.
Pridružite nam se u travnju 2020. s našom postavom JavaScript superzvijezda na GenerateJS - konferenciji koja će vam pomoći da izgradite bolji JavaScript. Rezervirajte odmah nageneriraticonf.com
