Content
- Aplicacions natives contra aplicacions natives: quina diferència hi ha?
- Aplicacions web progressives: Creació per al web
- Punts forts de les PWA
- Debilitats de les PWA
- Reacciona com a nadiu
- Punts forts de React Native
- Debilitats de React Native
- NativeScript
- Punts forts de NativeScript
- Debilitats de NativeScript
Quin enfocament heu d’adoptar a l’hora de crear una aplicació? Heu de seguir la ruta PWA / tecnologies web o hauríeu de ser natiu i dissenyar plataformes específiques? Ambdues opcions tenen els seus avantatges i els seus contres, i en aquest article ens concentrem en algunes de les opcions més populars que s’utilitzen per crear aplicacions natives i web.
Les aplicacions web PWA (Progressive Web Apps), també conegudes com a aplicacions web, es construeixen amb tecnologies web populars HTML, CSS i JavaScript i funcionen en un navegador web. (Consulteu algunes de les etiquetes HTML essencials per ajudar-vos a construir). Els PWA són efectivament llocs web per a mòbils dissenyats per semblar una aplicació i l’ús d’APIs web els proporciona una funcionalitat similar a una aplicació nativa.
Per obtenir més consells sobre la creació d'aplicacions, consulteu la nostra publicació sobre com crear una aplicació o, si es tracta d'un lloc que voleu crear, consulteu els principals creadors de llocs web i serveis d'allotjament web.
Aplicacions natives contra aplicacions natives: quina diferència hi ha?
Les aplicacions web progressives tenen l’avantatge d’instal·lar-se i viure en un dispositiu sense la necessitat d’una botiga d’aplicacions. I, part del procés és el Manifest d'aplicacions web, que permet als desenvolupadors controlar com apareix una aplicació i com es llança. A més, els dissenyadors web / desenvolupadors de portada ja tindran el conjunt de competències necessàries per començar a construir immediatament. No cal aprendre un idioma nou, a diferència de les aplicacions natives.
Les aplicacions natives es construeixen pensant en un sistema operatiu específic, és a dir. iOS i Android, i utilitzeu un marc o un llenguatge per complir aquest propòsit. Les aplicacions per a iOS solen utilitzar Xcode o Swift i les aplicacions per a Android, JavaScript. Però, per a aquest article, ens concentrem en un parell de marcs de codi obert basats en JavaScript (React Native i NativeScript) que funcionen per a les dues plataformes.
Els avantatges de les aplicacions natives és que normalment ofereixen una millor funcionalitat ja que fan un millor ús del maquinari i del programari dels dispositius, són més ràpides i més sensibles i obteniu una garantia de qualitat a través de les puntuacions de les botigues d'aplicacions. Però suposarà haver d’aprendre a utilitzar un marc o biblioteca específics.
Aquí examinem tres opcions diferents: una per a web (PWA) i dues per a natives (React Native, NativeScript), per construir una aplicació. Analitzem com funcionen, què poden fer i analitzem els seus punts forts i els seus punts febles per ajudar-vos a decidir quina opció heu de triar per crear la vostra aplicació.
Aplicacions web progressives: Creació per al web
Punts forts de les PWA
- Les aplicacions també funcionen al navegador
- Distribució: navegadors, empreses i botigues d'aplicacions
- Pot utilitzar marcs React, Angular, Vue, vainilla o altres
Debilitats de les PWA
- No hi ha accés a totes les API natives
- Les habilitats i la distribució de botigues a iOS i iPadOS són limitades
- Està en contínua evolució
Els PWA són el patró de disseny actual per crear aplicacions instal·lables i sense connexió d’alt rendiment mitjançant només la pila web: HTML, CSS, JavaScript i les API dels navegadors. Gràcies al treballador del servei i a les especificacions de manifest de l'aplicació web, ara podem crear una experiència d'aplicació de primera classe després d'instal·lar-la per a Android, iOS, iPadOS, Windows, macOS, Chrome OS i Linux.
Per crear PWA, podeu utilitzar qualsevol arquitectura: des del servidor, JavaScript vainilla, React, Vue, Angular o altres marcs del costat del client. Pot ser una aplicació de pàgina única o de diverses pàgines i definim com donarem suport als usuaris sense connexió.
En aquest enfocament, no necessitem empaquetar i signar els recursos de la nostra aplicació: només allotgem els fitxers en un servidor web i el treballador del servei serà el responsable de guardar els fitxers al client i publicar-los després de la instal·lació. Això també significa que si una aplicació necessita actualitzar-se, només heu de canviar els fitxers del servidor i la lògica del treballador del servei serà l’encarregada d’actualitzar-los als dispositius dels usuaris sense la intervenció de l’usuari ni de la botiga d’aplicacions.
Pel que fa a la distribució, el mètode més habitual és el navegador. Els usuaris instal·len l’aplicació des del navegador mitjançant l’element de menú Afegeix a la pantalla d’inici o Instal·la, acceptant una invitació per instal·lar o mitjançant una interfície d’usuari de l’aplicació web personalitzada en plataformes compatibles. Val a dir que Apple rebutja els PWAs purs publicats a l'App Store i anima els desenvolupadors web a distribuir-los a través de Safari.
La interfície d'usuari està gestionada exclusivament pel temps d'execució web, el que significa que el dissenyador web és responsable de representar cada control a la pantalla. Si feu servir un marc d’interfície d’usuari, com ara Ionic o una biblioteca de Disseny de materials, HTML i CSS imitaran les interfícies natives a Android o iOS, però no és obligatori.Quan es fan PWA, és obligatori aplicar tècniques de rendiment web per tal de mantenir una bona experiència d'usuari.
En termes d’habilitats, un PWA només tindrà accés a les API disponibles al motor del navegador d’aquesta plataforma i no es podrà ampliar amb codi natiu, a excepció de les distribucions PWA de la botiga d’aplicacions. En aquest sentit, iOS i iPadOS són les plataformes més limitades per a PWA, mentre que Chrome (per a sistemes operatius Android i per a ordinadors) té més disponibilitat i treballa dur per afegir totes les API possibles a JavaScript amb el projecte Fugu.
- Millor emmagatzematge al núvol: trieu l'opció més adequada per a vosaltres.
Reacciona com a nadiu
Punts forts de React Native
- Els mateixos patrons que amb React.js
- Algunes API web estan exposades
- Suport web i d'escriptori
Debilitats de React Native
- No es poden reutilitzar components de la IU web
- El pont nadiu necessita una mica de feina
- Es necessita una experiència de reacció
React Native és un marc de components de codi obert basat en JavaScript, patrocinat per Facebook, que utilitza patrons de disseny React, així com un llenguatge JavaScript per compilar aplicacions natives per a iOS, iPadOS i Android a partir d’un codi font.
Però no s’accepten elements HTML per a la renderització; només són vàlids altres components natius. Per tant, en lloc de representar un fitxer div> amb una p> i a entrada> element amb JSX, representareu un fitxer Veure> amb una Text> i a Entrada de text>. Per als components d’estil, encara utilitzeu CSS i el disseny es defineix mitjançant Flexbox.
La interfície d'usuari no es renderitzarà al DOM d'un navegador, sinó mitjançant les biblioteques d'interfície d'usuari natives d'Android i iOS. Per tant, a Botó> a ReactNative es convertirà en una instància de UIButton a iOS i el android.widget.Button classe a Android; no hi ha cap temps d'execució web implicat a React Native.
Tanmateix, tot el codi JavaScript s’executarà en una màquina virtual JavaScript al dispositiu, de manera que no es realitzarà cap conversió de codi nadiu de JavaScript a la compilació de l’aplicació. Hi ha un conjunt d’APIs conegudes per a desenvolupadors web, com ara Fetch API, WebSockets i temporitzadors del navegador: setInterval i requestAnimationFrame. Altres habilitats es desplegen a la plataforma mitjançant API personalitzades, com ara animacions.
Podeu iniciar un projecte React Native ràpid amb dos CLI gratuïts: Expo o el CLI ReactNative més avançat i oficial. Si utilitzeu la CLI oficial, també necessiteu Android Studio per compilar i provar l'aplicació d'Android i Xcode per fer el mateix a iOS i iPadOS, de manera que necessitareu un ordinador macOS per a aquesta plataforma.
React Native compila aplicacions natives per a iOS i Android, cosa que significa que la distribució de la vostra aplicació seguirà les mateixes regles que altres aplicacions natives: botigues d'aplicacions per a aplicacions públiques, distribució empresarial i proves alfa / beta. Normalment, no es pot distribuir una aplicació mitjançant un navegador, tot i que React Native for Web i Microsoft React Native per a plataformes de Windows us poden ajudar.
NativeScript
Punts forts de NativeScript
- Bones eines per codificar i provar
- Àmplia galeria d'aplicacions a punt per jugar
- Totes les API d'Android i iOS estan exposades a JS
Debilitats de NativeScript
- Petita comunitat
- No es poden reutilitzar components de la IU web
- No hi ha suport web, d'escriptori ni React
NativeScript no és tan conegut com React Native, però competeix en el mateix camp: les aplicacions natives per a iOS i Android de JavaScript i marcs web. Us permet utilitzar JavaScript o TypeScript i un fitxer d’interfície d’usuari XML per crear aplicacions natives. També és compatible amb Angular i Vue de manera immediata, de manera que és una gran solució per als desenvolupadors acostumats a aquests marcs.
Els avantatges de NativeScript són més clars quan s’utilitza Angular o Vue. Per a Angular, creeu els mateixos components als quals esteu acostumats, però utilitzant XML en lloc d’HTML per a la plantilla, inclosos tots els enllaços de dades. A l'XML, en lloc d'un fitxer div> amb una p> i un img>, col·locareu un StackLayout> amb una Etiqueta> i un Imatge> component.
CSS i Sass són compatibles amb estils similars a CSS al navegador. L’encaminament i la gestió de xarxes es fan mitjançant implementacions dels serveis Angular estàndard. Per Vue, és una cosa similar; escriviu la plantilla en XML en lloc d’utilitzar HTML al mateix plantilla> element del fitxer .vue.
NativeScript inclou una col·lecció de components que després s’assignen a un control natiu d’Android o iOS, de manera que quan renderitzeu una llista o un selector, serà l’aplicació nativa, amb la mateixa idea que a React Native.
El vostre codi JavaScript o TypeScript (transpilat) s’executa en una màquina virtual JavaScript del dispositiu amb un pont cap a / des de l’entorn nadiu. En aquest pont, s’exposen les API natives senceres d’Android o iOS / iPadOS, de manera que, tot i tenir accés a API multiplataforma, podem crear instàncies o trucar qualsevol codi Java o Objective-C des de JavaScript / TypeScript i NativeScript controlarà els tipus de dades.
NativeScript té un gran suport per a eines, inclosos els connectors de codi VS, la CLI, un sistema de proves de recàrrega en calent i una aplicació de jocs NativeScript, de manera que no necessiteu instal·lar totes les dependències mentre feu la prova, així com diversos serveis addicionals, com ara una línia parc infantil.
Finalment, NativeScript només compila una aplicació per a Android i iOS que es pot instal·lar des de canals de distribució oficials i botigues d’aplicacions si compliu les seves normes, distribució empresarial i proves alfa / beta. Normalment no hi haurà manera de distribuir aplicacions des d’un navegador i no hi ha solucions per a aplicacions d’escriptori per a aquesta plataforma.
Aquest article es va publicar originalment a número 325 de net, la revista més venuda del món per a dissenyadors i desenvolupadors de webs. Comprar número 325 o bé subscriu-te a xarxa.
Uniu-vos a nosaltres a l’abril de 2020 amb la nostra línia de superestrelles JavaScript a GenerateJS, la conferència que us ajudarà a crear un JavaScript millor. Reserva ara agenerateconf.com
