Reaccionar Native vs Ionic vs NativeScript: una guía práctica

blog.jscrambler.com/react-native-vs-ionic-vs-nativescript-a-practical-guide

Volver al blog

31 de octubre de 2018
por Wern Ancheta

En este artículo, veremos tres de los marcos más populares cuando se trata de desarrollar
aplicaciones móviles que se ejecutan tanto en Android como en iOS: React Native, Ionic y
NativeScript .

Específicamente, vamos a comparar los marcos en función de los siguientes criterios:

Código y herramientas de desarrollo : qué idioma usa, cómo se crea la interfaz de

usuario, qué herramientas se utilizan para desarrollar aplicaciones.
Flujo de trabajo de desarrollo : cómo se ve el proceso de desarrollo de aplicaciones.
API nativas y extensibilidad : qué API nativas están disponibles y lo fácil que es
agregar funcionalidad nativa.
Rendimiento - ¿cómo funciona cada marco?

Al final de este artículo, tendrá una idea clara de qué marco desea utilizar para su próximo
proyecto de aplicación móvil.

Descripción general del marco

1/7
Antes de continuar, veamos primero una descripción general rápida de los tres marcos.

Reaccionar nativo

React Native es un marco de desarrollo de aplicaciones móviles creado por Facebook. Te

permite crear aplicaciones móviles nativas con React y JavaScript. Además de Facebook,
también lo utilizan Bloomberg, Tesla, Uber, Wix y Discord para sus aplicaciones.

Iónico
Ionic es un marco para el desarrollo
de aplicaciones móviles híbridas PWA
y de alto rendimiento. Fue creado por
Drifty Co. Las aplicaciones populares
como Sworkit, Untappd y Dow Jones
MarketWatch se crean utilizando
Ionic.

NativeScript

NativeScript es un marco para construir aplicaciones móviles nativas. Fue creado por
Progress. Algunas aplicaciones que utilizan NativeScript incluyen MyPUMA, Regelneef y UH
Now. SAP también lo usa para su Kit de Desarrollo Móvil .

Código y herramientas de desarrollo

Cuando se trata de código, Ionic es lo más fácil de aprender , especialmente si viene de un
entorno de desarrollo web. Las aplicaciones se crean utilizando HTML, CSS y JavaScript, por
lo que la forma en que construyes la interfaz de usuario y agregas la funcionalidad es muy

2/7
parecida a la forma en que lo haces en la web. Como Ionic se ejecuta básicamente en una
vista web, la mayoría de las bibliotecas de JavaScript que está utilizando en la web también
deberían funcionar.

Ionic viene con componentes de UI que pueden tener un estilo diferente dependiendo de la
plataforma en la que se ejecuta su aplicación.

Ionic está estrechamente acoplado con Angular , por lo que es el marco de JavaScript
predeterminado que se utiliza al crear un nuevo proyecto. Sin embargo, la última versión de
Ionic ( Ionic 4 ) es un framework agnóstico. Esto significa que los desarrolladores pueden
elegir no usar ningún marco, o usar marcos populares como React o Vue.

Por otro lado, React Native utiliza la sintaxis JSX de React para crear la interfaz de
usuario de la aplicación. Si no está familiarizado con React, es una biblioteca de JavaScript
para crear interfaces de usuario que también es mantenida por Facebook. React Native
viene con una colección de componentes de UI, la mayoría de ellos funcionan tanto en
Android como en iOS, pero algunos solo funcionan en una plataforma.

React Native utiliza Flexbox para diseñar la interfaz de usuario. Esto funciona de la misma
manera que la versión web, pero no todas las propiedades son compatibles y los valores
predeterminados son diferentes. El estilo general se logra utilizando un subconjunto de CSS,
pero en lugar de la sintaxis a la que estamos acostumbrados en la web, los estilos se
declaran utilizando objetos y propiedades de JavaScript. Estas propiedades se traducen de
nuevo a su origen CSS (por ejemplo, se background-color convierte backgroundColor ), por
lo que es fácil de aprender.

React Native usa JavaScript para agregar funcionalidad. Es compatible con ES6 de forma
predeterminada , por lo que la mayoría de los tutoriales que ves en Internet también lo
usan. Tenga en cuenta que React Native no tiene el mismo entorno de JavaScript que el que
encuentra en un navegador web. Esto significa que la mayoría de las bibliotecas que está
acostumbrado a usar en un entorno web no funcionaría , especialmente las que tienen
acceso al DOM del navegador. La mayoría de los paquetes npm deberían funcionar ya que
el entorno de JavaScript en React Native es similar al de Node.

Por último, NativeScript utiliza un lenguaje basado en XML para la declaración de UI, un
subconjunto de CSS para el estilo y JavaScript para la funcionalidad. Los widgets de
NativeScript están unificados, por lo que la mayoría de ellos funcionan tanto para iOS como
3/7
para Android. A diferencia de React Native, los widgets de NativeScript vienen con un estilo
predeterminado, ya sea Material Design o Cupertino, dependiendo del dispositivo en el que
se ejecute. Además de la generosa colección de widgets , NativeScript también viene con
componentes de IU de nivel profesional como cuadros, gráficos y calendarios.

NativeScript lo alienta a usar TypeScript y Angular para crear aplicaciones , pero también
puede usar JavaScript simple si está creando aplicaciones más pequeñas.

Flujo de trabajo de desarrollo

El flujo de trabajo de desarrollo se ve bastante similar para cada marco:

1. Genera un nuevo proyecto usando una herramienta de línea de comandos.

2. Modificar la estructura de directorios por defecto (opcional).
3. Construye la interfaz de usuario utilizando los componentes / widgets
proporcionados.
4. Añadir diseño y estilo personalizado.
5. Ejecute la aplicación y obtenga una vista previa en el emulador / simulador.
6. Añadir funcionalidad.
7. Instalar paquetes.
8. Usa los paquetes.
9. Depurar / probar la aplicación.
10. Confirmar cambios en el control de la fuente.

Todos los marcos también tienen una función de recarga en vivo , lo que hace que sea
realmente fácil de ver cómo se ve la aplicación a medida que se realizan cambios en el
código.

La diferencia entre los tres se centra en las herramientas utilizadas para desarrollar y
depurar aplicaciones.

Cuando se trata de la depuración, React Native le permite depurar su aplicación utilizando

las Herramientas para desarrolladores de Chrome . Sin embargo, no todas las funciones
que está acostumbrado a usar para proyectos web están disponibles. Por ejemplo, no tiene
un inspector de elementos. Hay un inspector de vistas en la aplicación, pero solo es útil para
aplicaciones muy simples. Esta es la razón por la que la comunidad ha creado herramientas
como React Native Debugger y Reactotron , y se ha convertido en la forma preferida de
depurar las aplicaciones React Native.

Por otro lado, las aplicaciones de NativeScript se pueden depurar utilizando las
herramientas de desarrollo de Chrome o la extensión de VisualScript Code NativeScript . No
hay una herramienta preferible para el trabajo porque cada uno tiene sus propias fortalezas
y debilidades. Chrome Developer Tools tiene más funciones completas en NativeScript, ya
4/7
que, además de la depuración de JavaScript, sus elementos, recursos e inspector de red
también son muy útiles. Sin embargo, si desea que toda la depuración, la integración del
emulador y el control de versión se realicen dentro de su editor de texto, use la extensión de
código de Visual Studio.

Por último, Ionic es esencialmente un marco de front-end que puede ser depurado como su
página web habitual utilizando la herramienta de desarrollo que viene con el navegador que
está usando. En cuanto a los complementos nativos, se pueden depurar con Android Studio
o Xcode.

API nativas y extensibilidad

Si necesita usar funciones de dispositivos nativos como Cámara, Geolocalización, Mapas y
Bluetooth, Ionic proporciona Ionic Native , un contenedor TypeScript para complementos de
Cordova para acceder a las API de dispositivos nativos. Si un complemento de Cordova no
tiene un envoltorio nativo iónico correspondiente, puede usarlo directamente o escribir uno
mismo. Si no hay un complemento de Cordova disponible para una característica nativa que
desea utilizar, la única opción es desarrollar el complemento usted mismo. Aunque esto
requiere conocimiento de las API de acceso al hardware de la plataforma nativa.

React Native viene con una pequeña colección de API de hardware para acceder a las
funciones nativas del dispositivo. Esto incluye Geolocalización, Rollo de cámara, Vibración y
otros. Aunque esta colección es pequeña, la comunidad lo compensa al traer una gran
cantidad de módulos nativos para acceder a todo tipo de hardware de dispositivos mediante
una API de JavaScript.

En React Native, rara vez es necesario que escriba su propia implementación para las
funciones de dispositivos nativos a las que desea acceder. Esto se debe principalmente a lo
enorme que es la comunidad React Native. La mayoría de las funciones nativas a las que
querrá acceder ya tienen un módulo de terceros correspondiente . En los casos en que
no exista un módulo o carezca de funciones, React Native también le proporciona las
herramientas para crear sus propios módulos nativos para iOS y Android . Una vez más,
esto requiere una cantidad considerable de conocimientos sobre el idioma nativo y cómo se
accede a las API de hardware en las plataformas que desea admitir.

Por último, NativeScript le permite acceder a las características de hardware a través de sus
complementos. Puede buscar los complementos disponibles en el mercado de NativeScript
. Los complementos de NativeScript también pasan por un proceso de verificación para
garantizar su confiabilidad.

Una característica especial de NativeScript es que le da acceso a todas las API nativas de
la plataforma nativa a través de JavaScript . Esto significa que no es necesario que
escriba ningún código Swift, Objective-C o Java. Sin embargo, aún debe saber cómo
5/7
funcionan las API nativas en cada una de las plataformas.

Actuación
De los tres, Ionic tendrá el peor rendimiento, mientras que NativeScript y React Native
tendrán un rendimiento muy similar al de sus homólogos nativos.

Eso no quiere decir que no valga la pena desarrollar aplicaciones con Ionic. El rendimiento
de Ionic no es de ninguna manera pobre. Las aplicaciones creadas con él se desempeñan
muy bien y eso se debe a que coinciden estrechamente con el caso de uso al que se destina
Ionic. Si miras las aplicaciones en la página de muestra de Ionic , probablemente notarás
estas cosas:

Tienen una interfaz de usuario muy simple; la mayoría de ellos parecen similares.
No hay muchas animaciones y transiciones que deban realizarse en cada página.
No requieren características nativas del dispositivo.

Y debido a que la buena gente de Drifty Co. siempre busca mejorar el rendimiento de Ionic,
generalmente solo notará la diferencia de rendimiento cuando su aplicación necesite
acceder a las funciones nativas del dispositivo.

¿Qué marco elegir?

Al final del día, el marco que elija dependerá en gran medida de su caso de uso.

Si buscas desarrollar un juego con muchas animaciones y partes móviles, debes mantenerte
alejado de Ionic, ya que su rendimiento no solo lo reducirá. No importa cuánto Drifty Co.
ajuste el marco, la penalización de rendimiento es demasiado grande cuando ejecuta la
aplicación en una vista web. Por otro lado, si está buscando desarrollar aplicaciones simples
con una cantidad decente de animaciones, y espera que sus usuarios utilicen dispositivos
más recientes, Ionic debería ser una gran opción, ya que sus habilidades de desarrollo web
existentes son directamente transferibles.

Si el rendimiento es importante para usted, probablemente esté vinculado entre React

Native y NativeScript. En este caso, yo personalmente iría por la opción más popular, y eso
es React Native. Esto se debe a que la popularidad equivale a un gran apoyo de la

6/7
comunidad, que a su vez lleva a la creación de más bibliotecas, herramientas y servicios que
giran en torno al ecosistema. Esto lo beneficia enormemente a usted como desarrollador,
ya que rara vez necesitará escribir bibliotecas para acceder a diferentes API de dispositivos
y servicios.

Es importante tener en cuenta que React Native sigue siendo un marco en evolución. Si está
buscando usar una tecnología más madura y un soporte pagado, NativeScript es el camino a
seguir. Progress, la compañía detrás de NativeScript, ha abierto el marco de trabajo pero
gana dinero con NativeScript al proporcionar soporte pagado y crear servicios y
herramientas de pago que giran en torno a él.

Conclusión
Los marcos híbridos móviles son relevantes hoy en día porque permiten a los
desarrolladores implementar aplicaciones móviles más rápido que sus contrapartes nativas.
Esto se debe principalmente a su forma unificada de desarrollo.

Los desarrolladores solo tienen que aprender un solo idioma para crear aplicaciones para
las dos plataformas principales: Android e iOS. Esto permite a las empresas lanzar un
producto mínimo viable en un período de tiempo más corto. Por lo tanto, pueden penetrar
primero en el mercado, dándoles una ventaja competitiva.

En este artículo, hemos echado un vistazo rápido a lo que React Native, Ionic y NativeScript
tienen para ofrecer. En este momento, debe saber cuál de los tres marcos debe elegir en
función de las necesidades de su proyecto.

Es hora de empezar a construir algo genial!

Además, si está creando aplicaciones con lógica sensible, asegúrese de protegerlas

contra el robo de código y la ingeniería inversa con Jscrambler. Encuentra nuestros
tutoriales a continuación:

Comparte esta publicación de blog

7/7