En el desarrollo de apps ¿Flutter o Ionic?

Los frameworks agilizan el trabajo de los programadores a la hora de desarrollar apps.

Su utilización garantiza una mayor productividad durante la jornada laboral, agilizando las horas de trabajo volcadas en el desarrollo.

Para ayudar a los desarrolladores y equipos a tomar la decisión correcta, esta breve guía explica las similitudes y diferencias entre Flutter o Ionic.

¿Qué es Flutter?

Flutter es un framework de Google. Permite, a partir de un mismo código, el desarrollo de apps compatibles con iOS y Android a una velocidad récord.

Basándonos en nuestra experiencia, Flutter mejora el rendimiento de las aplicaciones. Reduce su tamaño y es en general más estable y produce menos errores.

¿Qué es Ionic?

Ionic es un framework originalmente basado en Angular. Permite a nuestros programadores el desarrollo de apps con tecnologías web. Utiliza estándares como HTML, CSS y JavaScript. Prepara el código de una app para que pueda funcionar tanto en plataformas iOS como en Android. También,  ofrece la posibilidad de realizar una compilación más y hacer una ampliación de escritorio basada en ElectronJS. Dando lugar a una Progressive Web App.

Flutter vs Ionic

Ionic y Flutter comparten una visión común de crear aplicaciones de alto rendimiento que funcionen en todos los dispositivos. Sin embargo, sus filosofías centrales no podrían ser más diferentes.

• El principio de Ionic es utilizar la plataforma web. Adoptando estándares abiertos siempre que sea posible.
• Al programar con Ionic se aprende sobre las herramientas y los lenguajes de la web. Es un framework diseñado para ofrecer un gran rendimiento en dispositivos móviles, equipos de escritorio y, especialmente, en la web.
• Flutter, en cambio, crea un ecosistema propio que está en desacuerdo con los lenguajes comunes, conjuntos de herramientas y estándares que se encuentran en el mundo del desarrollo en general.
• Flutter ofrece un rendimiento muy bueno en dispositivos móviles. Pero las limitaciones fundamentales de su arquitectura hacen que sea una mala elección para implementaciones basadas en web.
• La elección de la solución debe basarse en dónde y cómo se planea implementar la app y qué habilidades se conoce o se quiere aprender en el futuro.

Visión compartida

Tanto Ionic como Flutter son únicos entre todos los otros enfoques de desarrollo de aplicaciones. Comparten la visión de crear un framework para diseñar la interfaz de usuario que funcione en todas partes. Ofreciendo un gran rendimiento y una buena experiencia de usuario dondequiera que se ejecute.

Mientras que la mayoría de los enfoques multiplataforma, como React Native, se centran casi exclusivamente en dispositivos móviles. Ionic y Flutter están diseñados para abordar dispositivos móviles, equipos de escritorio y la web. Todo esto con una base de código compartida.

La distinción clave entre ellas es la forma en que cada solución trata de realizar esta visión y en que medida pueden cumplirla.

Filosofías opuestas

Las diferencias entre Ionic y Flutter comienzan con la filosofía central de cada framework. Que no podría ser más diferente. En todo lo que hacemos en Ionic, el principio rector es «utilizar la plataforma» mediante la adopción de estándares y capacidades web abiertas siempre que sea posible.

Cuando se elige Ionic, no se apuesta realmente por Ionic. Se está apostando en la web.

Esto se debe a que Ionic y sus herramientas se basan en tecnologías web abiertas. Desde los lenguajes web que utiliza para crear aplicaciones (HTML, CSS, JavaScript) hasta los componentes de interfaz de usuario basados en estándares que se ejecutan dentro de la app.

Flutter ha optado por realizar su visión creando un ecosistema completamente nuevo y propio desde cero. Desde Dart, el lenguaje que usa Flutter para crear aplicaciones, hasta su motor de renderizado personalizado. Casi todo Flutter se basa en su propio conjunto de estándares que no aprovechan las capacidades del navegador, los lenguaje web y las librerías JavaScript de hoy en día.

Estas filosofías opuestas tienen un profundo efecto en lo que se puede hacer con cada framework, y el impacto que tienen tanto hoy como en el futuro.

Cómo funciona Flutter

El lenguaje central de Flutter es Dart, un lenguaje poco conocido que comenzó en 2011. Aunque lleva unos años, pocos desarrolladores lo conocen hoy (menos del 2%, según la Encuesta StackOverflow de 2019), y rara vez se usa fuera de la comunidad de Flutter.

Al compilar para dispositivos móviles, Flutter usa el compilador Dart para convertir su código Dart en un código nativo que se ejecutará en la plataforma del dispositivo. Junto con un motor de renderizado personalizado para mostrar su interfaz de usuario dentro de una app móvil.

Las aplicaciones móviles de Flutter acceden a las funciones nativas del dispositivo mediante una biblioteca de complementos similar a Ionic y React Native. Flutter no usa los elementos de la interfaz de usuario nativos. Como encontrarías en React Native, ni utiliza componentes web como Ionic. En su lugar, Flutter ofrece su propia biblioteca de widgets de interfaz de usuario.

Las aplicaciones móviles de Flutter acceden a las funciones nativas del dispositivo mediante una biblioteca de complementos similar a Ionic y React Native. Los paquetes listos para usar están disponibles para acceder a las funciones comunes del dispositivo. También se puede escribir código personalizado específico para la plataforma si el paquete o el complemento que se está buscando no está disponible. Utilizando una plataforma de mensajería asíncrona específica de Flutter que maneja la correspondencia entre el cliente (UI) y el host (sistema operativo de la plataforma).

En resumen, para cumplir con los objetivos establecidos de crear un «framework de IU que funcione en todas partes». El equipo de Flutter utiliza el lenguaje Dart. Flutter utiliza un motor de renderizado personalizado, una implementación nativa y un framework web personalizado para el navegador. Reflejando su decisión de construir una arquitectura independiente.

Cómo funciona Ionic

Las aplicaciones de Ionic se crean utilizando los lenguajes web: HTML, CSS y JavaScript. Por lo tanto, si se sabe cómo construir una aplicación web básica, se sabe cómo crear con Ionic.

Con Ionic se puede implementar una aplicación nativa de iOS o Android, una aplicación de escritorio nativa o una aplicación web. Todo desde una base de código compartida única. Cuando se ejecuta en dispositivos móviles, Ionic se ejecuta dentro de un contenedor nativo utilizando Cordova o, más recientemente, Capacitor. Permite el acceso completo a cualquier API o características del dispositivo nativo. La interfaz de usuario de la aplicación móvil hecha con Ionic se ejecuta en un sitio web. Se trata de un navegador que es «invisible» para el usuario. En una implementación de escritorio, Ionic se ejecuta dentro de un contenedor de escritorio nativo como Electron, o directamente en cualquier navegador móvil o de escritorio como una aplicación web progresiva.

Ionic utiliza el estándar de componentes web. Por lo que se ejecuta en cualquier navegador web y son compatibles con cualquier framework JS, incluidos React, Vue y Angular. Ionic proporciona una biblioteca de más de 100 componentes de interfaz de usuario que puede personalizar con CSS para adaptarse a las pautas de la marca. También puede usar Stencil. Un compilador de componentes web de código abierto del equipo de Ionic. Para crear una propia biblioteca de componentes web personalizados. De hecho, cualquier componente de interfaz de usuario basado en web o biblioteca web se ejecutará en Ionic. Lo que ofrece la libertad de aprovechar cualquier elemento de la web para el proyecto.

En el desarrollo de apps ¿Flutter o Ionic?

Es importante tener en cuenta los siguientes factores:

Rendimiento

Flutter podría ser una mejor opción en cuanto a rendimiento. Sin embargo, en muchos casos, Ionic da el mismo rendimiento si está escribiendo una aplicación para un consumidor más estándar o para el uso de empleados. Hay que tener en cuenta que el rendimiento casi siempre se reduce a cómo se escribe el código. No depende de la plataforma o framework que se elija.

Ionic utiliza el tiempo de ejecución y los recursos del navegador estándar. Por lo que el tamaño de la aplicación suele ser muy pequeño. Flutter requiere una gran cantidad de código para aplicaciones muy básicas, porque envia todo ese tiempo de ejecución a pesar de que el navegador ya tiene funciones disponibles para casi todo. Por lo tanto, si se está buscando alcanzar los estándares de rendimiento de Google para aplicaciones web progresivas (PWA) o ocupar un lugar destacado en las páginas de resultados del motor de búsqueda, resultará casi imposible con el rendimiento actual de Flutter en la web.

Portabilidad de código

Cuando se trata de implementar una aplicación en dispositivos móviles y de escritorio, tanto Ionic como Flutter aparecen uniformemente emparejados. Con Flutter puedes crear algunas aplicaciones de iOS y Android con un solo código. Se puede compilar la aplicación para ejecutarse de forma nativa en una serie de plataformas de escritorio.

La pregunta es si se desea implementar la aplicación a través de la web. Ya sea como una aplicación web de escritorio tradicional o como PWA. Las limitaciones inherentes de la implementación web de Flutter probablemente nunca funcionarán para aplicaciones que requieren tiempos de carga rápidos y un rendimiento ágil. Sin mencionar que su enfoque propietario limitará el número de bibliotecas web que se puede aprovechar. Dado que Ionic se basa en la web y se basa completamente en los estándares web, creemos que es justo darle a Ionic la ventaja cuando se trata de dispositivos móviles, equipos de escritorio y la web.

Look & feel nativo

Aunque ninguno de los frameworks utiliza los elementos de la interfaz de usuario nativos de cada plataforma. Flutter e Ionic actualizan automáticamente el diseño de sus elementos de la interfaz de usuario para que coincida con la plataforma en la que se ejecuta la aplicación: Material Design para Android y Cupertino para iOS.

Ambas soluciones le permiten acceder a los servicios de la plataforma y las API nativas a través de una biblioteca de complementos predefinidos, con un conjunto de herramientas para crear sus propios complementos personalizados según sea necesario.

Sin embargo, debe tenerse en cuenta cómo es la implementación móvil nativa de Flutter. Si se está haciendo un trabajo nativo personalizado con Flutter, se debe aprender la manera en que Flutter trabaja con iOS y Android.

Conocimientos y habilidades

Aquí es donde las distinciones entre Ionic y Flutter se hacen realmente evidentes.

Primero, a menos que seas uno de los 1.9% de los desarrolladores que ya conocen Dart, en comparación con el 70% que conoce JavaScript, tendrás que pensar que quieres aprender un nuevo idioma. JavaScript es, por supuesto, una apuesta bastante segura para cualquier desarrollador. La necesidad de los desarrolladores de aprender Dart dependerá únicamente del éxito o fracaso de Flutter como solución viable a largo plazo.

Segundo, debido a que Flutter opera en su propio ecosistema altamente personalizado. Hay que aprender la forma de Flutter de hacer las cosas. Por ejemplo, si está resolviendo problemas de interfaz de usuario. Se aprenderá y dominará el motor de renderizado personalizado de Flutter. No las aplicaciones web en general. Cuando se interactúe con plataformas de dispositivos nativos, se debe aprender la interpretación de Android y iOS de Flutter, no Android o iOS en general. Este factor es uno de los mayores a considerar, al saltar a un silo de desarrollo que no comparte estándares y herramientas con otras plataformas.

En contraste, cuando estás creando con Ionic, no necesariamente estás aprendiendo Ionic. Estás aprendiendo cómo construir aplicaciones web en general. Se aprende a escribir con JavaScript, con CSS y a crear interfaces de alto rendimiento con componentes web basados en estos estándares.

Oportunidades para el futuro

El último factor a considerar es la vida útil del proyecto, la libertad y flexibilidad que se tendrá a medida que la aplicación madure.

Con Ionic, se apuesta por el desarrollo en la web. Por lo que incluso si eliges construir en otras plataformas en el futuro, todo lo que construyas se basará en estándares web abiertos. Y, dado que Ionic se basa en componentes web, puede usarlo con cualquier framework JS. Con Ionic se tendrá la libertad de aprovechar lo que sea que traiga el mañana.

La tecnología está en constante evolución y cada vez más rápido. Por lo que es necesario seleccionar la tecnología más versátil en cada momento. Que permita crear productos digitales y soluciones reusables, modulares, que puedan acoplar y desacoplar componentes fácilmente sin tener que rehacer el producto.

En Syntonize trabajamos con tecnologías Cloud, Api’s y microservicios que nos permiten ser más ágiles a la hora de mantener o evolucionar la solución. Manteniendo la integridad y escalabilidad necesarias.

Gráfica comparativa

Para ayudar a resumir las distinciones clave entre Flutter y Ionic, esta tabla de comparación proporciona un desglose de algunas de las dimensiones que se deben considerar.

El principio de Ionic es utilizar la plataforma web y adoptar estándares abiertos siempre que sea posible. Cuando se trabaja con Ionic, se aprende y aplica las herramientas y los lenguajes de la web. Utilizando un framework diseñado para ofrecer un gran rendimiento en dispositivos móviles, equipos de escritorio y, especialmente, en la web.

Flutter, en cambio, ha optado por hacerlo solo. Creando un ecosistema propio que está en desacuerdo con los lenguajes comunes, los conjuntos de herramientas y estándares que se encuentran en el mundo del desarrollo en general. Por lo tanto, si se elige Flutter, se debe aprender la forma de Flutter de hacer las cosas. Por supuesto, hay beneficios claros para una arquitectura personalizada.

La mejor manera de descubrir cuál es el adecuado para un desarrollo es comenzar a construir con ambos y luego comparar las experiencias.