Skip to content
Aprende Angular de forma rápida y efectiva  Ver curso

Ionic VS React Native VS NativeScript – Actualizado

Hace varios meses escribí un artículo comparando Ionic, React Native y NativeScript como tecnologías más prometedoras del futuro mobile. Tuvo tanto éxito que ahora que llevo más tiempo con Ionic 2 es importante que añada algunos datos interesantes…

Como comenté en su momento, NativeScript está bien para obtener un plus de rendimiento, pero si tengo que nombrar una alternativa potente a Ionic, aprovechando la moda de renderizar sobre nativo, lo que me viene a la cabeza es React Native.

Aún así mi apuesta se mantiene firme con Ionic 2, ahora más que nunca. Te cuento por qué.

Problemas históricos de las apps híbridas

Típicamente JS funciona en un único hilo de ejecución. Aunque tengas el móvil más reciente del mercado, tu app híbrida usa el mismo núcleo del procesador tanto para el pintado de la pantalla como para cualquier otra tarea que hagas en la app. Y eso, cuando los smartphones eran menos potentes, provocaba problemas de rendimiento como por ejemplo que al hacer scroll de un listado el desplazamiento fuera a trompicones.

El enfoque singlethread de Javascript es lo que ha dado mala fama a las apps híbridas históricamente, pero hoy en día no es un argumento válido.

No obstante, este problema (actualmente marginal, dada la potencia de los dispositivos actuales) está a un paso de erradicarse gracias a los web workers de HTML5.

Cuando Ionic 2 use Web Workers por defecto para separar UI y lógica en 2 threads distintos, este argumento caerá por siempre en el olvido.

Los beneficios de las híbridas/nativas

Es cierto que NativeScript se ha escuchado bastante últimamente -la propia página de Angular 2 habla de ellos- y no les falta razón. Frente a los problemas de rendimiento que se han encontrado históricamente en las apps híbridas, su propuesta se presenta como una solución a este enfoque: la lógica de negocio, controladores, modelo etc. va en Javascript, y en lugar de pintar HTML, pintas sobre componentes nativos (con lo que el renderizado se ejecuta en otro thread, garantizando una mayor fluidez). A este tipo de solución yo la llamo híbrida/nativa.

En React Native y NativeScript, en lugar de renderizar HTML sobre un WebView, se renderizan componentes nativos Android/iOS, que se pintan en su propio thread, ganando fluidez.

La idea parece muy novedosa, pero lo cierto es que también la han aplicado los señores de Facebook con su alternativa: React Native, que sin duda, por el estado maduro y por la compañía que tiene detrás, es el rival más potente que veo para Ionic.

Cuando no trabajas con una app 100% nativa y necesitas algo realmente novedoso, puede ser que aún no esté soportado por tu plataforma. Las híbridas/nativas tienen otra ventaja aquí respecto a las híbridas convencionales: Integrar código nativo es más sencillo.

Contrapartida de las apps híbridas/nativas

Las híbridas/nativas son buenas si para ti lo prioritario es la fluidez de la app incluso en móviles de gama media/baja y tus únicos targets son Android e iOS, pero evidentemente, no todo son ventajas:

  • Curva de aprendizaje: Al no utilizar HTML sino sus propios componentes (tipo xml), tendrás que aprenderlos todos por lo que la curva de aprendizaje es más larga y además no te garantiza que lo que aprendes te vaya a servir en el futuro. Esto no es un gran inconveniente si comparamos con Ionic, ya que al final éste también aporta un montón de directivas que debes aprender.

  • Estilos: Siguiendo con la curva de aprendizaje, no solo deberías preocuparte por como mostrar datos en pantalla, sino de su diseño. React Native tiene su propio sistema para darle estilo a tu app que se suma a la curva de aprendizaje y que además, personalmente, no me gusta. NativeScript es algo mejor en este sentido y te permite utilizar CSS, aunque no todas las propiedades habituales CSS están disponibles.

  • Plataformas: De momento, tanto React Native como NativeScript están solo disponibles para Android y iOS. No es que la cuota de mercado de smartphones Windows sea muy elevada, pero seguro que quieres que tu app esté en cuantos más smartphones mejor…

  • No funciona en web: Es importante recalcar esto y de hecho yo lo considero el punto más importante de todos. Tu aplicación React Native o NativeScript no es una web y por tanto no podrás usarla como tal. Dile adiós a tu web mobile.

Tu aplicación React Native o NativeScript no es una web y por tanto no podrás usarla como tal. Dile adiós a tu web mobile.

React Native vs. NativeScript

No es que tenga nada contra NativeScript. De hecho, en Barcelona mantuve una charla muy animada entre cervezas con Sebastian Witalec, del equipo de Telerik y uno de los principales evangelizadores de NativeScript. NativeScript está bien y tiene una integración muy buena con Angular. El problema es que la comunidad que hay detrás no me parece excesivamente grande y Telerik, su principal impulsora, no tiene la dimensión ni la repercusión de Facebook.

Cuando digo que React Native será la principal competidora de Ionic es por el mero hecho de tener a Facebook detrás: su repercusión es brutal. Es un poco como el efecto que tuvo AngularJS frente a otros frameworks de su época como EmberJS o Backbones. AngularJS se erigió de entre todos con facilidad gracias al empujón de Google. En el siguiente gráfico podemos ver como, efectivamente, React Native está teniendo mucha repercusión.

Ionic VS React Native VS NativeScript

Interés por estos frameworks en el último año
 

Puedes ver en el gráfico que NativeScript se queda muy por debajo del resto.

Personalmente, me gusta más trabajar con Angular 2 que React (aunque no sean bien bien lo mismo), pero si bien React es la librería de referencia para trabajar con React Native, el enfoque Platform Agnostic de Angular2 hace que podamos integrarlo también con React Native. El amor por Angular 2 no es, por tanto, una limitación para usar React Native.

El enfoque Platform Agnostic de Angular 2 hace que lo podamos integrar con React Native.

Ionic 2 como futuro de las híbridas

A estas alturas estarás pensando… ¿entonces… por qué dices que Ionic 2 seguirá dominando? Pues por los siguientes detalles:

  • Es web: A diferencia de las otras dos soluciones, aquí estás desarrollando con tecnología web pura y dura. Esto significa explotar Angular2, HTML5 y CSS3 en toda su magnitud. Además, significa que tu app funcionará también como web mobile.

  • Más plataformas: Además de Android y iOS, también funciona con Windows y por supuesto en web, así que llegarás a más usuarios.

  • Más accesible: Las tiendas de aplicaciones suponen un filtro de entrada brutal. Cuesta posicionarse y el usuario no quiere instalar nada que no sea imprescindible. Si tu app también está disponible vía web, te será mucho más fácil llegar al usuario.

  • Enfoque PWA: Hace poco comentaba que las Progressive Web Apps son el futuro de las apps. Estamos hablando de webs móviles con un toque nativo como el soporte offline o las notificaciones push. Ionic 2 viene configurado por defecto como una PWA, para que le saques el máximo partido en todos los escenarios.

  • Eficiencia: Ionic 1 iba bastante fluido en smartphones de gama media. Ionic 2 mejora gracias a Angular 2, que está diseñado de cero para solucionar los problemas de rendimiento de su predecesor. El resultado… debería volar sobre la pantalla.

  • WebWorkers: Angular 2 facilita el uso de Web Workers para mover toda la GUI a otro thread. Sé de buena tinta que Ionic 2 incorporará las mismas facilidades para usar web workers que Angular 2. ¡Se acabaron los scrolls a trompicones!

  • Potencia: Cada día los smartphones son más potentes y los navegadores para móviles están más trabajados, así que los problemas de rendimiento del pasado deberían quedar cada vez más enterrados.

Ionic 2 destaca por su versatilidad. Ser web es justamente una ventaja: llegarás a los usuarios nativos, pero también a los que no quieren instalarse apps. Además, supera con nota cualquier duda acerca del rendimiento.

Últimas diferencias

El lector avispado se habrá dado cuenta de un par de detalles. En primer lugar, los gráficos de búsquedas de google ponen a React Native como más popular, con diferencia, en comparación por ejemplo a Ionic 2. Además, uno de los motivos por los que considero menos importante a NativeScript es que no tiene una empresa detrás del tamaño de Google o Facebook. Sin embargo, bien podría ser esa también la situación de Ionic.

Respondiendo a la primera cuestión hay que tener en cuenta que React Native hace tiempo que tiene Release Candidates con las que trabajar de forma estable. En cambio, Ionic 2 es más reciente y su versión estable se espera para este diciembre 2016. Con esto quiero decir que lo normal es que sea a partir de ahora cuando empecemos a ver verdadera tracción de Ionic 2. Además es lógico pensar que Ionic 2 aglutinará, a la larga, todo el interés que levanta Ionic 1.

Lo normal es que sea en un futuro cercano cuando empecemos a ver verdadera tracción de Ionic 2.

En cuanto al equipo que hay detrás, es cierto que los de Ionic tampoco tienen el tamaño de Google o Facebook, pero la tecnología (Angular 2) sí que viene empujada por Google, Ionic ha recibido en Abril 2016 una nueva ronda de financiación de 8.5M$ y a diferencia de Telerik, Ionic se dedica exclusivamente a vender herramientas para este framework.

De hecho, a mi personalmente me gusta mucho más la aproximación comercial de Ionic 2, fíjate:

Ionic ha hecho Open Source el 100% del framework, con infinidad de componentes que puedes usar de forma totalmente gratuita. Sus planes de monetización se limitan a vender servicios backend que se integran muy bien con el framework.

NativeScript, en cambio, proporciona unos componentes más básicos y ofrece ciertos componentes premium previo paso por caja. En mi opinión es un error no añadir por defecto los componentes más atractivos del framework. Puede suponer un freno a la adopción de NativeScript.

Conclusiones

Yo siempre he defendido que la competencia ayuda al progreso y si bien mi apuesta es por Ionic 2, estoy encantado de que haya una alternativa potente como React Native, por que seguro que esa dualidad los va a hacer más fuertes y potentes a nivel individual.

Es más, si tu único objetivo es una app en Android y iOS y quieres explotar el rendimiento al 110%, te recomiendo que le des un vistazo a React Native, e incluso a NativeScript, pero si tu objetivo con una híbrida es llegar rápido y bien a cuantos más mejor y con la menor fricción, te recomiendo Ionic 2.

En todo caso, recuerda que si lo que quieres es llegar al máximo número de plataformas posible, incluyendo web, Ionic 2 es tu elección.

¿Ya has probado alguna de estas opciones? ¿Crees que hay algún otro punto clave por comentar?

¡Saludos!

Published inAngular 2ionicIonic 2Ionic FrameworkPhoneGap

28 Comments

  1. Excelente artículo. Una duda que tengo es si las apps creadas con Ionic 2 necesitan conexión a internet para funcionar.

    Saludos.

    • Enrique Oriol Enrique Oriol

      No, con Ionic 2 estás cargando una web en local que sirve el propio smartphone. Evidentemente sí necesitarás conexión si quieres usar datos de un servidor externo (descargarte el parte del tiempo, un catálogo de productos, etc).

      Saludos

  2. Jaime Díaz Jaime Díaz

    Hola, te felicito muy buen articulo. Tengo planeado en ruta poder explorar bondades de Angular 2 y algunas librerias/fw de paso en el camino, IONIC2 ha sonado bastante y sería interesante sacar un buen provcho de éste. Tengo una duda amigo: ¿con IONIC2 podríamos acceder como al HW del dispositivo movil por así decirlo, es decir hacer uso digamos de la cámara mediante alguna fn(…) entre otras características nativas?, quizás con ReactNative?. Gracias.

    • Enrique Oriol Enrique Oriol

      Puedes acceder a las funciones nativas por medio de plugins de cordova: una especie de wrapper JS sobre código nativo iOS/Android. Puedes utilizar los que recomienda Ionic, que son bastantes (ionicframework.com/docs/v2/native/), o incluso crear tu propio plugin (claro que en ese caso tendrás que pelearte con código nativo).

      Sinceramente, creo que vale la pena que le des un ojo a Ionic 2, es muy potente 😉

      ¡Un abrazo!

  3. JB JB

    Hola Enrique,

    Te dejo mi opinión por si aporta, hace tiempo vengo utilizando Ionic 2 en la cual estoy desarrollando un app.
    Sinceramente estoy bastante decepcionado del framework por hecho de que hasta las cosas mas básicas no funcionan!!

    Si bien al hacer un ejemplo de juguete tiene mucha pinta pues todo funciona bien, cuando encaras una aplicación de mayor porte y comienzas a hacer cosas algo más complicadas enseguida te encuentras con un error detrás del otro lo que termina haciendo casi inviable utilizar el framework.

    Entiendo que todo esto se va a ir solucionando con el tiempo, pero ese tiempo pueden ser muchos meses y más de 1 año, y en los tiempos que se manejan hoy en día esperar 1 año para que te solucionen cosas básicas es como esperar demasiado.

    Saludos!

    • Enrique Oriol Enrique Oriol

      Hola,

      Me sorprende mucho tu experiencia. La verdad es que yo he hecho cosas ciertamente complejas con el framework y sin encontrar demasiados problemas (ojo, estamos hablando de algo que, aunque se espera para este mes, de momento aun está en beta).

      ¿Con qué casos te has encontrado estos errores que comentas?

  4. Juan Leo Juan Leo

    Actualmente estoy desarrollando una app en Angular 2 y quería que se pudiera usar al menos en Android, no sabía con qué trabajar puesto que no he tocado ninguna de estas tecnologías. Ahora lo tengo mucho más claro. Muchas gracias por el artículo.

    • Enrique Oriol Enrique Oriol

      ¡Me alegro de haberte ayudado!

      Saludos!!

  5. Excelente articulo, como tu, le apuesto a Ionic, saludos desde Venezuela.

  6. Muy chida y util información, gracias 🙂

  7. lenier lenier

    quisiera saber si es posible con Ionic 2 crear un app para conectarme a google drive subir y descargar archivos en una cuenta. Gracias y buen articulo

    • Enrique Oriol Enrique Oriol

      Claro, siempre y cuando Google Drive tenga una API para ello (y la tiene), no hay problema en hacerlo con Ionic.

      Saludos

  8. Bryan H Bryan H

    Hola, me gusto mucho la publicación. Actualmente tengo desarrollada una aplicación web para un restaurante (crear clientes, productos, ordenes, etc) hecha con Node.js y Angular. Quiero crear una app para Android y IOS que consuma la Web API; son 4 tablas de mínimo 200 datos cada una (no los carga todos de golpe).

    Respecto al rendimiento, ¿ionic es buena opción? no necesito utilizar la cámara ni dada de eso, solo comunicarme con el web service en formato json.

    Saludos desde Costa Rica.

    • Enrique Oriol Enrique Oriol

      Si usas el virtual scroll de Ionic 2 no vas a tener ningún tipo de problema cargando las tablas. Ionic cuadra perfecto con la aplicación que comentas.

      ¡Saludos!

  9. Excelente articulo.

    Es bueno que existan otras alternativas como Reac Native.

    Hace unos meses finalice una aplicación en Ionic V1 y la verdad el tema del rendimiento en smarphones de gama baja era un gran detalle porque había que optimizar muchas cosas. Luego de probar Ionic V2 en su momento se notaba verdaderamente un mejor performance en teléfonos de gama baja. No he testeado Ionic V3, espero hacerlo dentro de poco.

    Lo que me gusta de Ionic es que usando Angular puedes trabajar tanto Web y MobileApps prácticamente en un solo ecosistema. Ademas que puedes lanzar tu app rápidamente en el mercado.

    Saludos desde Venezuela.

  10. Ionic 2 + ngrx store vuela , pero aun asi probare react native.
    Y por cierto muy buen articulo.

    saludos

  11. Hola Enrique,

    En primer lugar felicitarte por el artículo. Tal como comentas, parece que son todo bondades y parece que el futuro va a tirar por por éste tipo de aplicaciones de cara la movilidad. He hablado con un compañero y en su actual compañía en su momento tuvieron que desechar el desarrollo en curso basado en Ionic1 debido a que no llegaba a todo lo que llega una aplicación nativa a nivel de acceso a recursos y comportamientos ¿hay algún caso en el que siga sucediendo eso con Ionic2? Parece por lo que comentas en una anterior entrada que se ha mejorado eso bastante, pero podemos hablar de que ha llegado el momento de optar por ésta tecnología en lugar de nativas?

    Un slaudo

    • Enrique Oriol Enrique Oriol

      Como siempre digo, depende del uso que le vayas a dar a la app, cuan intensiva sea de recursos, etc.

      Para la mayoría de apps (comunicación con servidor, mostrar info por pantalla, interacción con el usuario), con Ionic 2 / 3 vas sobrado.

      Si quieres usar las últimas APIs, llegan antes a nativo que a cordova, evidentemente. Por ejemplo, que yo sepa aún no hay plugin disponible para el ARKit que ha presentado Apple recientemente.

      Y para acabar, probablemente para hacer juegos, en nativo tendrás más rendimiento (también es más fácil trabajar en nativo con multi-threading, que es algo bastante útil en gaming).

      Saludos,

  12. Gracias. Muy útil. Salvo las APPs que necesitan rendimiento siempre he creído que el valor de soluciones integrales como IONIC es inigualable. Múltiples plataformas, además de web y un sólo código suena muy bien.

  13. michaeldemonio michaeldemonio

    Muchas gracias por el post, muy bueno; una duda, qué framework me recomiendas para hacer un app cross-platform que permita hacer llamadas de video? la idea es usar WebRTC

    • Enrique Oriol Enrique Oriol

      La última vez que lo miré, Nativescript no soportaba WebRTC. React Native y Ionic si, pero teniendo en cuenta el #patentGate de React (eso lo explicaré otro día), te recomiendo tirar por Ionic. Por supuesto siempre teniendo en cuenta lo que tengas que hacer con ese vídeo.

      ¡Saludos!

  14. Hola Enrique, excelente articulo. Recién estoy comenzando y justamente buscaba algo que me orientara hacia que opción debería tomar, y me gustaría saber cual es tu opinion a casi 2 años de haber publicado este articulo, si sigues optando por Ionic o haz cambiado de opinion ????

    • Enrique Oriol Enrique Oriol

      Sin duda. Aunque todas son buenas opciones. Mi recomendación:

      1) Si quieres reusabilidad en web con cambios mínimos, Ionic de calle.
      2) Si quieres un conjunto muy amplio de componentes que se usan habitualmente en mobile, Ionic también. React Native es bastante más justito en este sentido, y acabas dependiendo de proyectos open source de terceros, que algunos van bien, y otros no. NativeScript lo conozco menos, pero en su momento había algunos componentes de pago.
      3) Si quieres un framework muy bien documentado, de nuevo Ionic.
      4) Si tienes que hacer cosas muy complejas en local, con tareas en background por ejemplo, o vas a necesitar crear tu propio código nativo… Ahí si que te recomendaría React Native. También puedes crear tu propio plugin de Cordova para Ionic, pero la integración con Nativo es más simple en React Native.
      5) Si el rendimiento es fundamental en tu app, o vas a tirar mucho de librerías nativas del sistema y quieres estar siempre a la última versión, de momento te recomiendo también React Native, aunque parece que Ionic 4 (aún en beta) + Capacitor (diría que está en Alpha) podría solucionar este tema.

      Como ves, no hay una opción perfecta, tienes que elegir la que mejor se adapte a tus necesidades.

      ¡Saludos!

  15. Hola amigo, «Ionic2» es como «Cordova» ? Cual sería la diferencia? gracias, y muy buen articulo…

    • Enrique Oriol Enrique Oriol

      En realidad es bastante más que Cordova. Ionic usa Cordova por debajo para generar los binarios de iOS / Android, pero además te ofrece todo un framework de desarrollo web orientado a mobile (barra de navegación, páginas, modales, alertas, router, etc).

  16. Fredy Fredy

    Hola Enrique… habla de Ionic 4 con Angular 7, por fa…!

  17. Muy buen artículo aunque yo lo actualizaría un poco ya que desde entonces las cosas han cambiado bastante. Estoy intentando quedarme con una tecnología mobile para así empezar a crear una app para mi web.

Deja un comentario