Conţinut
- Aplicații PWA vs. aplicații native: Care este diferența?
- Aplicații web progresive: construirea pentru web
- Punctele tari ale PWA-urilor
- Puncte slabe ale PWA-urilor
- Reactive native
- Punctele forte ale React Native
- Puncte slabe ale React Native
- NativeScript
- Punctele tari ale NativeScript
- Puncte slabe ale NativeScript
Ce abordare ar trebui să luați atunci când creați o aplicație? Ar trebui să urmați ruta PWA / tehnologii web sau ar trebui să mergeți nativ și să proiectați pentru platforme specifice? Ambele opțiuni au avantajele și dezavantajele lor, iar în acest articol ne concentrăm asupra câtorva dintre opțiunile populare utilizate pentru a crea aplicații web și native.
PWA-urile (Progresive aplicații web), de asemenea, aplicații web, sunt construite cu tehnologii web populare HTML, CSS și JavaScript și funcționează într-un browser web. (Consultați câteva dintre etichetele HTML esențiale pentru a vă ajuta cu compilările dvs.) PWA-urile sunt în mod eficient site-uri web mobile concepute pentru a arăta ca o aplicație, iar utilizarea API-urilor web le oferă funcționalități similare cu o aplicație nativă.
Pentru mai multe sfaturi despre crearea de aplicații, consultați postarea noastră despre cum să creați o aplicație sau dacă este un site pe care doriți să îl creați, consultați acești constructori de site-uri de top și servicii de găzduire web.
Aplicații PWA vs. aplicații native: Care este diferența?
Aplicațiile web progresive au avantajul de a fi instalabile și live pe un dispozitiv fără a fi nevoie de un magazin de aplicații. Și o parte a procesului este Manifestul aplicației web, care permite dezvoltatorilor să controleze modul în care apare o aplicație și cum este lansată. De asemenea, proiectanții web / dezvoltatorii front end vor avea deja abilitățile necesare pentru a începe să construiască imediat. Nu este nevoie să învățați o limbă nouă, spre deosebire de aplicațiile native.
Aplicațiile native sunt create cu un sistem de operare specific în minte - adică. iOS și Android - și utilizați un cadru sau un limbaj pentru a îndeplini acest scop. Aplicațiile iOS folosesc de obicei Xcode sau Swift și aplicațiile Android, JavaScript. Însă, pentru acest articol ne concentrăm pe câteva cadre open source bazate pe JavaScript - React Native și NativeScript - care funcționează pentru ambele platforme.
Avantajele aplicațiilor native sunt că acestea oferă de obicei o funcționalitate mai bună, deoarece utilizează mai bine hardware-ul și software-ul dispozitivelor, sunt mai rapide și mai receptive și obțineți asigurarea calității, deși evaluările din magazinele de aplicații. Dar va însemna să trebuiască să învățați cum să utilizați un cadru sau o bibliotecă specifică.
Aici ne uităm la trei opțiuni diferite - una pentru web (PWA) și două pentru nativ (React Native, NativeScript) - pentru construirea unei aplicații. Analizăm modul în care funcționează, ce pot face și analizăm punctele forte și punctele lor slabe pentru a vă ajuta să decideți ce opțiune ar trebui să alegeți pentru a vă crea aplicația.
Aplicații web progresive: construirea pentru web
Punctele tari ale PWA-urilor
- Aplicațiile funcționează și în browser
- Distribuție: magazine de browser, întreprinderi și aplicații
- Poate utiliza React, Angular, Vue, vanilie sau alte cadre
Puncte slabe ale PWA-urilor
- Fără acces la fiecare API nativ
- Abilitățile și distribuția magazinului pe iOS și iPadOS sunt limitate
- Este în continuă evoluție
PWA-urile sunt modelul actual de proiectare pentru a crea aplicații performante, offline, instalabile folosind doar stiva web: HTML, CSS, JavaScript și API-urile browserelor. Mulțumită lucrătorului de service și specificațiilor manifestului aplicației web, putem crea acum o experiență de aplicație de primă clasă după instalarea pentru Android, iOS, iPadOS, Windows, macOS, Chrome OS și Linux.
Pentru a crea PWA-uri, puteți utiliza orice arhitectură: de la server, JavaScript vanilat, React, Vue, Angular sau alte framework-uri client-side. Poate fi o aplicație cu o singură pagină sau o aplicație web cu mai multe pagini și definim cum vom sprijini utilizatorii în timp ce sunt offline.
În această abordare, nu este nevoie să împachetăm și să semnăm resursele aplicației noastre: doar găzduim fișierele pe un server web, iar lucrătorul de service va fi responsabil pentru stocarea fișierelor în client și le va servi după instalare. Aceasta înseamnă, de asemenea, dacă o aplicație are nevoie de actualizare, trebuie doar să schimbați fișierele de pe server, iar logica lucrătorului de servicii va fi responsabilă pentru actualizarea acestora pe dispozitivele utilizatorilor fără intervenția utilizatorului sau a magazinului de aplicații.
În ceea ce privește distribuția, cea mai comună metodă este browserul. Utilizatorii instalează aplicația din browser utilizând elementul de meniu Adăugare la ecranul de pornire sau Instalare, acceptând o invitație la instalare sau utilizând o interfață de utilizator a aplicației web personalizate pe platforme compatibile. Este demn de remarcat faptul că Apple respinge PWA-urile pure publicate în App Store și încurajează dezvoltatorii web să le distribuie prin Safari.
Interfața cu utilizatorul este gestionată pur de timpul de execuție web, ceea ce înseamnă că designerul web este responsabil pentru redarea fiecărui control pe ecran. Dacă utilizați un cadru UI, cum ar fi Ionic, sau o bibliotecă de proiectare a materialelor, HTML și CSS vor imita interfețele native pe Android sau iOS, dar nu este obligatoriu.Atunci când faceți PWA-uri, aplicarea tehnicilor de performanță web este obligatorie pentru a păstra o bună experiență a utilizatorului.
În ceea ce privește abilitățile, un PWA va avea acces doar la API-urile disponibile în motorul browserului de pe platforma respectivă și nu poate fi extins cu codul nativ - cu excepția distribuțiilor PWA din magazinul de aplicații. În această privință, iOS și iPadOS sunt platformele mai limitate pentru PWA-uri, în timp ce Chrome (pentru sistemele de operare Android și desktop) are mai multă disponibilitate și lucrează din greu pentru a adăuga fiecare API posibil la JavaScript cu proiectul Fugu.
- Cel mai bun spațiu de stocare în cloud: alegeți opțiunea potrivită pentru dvs.
Reactive native
Punctele forte ale React Native
- Aceleași modele ca la React.js
- Unele API-uri web sunt expuse
- Suport pentru web și desktop
Puncte slabe ale React Native
- Nu se pot refolosi componentele UI web
- Podul nativ are nevoie de ceva lucru
- Este nevoie de experiență de reacție
React Native este un cadru de componente open-source bazat pe JavaScript, sponsorizat de Facebook, care folosește modele de proiectare React, precum și limbaj JavaScript pentru a compila aplicații native pentru iOS, iPadOS și Android dintr-un singur cod sursă.
Dar nu sunt acceptate elemente HTML pentru redare; numai alte componente native sunt valabile. Prin urmare, în loc să redați un div> cu p> și a intrare> element cu JSX, veți reda un Vizualizare> cu Text> și a TextInput>. Pentru componentele de stil, utilizați în continuare CSS și aspectul este definit prin Flexbox.
Interfața cu utilizatorul nu va fi redată în DOM-ul unui browser, ci folosind bibliotecile native de interfață pentru utilizator de pe Android și iOS. Prin urmare, a Buton> în ReactNative va deveni o instanță a UIButton pe iOS și android.widget.Button curs pe Android; nu există timp de rulare web implicat în React Native.
Cu toate acestea, tot codul JavaScript va fi executat într-o mașină virtuală JavaScript de pe dispozitiv, deci nu există conversie de cod JavaScript către cod nativ real atunci când compilați aplicația. Există un set de API-uri bine-cunoscute pentru dezvoltatorii web, cum ar fi API-ul Fetch, WebSockets și cronometrele browserului: setInterval și requestAnimationFrame. Alte abilități sunt implementate în platformă prin API-uri personalizate, cum ar fi animațiile.
Puteți începe un proiect rapid React Native cu două CLI-uri gratuite: Expo sau CLI-ul ReactNative mai avansat și oficial. Dacă utilizați CLI oficial, aveți nevoie și de Android Studio pentru a compila și testa aplicația Android și Xcode pentru a face același lucru pe iOS și iPadOS, deci veți avea nevoie de un computer macOS pentru acea platformă.
React Native compilează aplicații native pentru iOS și Android, ceea ce înseamnă că distribuția aplicației dvs. va urma aceleași reguli ca și alte aplicații native: magazine de aplicații pentru aplicații publice, distribuție întreprindere și testare alfa / beta. De obicei, nu puteți distribui o aplicație printr-un browser, deși React Native pentru Web și Microsoft React Native pentru platformele Windows vă pot ajuta.
NativeScript
Punctele tari ale NativeScript
- Instrumente bune pentru codare și testare
- Galerie extinsă de aplicații gata să se joace
- Toate API-urile Android și iOS sunt expuse în JS
Puncte slabe ale NativeScript
- Comunitate mică
- Nu se pot refolosi componentele UI web
- Fără suport web, desktop sau React
NativeScript nu este la fel de cunoscut ca React Native, dar concurează în același domeniu: aplicații native iOS și Android din JavaScript și cadre web. Vă permite să utilizați JavaScript sau TypeScript și un fișier de interfață de utilizator XML pentru a crea aplicații native. De asemenea, acceptă Angular și Vue chiar din cutie, deci este o soluție excelentă pentru dezvoltatorii obișnuiți cu aceste cadre.
Avantajele NativeScript sunt mai clare atunci când utilizați Angular sau Vue. Pentru Angular, creați aceleași componente cu care sunteți obișnuiți, dar utilizând XML în loc de HTML pentru șablon, inclusiv toate legările de date. În XML, în loc de a div> cu p> si un img>, veți plasa un StackLayout> cu Etichetă> si un Imagine> componentă.
CSS și Sass sunt acceptate cu stiluri similare cu CSS în browser. Rutarea și gestionarea rețelei se realizează prin implementări ale serviciilor angulare standard. Pentru Vue, este ceva similar; scrii șablonul în XML în loc să folosești HTML în același șablon> element din fișierul dvs. .vue.
NativeScript include o colecție de componente care sunt apoi mapate la un control nativ Android sau iOS, astfel încât atunci când redați o listă sau un selector, aceasta va fi aplicația nativă, folosind aceeași idee ca în React Native.
Codul dvs. JavaScript sau TypeScript (transpilat) este executat într-o mașină virtuală JavaScript pe dispozitiv cu o punte către / din mediul nativ. În acel pod, toate API-urile native de pe Android sau iOS / iPadOS sunt expuse, astfel încât, în ciuda accesului la API-uri multiplataforma, putem instanția sau apela orice cod Java sau Objective-C din JavaScript / TypeScript și NativeScript va ordona tipurile de date.
NativeScript are un suport excelent pentru instrumente, inclusiv plugin-uri de cod VS, CLI, un sistem de testare la reîncărcare la cald și o aplicație de joacă NativeScript, deci nu este nevoie să instalați toate dependențele în timpul testării, precum și mai multe servicii suplimentare, cum ar fi un online loc de joaca.
În cele din urmă, NativeScript compilează o aplicație pentru Android și iOS care poate fi instalată de pe canalele de distribuție oficiale și din magazinele de aplicații, dacă respectați regulile acestora, distribuția întreprinderii și testarea alfa / beta. De obicei, nu va exista nicio modalitate de a distribui aplicații dintr-un browser și nu există soluții pentru aplicații desktop pentru această platformă.
Acest articol a fost publicat inițial în numărul 325 of net, cea mai bine vândută revistă din lume pentru designeri și dezvoltatori de web. Cumpără numărul 325 sau Abonati-va a net.
Alătură-te nouă în aprilie 2020 cu gama noastră de superstaruri JavaScript la GenerateJS - conferința care te ajută să construiești JavaScript mai bun. Rezervați acum lagenerateconf.com
