Blog

Un punt de trobada on compartir experiències i coneixements sobre Internet i tecnologia

MÉS ENLLÀ DE BAB

Apps natives o Apps híbrides o Progressive Web Apps?

Android + iOS = React Native. Futurible PWA (Progressive Web Apps)

Óscar Jimenez 04/01/2018

Hola!! Ara que quasi segur que estàs llegint aquest post des del teu mòbil, probablement mai t'has plantejat quin és el desenvolupament que hi ha darrere de la majoria de les Apps que tens instal·lades al teu dispositiu, sigui un telèfon intel·ligent o una tauleta.

Et garanteixo que és un món apassionant que de ben segur, dona per escriure un post o més d'un... ;)) de moment comencem amb aquest per conèixer els bàsics de l'univers App. Com ja saps a BAB qualsevol tema tecnològic ens apassiona, però aquest especialment perquè ens afecta directament pel fet que la velocitat i fluïdesa a l'hora d'entregar els continguts, és un factor clau pels nostres clients.

Majoritàriament tenen projectes editorials digitals on el reconeixement i recurrència per part dels usuaris, es fonamenta en el consum de la informació des de dispositius mòbils i per tant d'una manera o altra, estan subjectes al fet que aquest patró de conducta sigui a partir d'una App nativa o una App híbrida, independentment de la plataforma iOS / Android o la tipologia de dispositiu des d’on es connectin. A més, en els últims temps ha aparegut una nova tecnologia anomenada PWA (Progressive Web Apps) que marcaran un abans i un després en el sector de les Apps, tot i que a BAB no hem adoptat aquesta tecnologia perquè Apple encara no les accepta.

Comencem per entendre que és una App nativa desenvolupada per iOS, és a dir el sistema operatiu natiu pels dispositius d'Apple i una App nativa desenvolupada per Android el sistema operatiu creat per Google, que utilitzen la resta de dispositius del mercat independentment del fabricant, a excepció d'altres sistemes més residuals com Windows Phone, desenvolupat per Microsoft i actualment només instal·lat de sèrie a dispositius Nokia i Microsoft.

Entendre les diferències bàsiques entre aquestes dues plataformes mobile, ens ajudarà a comprendre el perquè de l'evolució natural i lògica de les Apps natives cap a les Apps híbrides i el seu exponent més avançat que és React Native, framework de programació 100% mòbil, alliberat al 2015 per Facebook que és qui el va crear i desenvolupar per aplicar a la seva pròpia App i també a Instagram. Aquesta tecnologia representa un estalvi substancial en el temps de desenvolupament i costos i per tant una reducció en el TTM (Time To Market) i la implementació de versions MVP (Minimum Viable Product).

Quines són les principals característiques, pros i contres de les Apps natives per iOS i Android?

logo iOS

Les Apps natives desenvolupades per iOS:

  • Llenguatge de programació orientat a objectes: Objective-C
  • Es treballa amb editors de codi que inclouen totes les necessitats per iOS: Xcode
  • Una vegada el desenvolupador finalitza la seva feina la compila en un arxiu: Build
  • El desenvolupador decideix publicar a l'App Store: Build 
  • Un cop la puja decideix estat: Proves (Beta Testing) o Acabada (Release)
  • La seva feina ha de ser validada per Apple: iTunes Connect
  • Criteris de validació d’Apple: Patrons de disseny, usabilitat, contingut
  • Un cop validada per Apple ja es publica: Beta (Test Flight) o App Store (Release)

logo Android

Les Apps natives desenvolupades per Android:

  • Llenguatge de programació orientat a objectes: Java
  • Es treballa amb editors de codi que inclouen totes les necessitats per Android: Android Studio
  • Una vegada el desenvolupador finalitza la seva feina la compila en un arxiu: Apk
  • El desenvolupador decideix publicar a l'App a Google Play Console: Proves (Alfa / Beta) Acabada (Release)
  • La seva feina ha de ser validada per: Google Play Console
  • Criteris de validació de Google: Contingut
  • Un cop validada per Google ja es publica: Play Store

Favor Android - iOS

Pros de les Apps natives iOS / Android: 

  • Màxim rendiment del dispositiu sense restriccions (càmera, altimetre, GPS..)
  • S'incrementa l'experiència de l'usuari i millor resposta de les accions
  • Disponibilitat a les stores App StorePlay Store
  • Notificacions push
  • Constants actualitzacions disponibles

Contra Android - iOS

Contres de les Apps natives iOS / Android:

  • Conèixer dos llenguatges de programació diferents: Objective-C / Java
  • Corba d'aprenentatge lenta en constant reciclatge dels coneixements 
  • Requereix dos perfils diferents iOS / Android
  • Temps de desenvolupament més elevat
  • Incrementa el TTM (Time to Market) i la producció de versions MVP (Minimum Viable Product)
  • Diferents funcionalitats per cada plataforma

I quines són les principals característiques de les Apps híbrides?

Logo Hybrid Apps

Principals característiques de les Apps híbrides:

  • Tecnologia que permet convertir codi JavaScript en codi natiu
  • Desenvolupades amb llenguatges de programacio web: HTML5 / CSS / JavaScript
  • Fan funcionar el mateix codi independentment de la plataforma iOS / Android
  • Accepten la injecció o integració de codi natiu iOS / Android
  • Poden accedir als recursos de hardware dels dispositius mòbils: càmera, GPS, altimetre…

Les Apps híbrides estan construïdes sobre frameworks o estructures dissenyades per la implementació i desenvolupament d'una aplicació, amb la finalitat de gestionar per separat dades, accions, i com és mostra finalment. Aquests frameworks són els encarregats de convertir llenguatges web HTML5 / CSS / JavaScript a codi natiu iOS / Android.

I quines són els frameworks més populars per desenvolupar Apps híbrides?

Logo Apache Cordova

Apache Cordova (2011)
Framework 100% mobile
Utilitza llenguatges web i pot encapsular HTML5 / CSS / JavaScript en funció de la palataforma iOS / Android
Pot utilitzar tot el hardware del dispositiu (càmera, GPS, altimetre…)

Logo Ionic

Ionic (2013)
Construit sobre Angular propietat de Google 
Permet fer test de desenvolupament de la App a Chrome
Gràcies a PhoneGap i Cordova pot accedir a tot el hardware del dispositiu (càmera, GPS, altimetre…)
Apps de Diesel i McDonald’s estan desenvolupades amb Ionic

Logo React Native

React Native (2015)
Construit sobre React i directament sobre JavaScript 
Creat per Facebook i alliberat com Open Source amb política d’ús, ofereix components diferents i adaptats per iOS / Android
Permet fer test de desenvolupament des d’un dispositiu mòbil i un emulador 
Apps de Facebook i Instagram estan desenvolupades amb React Native

I quin és el millor framework per desenvolupar Apps per diaris digitals?

Avui dia el millor framework per desenvolupar Apps híbrides d'alt rendiment per diaris digitals és React Native. L'optimització del codi i la resposta del dispositiu envers el temps de descàrrega del contingut ha de ser instantània, d'aquí la perfecta integració amb les AMP (Accelerated Mobile Pages) de Google per l'entrega dels continguts a màxima velocitat.

App content

A BAB desenvolupem Apps híbrides iOS / Android pels nostres clients amb aquesta tecnologia, perquè pensem que és versàtil, robusta i ens permet fer canvis i actualitzacions a les Apps de forma àgil, doncs no fa falta compilar el codi després de cada canvi segons les necessitats del moment i tipologia de cada projecte editorial. Com que no és pròpiament un WebView, és a dir un component del sistema que permet a les Apps híbrides mostrar contingut web incrustat, sinó un codi que s'executa amb el motor de JavaScript, així doncs el rendiment de React Native és molt superior, al d'una App hibrida desenvolupada amb Apache Cordova o Ionic.

Un avantatge afegit és el fet que podem injectar codi natiu per afegir funcionalitats extra, com per exemple One Signal, un servei avançat de notificacions push imprescindibles per comunicar als teus usuaris les darreres novetats i que et permet tenir control de les mètriques d'enviament, obertura… bàsiques per qualsevol mitjà digital que necessita conèixer el rendiment de les estratègies de fidelització amb els usuaris.

Per altra banda en ser un codi alliberat per Facebook, disposa d'una enorme comunitat desenvolupadora al darrere i enfront qualsevol dubte o actualització sabem on consultar.

A les botigues iOS / Android podeu consultar exemples d'Apps que a BAB hem desenvolupat amb React Native.

Si el teu projecte editorial necessita una App no dubtis en contactar amb nosaltres i trobarem una solució a mida de les teves necessitats.

Sol·licita informació

Si t’ha agradat el contingut, pots compartir aquest post a xarxes socials i un m'agrada també ens animarà a continuar... és gratis i ja saps que les millors coses de la vida sempre ho són... ;))

Si et vols subscriure al nostre butlletí, només has de deixar un nom i un correu al camp d'aquí sota i rebràs les novetats del nostre blog abans que ningú.

Nosaltres seguirem parlant del que més ens agrada. Hi seràs?

Fins aviat!

I per acabar, sabies que...

El futur de les Apps orientades a l’entrega i consum de continguts, les PWA (Progressive Web Apps) de Google, que pretenen millorar l'experiència dels usuaris combinant el millor de la web i les Apps, doncs estaran disponibles per als usuaris a partir de la primera visita en una pestanya del navegador i no requereixen instal·lació i a mida que l'usuari navega, compila en memòria cau les pàgines visitades i la entrega dels continguts sempre serà a tota velocitat inclús sense connexió... però esperem a que Apple les accepti.

T'ha agradat aquest post?

Doncs comparteix-lo! És gratis i ens donarà molt bon rotllo que ho facis ;)