Alguna vez ha rondado tu cabeza la pregunta ¿qué será mejor para mi, Flutter o Ionic? O mejor dicho ¿qué es mejor para mí proyecto? Si te estás debatiendo entre los dos y no sabes con cual comenzar, este artículo quizás te interese. Sigue leyendo.
Mi nombre es Aitor Sánchez, soy desarrollador desde 2014, y en el artículo de hoy vas a conocer mi opinión sobre ambos sistemas y porque, finalmente, he continuando trabajando con Flutter aún habiendo empezado con Ionic.
Recuerda, este no es un artículo para decir cuales mejor o peor. Es un artículo para ayudarte a elegir entre los dos cuando te surja esta disyuntiva, que te surgirá.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Si te gusta más ver que leer, aquí el artículo en video
Información previa
Antes de continuar con el artículo, tenemos que aclarar un par de cosas sobre él.
La primera de ellas, y más importante, es que Ionic es un framework de construcción de apps híbridas. Básicamente se aprovecha del WebView del sistema para montar la en app en una capa basada en el estándar HTML (Html, Css, Js).
Por otro lado, Flutter utiliza una capa propia 100% nativa. Básicamente monta una vista en blanco y pinta todo sobre ella.
Ahora sí, continuemos.
Qué lenguaje de programación usan
Pasemos a ve con que se programa en cada uno de los sistemas:
Para Flutter, Dart
En primer lugar, Flutter usa un lenguaje de programación relativamente “nuevo” en el mercado llamado Dart. Es un lenguaje de programación que varía un poco de paradigma actual pero que es muy, pero que muy, potente.
Por otro lado, Flutter utiliza Dart para hacer todo. Tanto la vista, cómo el estilo, cómo la lógica se programará con este lenguaje de programación. Que es, a fin de cuenta, una clarísima ventaja.
Saliendo de las apps un segundo, Dart ya está empezando a emplearse en un buen número plataformas adicionales. Plataformas cómo la web, el server o el escritorio.
Así que, por esta última razón, es una gran opción para aprenderlo cómo siguiente lenguaje de programación.
Un detalle más, en la actualidad y tras el censo que hace GitHub, sólo hay un porcentaje de 1.3% de programadores que sabe programar aquí. Pero está creciendo muchísimo en popularidad.
No es necesario que nos enrollemos más, así que pasemos al siguiente punto.
Para Ionic, TypeScript
Esta es una de las ventajas con las que cuenta Ionic. Para programar en él vamos a utilizar el estándar HTML que haya en el momento de leer este artículo.
No es necesario comentar que gran parte de la comunidad del desarrollo de apps cuenta con conocimientos de desarrollo web. Pero no solo eso, esto es una clara ventaja para los desarrolladores web nativos que quieran meter el hocico en las apps.
Al igual que en la web, la vista se programará en HTML. El estilo se programará en SCSS, que para el que no lo sepa es un Framework CSS que nos permite escribirlo en cascada y luego compilarlo, y TypeScript para la lógica de negocio de la app.
Si no sabes lo que es TypeScript, es, básicamente, un JavaScript con proteínas. Tiene tipado estático, es fuertemente tipado y es orientado a objetos. Tiene sus clases bien hechas, no cómo pasa en JS, y para los que venimos de lenguajes cómo Java, es un placer usarlo.
Aquí te dejo el primer video de la lista en la que estoy subiendo el curso de TypeScript, por si te interesa:
Bien, ya conociendo un poco más de los lenguajes de desarrollo que usan, pasemos al siguiente punto.
El Deploy/Despliegue
El segundo punto que me ha parecido más importante es, cómo se despliega cada una de las apps que hagamos con cada uno de los sistemas.
Básicamente, por que depende de lo que quieras hacer te servirá uno u otro.
Ionic y el WebView
Aunque lo hemos comentado un poco al principio, Ionic utiliza el WebView del sistema donde se ejecute para montar la app.
- iOS/MacOS => El WebView de Safari.
- Android => El WebView de Chrome.
- PC => El WebView de Edge.
Cómo comprenderás, esto tiene sus limitaciones. La primera de ellas es, que en gran parte de las versiones del WebView, el renderizado se hace por software en lugar de por Hardware. Afectando así al rendimiento visual de la app.
Pero también nos permite hacer apps que pesen mucho menos que Flutter. Porque cómo el WebView ya está integrado en el sistema, no será necesario que vaya implícito en cada una de las apps cómo pasa con Flutter.
Flutter y su Surface
Bien, esto hay que explicarlo un poquito más en profundidad para que quede del todo claro.
Flutter, para desplegar su app utiliza la mayoría de cosas propias por debajo. A excepción, lógicamente, de cuando se comunica con la parte nativa que lo hace mediante el api de bajo nivel del sistema donde se esté ejecutando.
De esta manera le permite tener un rendimiento mucho mayor que Ionic, cómo veremos a continuación, por que la compilación es totalmente nativa y el renderizado se hace por Hardware.
La vista se despliega sobre la capa con más abstracción que haya sobre el sistema donde se esté ejecutando. Básicamente, en Android, es una Surface que hace las veces de contenedor de la aplicación. Vamos, algo así cómo un canvas en blanco.
Pero no todo es ventaja, visto de este modo parece todo muy chulo, pero al ser todo propio, y no llevar nada integrado en el propio sistema, las aplicaciones que se montarán aquí tendrán un peso más considerable.
Las vistas
Continuando con el artículo, ahora le damos paso a las vistas de la app.
Ionic y el estandar HTML
Cómo hemos mencionado por encima, ya sabemos que Ionic usa los estándares HTML para programar sus vistas.
Esto es algo muy bueno para él porque hay muchísima gente que sabe tocar HTML y CSS.
Tiene una api bien definida, con unas etiqueta html propias que harán que el diseño de las apps sea muy rápido y homogéneo.
¿Y esto por qué? Pues por que el framework ya lleva integrada toda una biblioteca de código CSS implícito que hará que los componentes HTML que vayamos agregando sean exactamente iguales a los componentes nativos del sistema. Incluso discrimina por la plataforma donde se esté ejecutando.
En resumen, nos permite programar las apps basándonos en estructuras webs y todo lo que ello conlleva.
Flutter y sus Widgets
Ahora damos paso a lo que, posiblemente, más me guste de programar en este SDK. Que son sus widgets.
Para que te hagas una idea, todo, absolutamente todo, son Widgets en nuestras vistas. Con todo lo que ello conlleva, lógicamente.
Por esta razón, nos permite modificar toda la vista de nuestra app cómo queramos. La botonera es un Widget, el TabBar es un Widget y todo es un Widget ?
Bien, ¿y qué? Fácil: Todos los widgets tienen uno de los dos siguientes atributos:
- child: Nos permite meter un widget en el espacio que ocupa este widget.
- childrens: En el caso de que sea un contenedor, nos permitirá pasarle un array con los Widgets que queremos incluir.
Aunque quizás no lo veas ahora, esto es potentísimo. Y más sabiendo de que se programan sobre el mismo lenguaje de programación y no hay que está haciendo binds raros.
Para terminar este punto, y este es el punto del cambio del paradigma, los widgets se programan con si fuese la programación de un videojuego.
Básicamente, debes de actualizar los datos en tiempo real y luego pintarlos en un loop que llamas de manera manual. Esto es muy difícil de explicarlo aquí, es mejor que lo pruebes. Las primeras veces te echará para atrás, pero cuando le pillas el rollo es potentísimo.
El uso sin conexión
Esta es una pregunta recurrente que me hacen sobre ellos. No sé porque, la verdad, pero así la dejo ya contestada.
No, ninguno de los dos necesita de conexión a internet para poder funcionar. A menos que, de manera específica, utilices una librería externa en HTML enlazada con un enlace remoto. Que es este último caso, no funcionará. Pero no es nada normal que se haga algo así.
El rendimiento
No quiero hacer el artículo extraordinariamente largo, así que decir que, cómo era de esperar, Flutter aporta mucho más rendimiento a nuestras apps.
Tanto en la parte gráfica al hacer uso del Hardware y el componente nativo, cómo en la parte lógica al hacer uso de sistema propios y el NDK (native development kit) de la plataforma donde se esté ejecutando.
Para hacer un simil, es cómo comparar un juego de navegador (Ionic) con un juego normal de PC (Flutter). La diferencia es clara ¿verdad? Si, ambos cumplirán su función, pero el resultado no es el mismo.
Donde más se nota esta diferencia es en la tasa de refresco de las vistas:
- 30 FPS para Ionic
- 60 FPS para Flutter
Y en las animaciones que se consiguen por esta misma razón.
Plataformas donde puedo desplegar
Para ir terminando con el artículo, veamos las plataformas donde podemos usar nuestra aplicación.
Flutter:
- Dispositivos móviles
- Escritorio
- Web
Ionic:
- Dispositivos móviles
- Escritorio
- Web
- PWA
Algo más que quizás te interese
Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.
Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.
Y ahora si, me despido ya. Espero haber conseguido que te decantes por uno u otro y que comiences el proyecto, que es realmente lo importante. Nos vemos en el siguiente artículo. Hasta entonces, que vaya bien.