Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development

Una introducción a NativeScript

by
Length:LongLanguages:

Spanish (Español) translation by Angel Fernando Quiroz Campos (you can also view the original English article)

En este articulo, vamos a echar un vistazo a NativeScript, un framework open-source para construir aplicaciones móviles con JavaScript Al final de este artículo, deberías tener una buena idea de lo que es NativeScript, cómo funciona, y qué tecnologías utiliza. Aparte de eso, también responderemos preguntas comunes que puedes tener cuando exploras una nueva tecnología, como en qué se diferencia de otras alternativas como Cordova o React Native, y cómo Telerik está involucrada en el proyecto.

1. ¿Qué es NativeScript?

NativeScript es un framework para construir aplicaciones móviles nativas multiplataforma. Esto le permite a los desarrolladores usar XML, CSS y JavaScript para construir aplicaciones para Android, iOS, e incluso Windows Universal Platform. A diferencia de Cordova, que usa un WebView para renderizar la UI de la aplicación, NativeScript usa el motor de renderizado de la plataforma, lo que significa que proporciona una experiencia de usuario verdaderamente nativa.

2. Pros

  • Es libre y de código abierto. Esto significa que puedes contribuir al código y usarloa como quieras, tanto en cuanto no violes la licencia Apache 2.0.
  • Te permite construir aplicaciones nativas para dispositivos Android y iOS. Cada componente de la UI que NativeScript expone es traducida en sus componentes UI nativos correspondientes.
  • Te da acceso a las API de plataformas nativas a través de código JavaScript. No necesitas tener conocimiento de Java u Objective-C para poder usar las API de las plataformas nativas porque puedes escribir todo en JavaScript. Esto significa que si necesitas acceso a una característica específica del dispositivo, sólo debes aprender cómo acceder a las API nativas con JavaScript y ya puedes empezar.
  • Ofrece a los usuarios una experiencia más cercana a la nativa que los frameworks de aplicaciones móviles híbridas como Córdoba.
  • Le permite a los desarrolladores construir fácilmente, desplegar y gestionar sus aplicaciones NativeScript a través de la plataforma Telerik. Discutiremos la plataforma Telerik en una sección más adelante.
  • Dispone de soporte de día cero para nuevas plataformas nativas. Esto significa que puedes usar inmediatamente las últimas API nativas y los últimos componentes UI cuando Google o Apple actualicen sus plataformas.
  • La documentación proporciona mucha información sobre cómo empezar, conceptos principales, y la interfaz de usuario. También hay ejemplos, tutoriales, un foro, preguntas en Stack Overflow, y aplicaciones de ejemplo que pueden ayudar a los principiantes a empezar con NativeScript.
  • Puedes escribir tus aplicaciones en NativeScript con TypeScript. TypeScript es un lenguaje que transpila a JavaScript y agrega capacidades de programación orientada a objetos a JavaScript.
  • Cualquier librería de JavaScript que puedes encontrar en npm que no se base en el navegador y el DOM se puede utilizar dentro de NativeScript. Los ejemplos de tales liberías incluyen liberías de utilidades como lodash y underscore.
  • Puedes hacer casi cualquier cosa con NativeScript CLI. Los conceptos básicos como crear un nuevo prouecto, agregar una plataforma, ejecutar en un dispositivo y desplegar en una plataforma específica están incluidos. Aparte de eso, puedes instalar plugins, depurar la aplicación, y subir a la tienda de aplicaciones.

3. Contras

  • No hay HTML y DOM en NativeScript Necesitarás aprender cómo usar los diferentes componentes de UI para poder contruir la UI de tu aplicación.
  • Es carente de plugins verificados. En el momento de escribir este artículo, sólo hay 16 puglins verificados en total. Aunque hay muchos plugins listados de NativeScript en npm, nunca estarás seguro de su calidad.
  • Los desarrolladores necesitan conocer las API nativas de Android y iOS para acceder al hardware del dispositivo y otras características específicas de la plataforma.
  • Debido a su naturaleza nativa, sólo puedes probar aplicaciones en un dispositivo real o emulador. Esto hace lenta la configuración inicial para pruebas. Pero una vez que empiezas a correrlo en el dispositivo, la recarga en caliente se hace cargo. Esto significa que cada vez que haces un cambio al código fuente, inmediatamente se recarga la aplicación para reflejar los cambios.
  • No todos los componentes UI están disponibles gratuitamente. Necesitas registrarte en Telerik UI para NativeScript si quiere usar componentes como gráficos y calendarios.

4. ¿Cómo funciona?

NativeScript está compuesto de una máquina virtual JavaScript, un ejecutor, y un módulo de puente. La máquina virtual JavaScript interpreta y ejecuta código JavaScript. Luego, el módulo de puente traduce las llamadas a las API específicas de la plataforma y retorna los resultados a la función que los solicitó. Para ponerlo sencillo, NativeScript proporciona a los desarrolladores una forma de controlar la plataforma nativa a través de JavaScript en vez de Objective-C en iOS o Java en Android.

Claro que hay más cosas detrás de escenas, pero los desarrolladores en Telerik lo explican mejor de lo que yo puedo, así que si quieres aprender más sobre el funcionamiento interno de NativeScript, puedes leer el artículo hecho por Georgi Atanasov sobre NativeScript - una descripción técnica general o el artículo de TJ VanToll sobre Cómo funciona NativeScript.

5. ¿Qué tencologías utiliza?

Con NativeScript, puedes usar XML para describir la UI de la aplicación, CSS para dar estilos, y JavaScript para agregar funcionalidad.

Puedes usar TypeScript con Angular 2 si prefieres usar un framewrok para crear tu propio código JavaScript.

Para dar estilo, NativeScript sólo usa un subconjunto de CSS. Esto significa que no todas las características de CSS que están disponibles en el entorno de navegador pueden ser usadas. Por ejemplo, no utilizar elementos flotantes o atributos de posición. Aquí está la lista completea de propiedades CSS soportadas. Como en el navegador, puedes agregar estilos que se aplicarán a la aplicación completa, a páginas especificas, o sólamente a un componentes específicode la UI. Si prefieres usar Sass, puedes instalar el plugin de NativeScript Dev Sass.

Para describir la estructura de la interfaz de usuario, puedes usar XML. Cada página en la aplicación debe tener su propio archivo XML. NativeScript viene con widgets predefinidos de interfaz de usuario o componentes que puede se pueden usar para construir la UI de la aplicación. Algunos de estos componentes son similares a los diferetes elementos de HTML que puedes usar en el navegador.

 Por ejemplo, hay una componente Image, que es el equivalente del elemento img, o el componente TextField, que es equivalente al elemento input de tipo texto. Los manejadores de eventos como tocar un botón están agregados en el componente en sí mismo. Aquí está un ejemplo:

Otra cosa a tener en cuenta es que los componentes tambien sirven como plantillas. Si estás familiarizado con las librerías de plantillas como Handlebars o Mustahe, debes sentirte cómodo con la siguiente sintaxis:

El ejemplo anterior usa el componente ListView. Como el nombre sugiere, este componente te permite crear listas. animals es un array definido en el archivo JavaScript y está ligado a la variables animals al cargar la página. Esto hace que la variable animals esté disponible para usar dentro del archivo XML.

Esto muestra cada elemento en el array dentro del ListView.

Por último, hay plugins que te permiten acceder al hardware del dispositvo y características específicas de la plataforma. NativeScript viene con el plugin de cámara pre instalado. Este te permite acceder a la cámara del dispositivo y tomar fotos. Entonces puedes guardar la ruta local de la foto en tu aplicación para usarla después. Las características específicas de la plataforma como el compartir en redes sociales también pueden ser usadas instalando plugins como el Plugin de NativeScript Social Share.

6. ¿Qué aplicaciones puedo construir?

Debido a la naturaleza nativa de NativeScript, puedes construir casi cualquier tipo de aplicaciones con ella. Aquí hay unos ejeemplos de aplicaciones que puedes construir con NativeScript:

  • Aplicaciones que se conectan a servidor, como aplicaciones de noticias y aplicaciones de redes sociales.
  • Juegos simples como damas, tres en raya, o pinball.
  • Aplicaciones en tiempo real como aplicaciones de chats o emisiones en vivo. Hay un plugin de Firebase para NativeScript que puedes usar para implementar aplicaciones en tiempo real.
  • Aplicaciones de streaming de música y video. Hay un plugin de reproductor de video que te permite reproducir videos almacenados localmente o videos remotos en streaming como los de YouTube
  • Aplicaciones de mapas y geolocalización. Hay plugins para Google Maps, y API de mapas nativos.
  • Aplicaciones que acceden al hardware del dispositivo. Los ejemplos incluyen aplicaciones de cámara y de IoT.

Cuando se trata de tipos de aplicaciones que puedes construir con NativeScript, los únicos factores limitantes son el desempeño y la disponibilidad de plugins. Escribir aplicaciones móviles nativas en JavaScript vienen con un precio: no puedes realmente esperar construir aplicaciones que demanen alto desempeño. Los ejemplos incluyen juegos con gráficos y animaciones complejas, aplicaciones con muchas partes móviles, y procesos en segundo plano.

Otra limitación es la disponibilidad de plugins. La mayoría de desarrolladores llega a NativeScript desde un fondo de desarrollo web. Esto significa que la mayoría de ellos no están familiarizados con o tener conocimiento limitado de las API de la plataforma que pueden ser usadas para crear plugins para aceder al hardware del dispositivo o a las características específicas de la plataforma como los contactos o los mensajes.

Si quieres aprender más sobre los tipos de aplicaciones que puedes construir con NativeScript, puedes revisar la Vitrina de Aplicaciones. La mayoría de aplicaciones que están listadas ahí estan publicadas ya sea en Google Play o Apple Store. Es decir que puedes intalarlas y ejecutarlas en tu dispositivo para sentir cómo lucen y cuál es el desempeño de las aplicaciones construidas con NativeScript.

7. ¿Cómo se compara NativeScript con frameworks híbridos?

Si no eres nuevo en el desarrollo de aplicaciones móviles, puede que vengas de frameworks multiplataforma como Cordova o React Native. NativeScript se relaciona con estos dos frameworks que aspiran resolver el problema de "Escribir una vez, ejecutar en todas partes" en el campo de desarrollo de aplicaciones móviles. Ahora vamos a revisar cada framework lado a lado:


Cordova React Native Native Script
Creador Nitobi; Later Facebook Telerik
Interaz de usuario HTML Los componentes de la interfaz de usuario están traducidos a sus contrapartes nativas Los componentes de la interfaz de usuario están traducidos a sus contrapartes nativas
Puede ser probado en Navegador, emulador, dispositivo Emulador, dispositivo Emulador, dispositivo
Se codifica con HTML, CSS, JavaScript Componentes de interfaz de usuario, JavaScript, subconjunto de CSS Componetes de interaz gráfica, subconjunto de CSS, JavaScript
Acceso a funcionalidad nativa A través de plugins Módulos nativos Acceso a la API nativa a través de JavaScript
Se despliega en Android, iOS, Ubuntu, Windows, OS X, Blackberry 10 Android y iOS. Windows Universal y Samsung Tizen próximamente Android y iOS. Windows Universal muy pronto
Frameworks y librerías JavaScript Cualquier librería de front-end o framework (Angular, brasas) Cualquier librería que no dependa del navegador Cualquier librería que no depende del navegador
Patrón de codificación Cualquier framwork front-end se puede utilizar para estructurar el código El marcado de la interfaz de usuario, JavaScript y CSS están todos agrupados en un solo archivo por defecto.
Patrón MVC/MVVM
Cómo es ejecutado JavaScript WebView El motor de JavaScriptCore para ejecutar código de aplicaciones en JavaScript y iOS
El motor Webkit JavaScriptCore para ejecutar el código de la aplicación en iOS y el motor de Google V8 en Android

Para resumir, Cordova es la vieja generación de frameworks de aplicación móvil híbrido. Usa el WebView para representar la interfaz de usuario de la aplicación y acceder a las capacidades nativas del dispositivo mediante plugins. ReacNative y NativeScript son la nuvea generación porque traducen tu código javaScript para que puede ser ejecutado por la plataforma nativa.

Alguien podría venir con un nombre mejor para frameworks como Reac Native y NativeScript en el futuro. Pero por ahora vamos a clasificarlos como "Frameworks híbridos nativos" porque ambos utilizan JavaScript para la creación de aplicaciones y ambos ofrecen experiencia y rendimiento nativo a los usuarios.

8. ¿Cómo está Telerik involucrado en el proyecto?

Telerik es la compañía que creó NativeScript Y, al igual que cualquier otra empresa, necesitan hacer dinero para sobrevivir. Así que podrías preguntarre, si el NativeScript es gratuito y de código abierto, ¿cómo Telerik hace dinero de él? Bueno, la respuesta es a través de la Plataforma Telerik y Telerik UI para NativeScript

La plataforma Telerik provee a los desarrolladores las herramientas que necesitan para diseñar fácilmente, construir, probar, desplegar, gestionar y medir el desempeño de aplicaciones NativeScript Aquí hay algunos ejemplos de las herramientas que ofrecen:

  • Una aplicación visual construida que te permite arrastrar y soltar diferentes componentes de UI
  • Una base de datos en la nube que te proporciona la base de datos para tu aplicación
  • Actualizaciones de una aplicación en vivo para la publicación de actualizaciones fácilmente para la aplicación sin tener que reenviarla a la tienda de aplicaciones y hacer que el usuario actualice la aplicación manualmente.
  • Un servicio de analíticas que responde preguntas sobre cómo está siendo usada tu aplicación, cómo es su desempeño, y qué piensan tus usuarios de ella.

Telerik UI para NativeScript es un conjunto de componentes para construir la UI de la aplicación. NativeScript ya viene con componentes de UI gratuitos, pero hay componentes de UI de pago como Chart y Calendar que puedes usarlos sólo cuando los compras desde Telerik.

9. Siguientes pasos

Si quieres aprendern más sobre NativeScript, recomiendo revisar los siguientes recursos:

Conclusión

En este artículo has aprendido todas las base de NativeScript. Como has visto, NativeScript es una buena opción para construir aplicaciones usando las habilidades que ya tienes como desarrollador web. Espero que este artículo te proporcione el conocimiento necesario para ayudarte a decidir si NativeScript es lo correcto para ti.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.