NativeScript o cómo crear aplicaciones verdaderamente nativas con JavaScript

Desde hace un tiempo me vengo preguntando lo siguiente, ¿por qué trabajamos en exceso a la hora de crear una App y una web?

Pues bien, durante estos meses de cuarentena he tenido algo más de tiempo para poder investigar cómo responder mi pregunta. Si bien es cierto que está muy asimilado ya el uso de herramientas como Ionic o las PWA, a mi parecer pienso que siempre tienen ciertas limitaciones que provocan cierto rechazo a la hora de invertir en dichas tecnologías. Y en esa búsqueda descubrí NativScript, que la verdad, me enamoró.

En este artículo no pretendo extenderme en todas las características de esta potente herramienta, podéis entrar en su web y descubrir el 100% de todas ellas.

A continuación, voy a intentar explicar mi experiencia tras unificar Angular con NativeScript.

nativescript

El deseo de un único desarrollo

Todo equipo de desarrollo puede saber que, cuando se quiere hacer una aplicación para web, ios y android, normalmente se preparan proyectos específicos para cada vertiente. Es en este punto en el que todos soñamos con la palabra mágica “reutilización”, para ahorrarnos tiempos y costes.

Pues bien, gracias a NativeScript, que en adelante lo nombraré como NS, podemos alcanzar ese sueño en el que podemos hacer un desarrollo común de la lógica de negocio, pero podremos adaptar ciertas funcionalidades específicas para cada plataforma. Y sí, es lo que parece, gracias a NS obtendremos un único origen de código para las 3 plataformas mencionadas.

 

Bien, hasta este momento, alguien podría decirme, ‘pues con ionic lo tienes todo en un solo repositorio de código...’, pero es lo que aún no te he dicho lo que marca la diferencia. Gracias a NS seremos capaces de, partiendo del código desarrollado en JavaScrpt (en este caso con Angular), obtendremos una aplicación 100% nativa si necesidad de Webviews o el uso de emuladores. Es aquí donde radica la diferencia, en el paquete final destinado para cada plataforma, que ofrece el rendimiento y la experiencia óptima para el entorno de ejecución específico.

Comenzamos

Se que ahora mismo estarás deseando hacer una prueba rápida para ver con tus propios ojos que lo que te acabo de contar no es un cuento que me acabo de sacar de la manga.

Lo primero que hay que hacer es entender con el siguiente gráfico cómo se estructura un proyecto con Angular y NS.

Generalmente podremos reutilizar las siguientes partes:

  • Las rutas para la navegación.
  • Los servicios para la lógica de negocio.
  • La definición de componentes para el manejo de la lógica con la vista.

Mientras, tendremos que mantener separadas las siguientes partes:

  • La capa de interfaz de usuario — ya que necesitaremos dar cierta independencia a cada plataforma a la hora de representar los datos.
  • NgModules — para que podamos importar módulos específicos de la plataforma, sin crear conflictos entre la web y el móvil.

Perfecto, ya sabemos lo que tenemos que tener en cuenta antes de empezar, así que sólo nos queda instalarnos el entorno y ponernos manos a la obra.

En este artículo partimos de la versión 9 de Angular, por lo que podremos hacer uso del Schematics que nos proporciona el Framework y utilizar el comando ng add.

El equipo de Angular y NS han definido un esquema para integrar las dos herramientas con un solo comando, por lo que primero debemos instalarnos las herramientas que nos proporcionan.

npm install --global @angular/cli
npm install --global @nativescript/schematics

 

Una vez tenemos las herramientas, generamos nuestro proyecto y le añadimos NS.

ng new  my-app --routing=true --style=scss 

ng add @nativescript/schematics 

 

Perfecto, ya tenemos nuestro entorno listo para empezar a desarrollar, pero antes quiero mostrarte un pequeño ejemplo de lo que te comentaba al principio. Hay que tener en cuenta que, aun teniendo el mismo código, cada plataforma tiene sus peculiaridades, por lo que debes tenerlas en cuenta a la hora de enfocar tus desarrollos.

Un ejemplo muy claro y recurrente en todos los desarrollos, son las peticiones HTTP a servicios, en Angular tenemos el HttpModule, que resulta muy simple de usar. El problema es que no funcionan de la misma manera estas llamadas en un navegador y dispositivos móviles, pero no os preocupéis, en NS han pensado en todo esto y lo han resulto de una manera muy sencilla, os pongo un ejemplo.

Si lo planteamos con cabeza, podemos hacer un pequeño recubrimiento para facilitarnos la vida y olvidarnos en nuestros desarrollos de estas características de las plataformas.

  • Módulo web de nuestra app
import { HttpClientModule } from '@angular/common/http'; 
@NgModule({ 
  imports: [ 
    HttpClientModule, 
    … 
  ] 
  … 
}) 
export class MyModule {} 
  • Módulo NS de nuestra app
import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client'; 
@NgModule({ 
  imports: [ 
    NativeScriptHttpClientModule, 
    … 
  ] 
  … 
}) 
export class MyModule { }  
  • Finalmente podremos usar el httpClient sin preocuparnos, ya que posteriormente, al compilarse, se cargará el módulo correspondiente y tu servicio funcionará perfectamente.
import { Injectable } from '@angular/core'; 
import { HttpClient } from '@angular/common/http'; 
@Injectable() 
export class MyService { 
constructor(private http: HttpClient) { } 
… 
} 

 

La separación de código por módulos ofrece una solución sencilla y bastante elegante. Nos permite incorporar funcionalidad que tiene diferentes implementaciones (para las aplicaciones web y móviles) bajo un solo servicio y como resultado, maximizar el código reutilizado.

Os dejo un pequeño gráfico que os puede ayudar.

 

*Adicionalmente NS nos proporciona un amplio listado de plugins para poder interactuar con las apis nativas de los dispositivos expuestos mediante apis desarrolladas en JavaScript, lo cual nos permitirá integrarnos fácilmente con la seguridad biométrica del dispositivo para, por ejemplo, el login de nuestra app. En este enlace podrás encontrar la lista de plugins mencionados.

Construcción

Bueno, imaginemos que ya hemos hecho nuestra primera app o hemos bajado un ejemplo de los que nos proporciona NS aquí. Lo último que nos faltaría es empaquetar nuestra aplicación.

  • Para la aplicación web usaremos el comando que nos proporciona el CLI de Angular y esperaremos a que haga su magia:
ng build –prod
  • Este proceso omitirá todos los ficheros .tns (ficheros específicos de NS) y simplemente se centrará en los ficheros específicos para la app web.
  • Para las aplicaciones móviles usaremos los comandos del CLI de NS:
tns run ios –bundle — para crear una aplicación iOS
tns run android --bundle — para crear una aplicación para Android

Durante el proceso de compilación, Webpack se encarga de proporcionar los archivos .tns siempre que estén disponibles, y como resultado ocultar las versiones web de los mismos archivos (archivos como home.component.tns.html se convierten en home.component.html). Mientras que la CLI de NativeScript es responsable de crear una aplicación móvil nativa.

Este último proceso, generará un workspace específico para IOS o Android, los cuales se tendrán que abrir en Xcode o Android Studio respectivamente, para empaquetar la aplicación en el contenedor de distribución de cada plataforma. En este artículo no me voy a extender con cada IDE, pero este último proceso sólo requiere de la configuración correcta del mismo y ejecutar el proceso de build.

Tras estos procesos de construcción ya tendremos nuestros paquetes de distribución, Web, IOS y Android. ¡Enhorabuena!

Conclusión

Como puedes observar, aventurarte en crear tu propia aplicación en las tres plataformas más demandadas en la actualidad es realmente simple, como lo es la reutilización de tu código para reducir esfuerzos.

La gran ventaja de esto es que, hemos obtenido una app web con todo su potencial sin haber tenido que hacer malabares en el código para conseguir lo mismo en las aplicaciones móviles. Hemos obtenido una integración nativa sin emuladores reutilizando toda nuestra lógica de negocio.

Como dato adicional me gustaría destacar que, no es necesario que este proceso se realice en un proyecto desde cero, puedes adaptar una web existente y que de las bases de la misma nazcan unas apps nativas con mucho trabajo ya realizado.