Saltar al contenido

Flutter VS Ionic | Conoce sus diferencias y sus fortalezas (2021)

15 marzo, 2021

¡Eyyyy hola que tal Dev! Muy buenas, bienvenido al canal. Aitor otra vez por aquí. Y hoy comenzamos sección en la web. La sección de Flutter ¿qué te parece? 😊

Banner Flutter vs Ionic

Alguna vez ha rondado tu cabeza la pregunta ¿qué será mejor, Flutter o Ionic? O mejor dicho ¿qué es mejor para mí? Pues si ha sido así, no te preocupes. No estás solo, es una pregunta que me rondó a mí también hace un tiempo, y seguramente a otras muchas personas también.

Cómo sabrás, mi nombre es Aitor y soy desarrollador de software desde hace bastantes años ya. Y en el artículo de hoy voy a responder, de la mejor manera posible a tu pregunta.

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 comenzar con el artículo, déjame decirte que lo he grabado en video y lo he subido para ti. Por si eres de mis lectores a los que les gusta más ver que leer. Solo te pido, que si te gusta/ayuda que te suscribas al canal desde aquí.

 

 

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

 

Información adicional

Es muy importante que, si el artículo o el video te ha gustado, que te suscribas al canal de YT para no perderte nada de lo que vaya subiendo nuevo. Lo puedes hacer desde aquí. Subo video todas las semanas y os cuento mi experiencia cómo desarrollador de apps desde 2014.

También quiero comentarte que te pases por aquí. Se trata de El Circulo y es una comunidad que estoy montando alrededor del desarrollo de apps en la que te enseñaré a hacerte un sueldo pasivo con el desarrollo móvil. Dentro están todos los detalles.

Sin nada más que agregar me despido. Nos vemos en el siguiente artículo. Hasta entonces, que vaya bien.