Skip to content
Aprende a hacer apps móviles con Ionic 2 

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

10 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.

Deja un comentario