Desarrollo móvil híbrido con Flutter

Aquellos que conocéis el mundo del desarrollo móvil, muy posiblemente habréis oído hablar de Flutter. Como framework para el desarrollo híbrido de aplicaciones móviles, Flutter está creciendo mucho en popularidad, lo que hace que un número cada vez mayor de empresas lo estén utilizando: Alibaba, Tencent, AppTree, JD Finance, etc. En la encuesta anual de StackOverflow 2019, Flutter apareció como uno de los frameworks más queridos por los desarrolladores. Al mismo tiempo, un estudio de LinkedIn de este año mostró que Flutter es la aptitud que están incorporando de forma más rápida los ingenieros de software. Antes de entrar en detalle en las bondades que han hecho crecer la popularidad de Flutter rápidamente, repasemos un poco la historia de cómo hemos llegado hasta aquí.

Hasta ahora han surgido diferentes aproximaciones al desarrollo móvil híbrido. La primera podríamos decir que es la basada en convertir el código fuente en código nativo de la plataforma de destino. El mejor ejemplo de esto es Xamarin, que permite desarrollar en lenguaje C# que luego es compilado a código nativo de Android o iOS. El mismo esquema es el que utilizan frameworks de desarrollo de videojuegos como Unity o Cocos2DX.

La segunda aproximación es la de frameworks tan populares como PhoneGap (actualmente Apache Cordova). En este caso, la aplicación se desarrolla utilizando HTML5, CSS y JavaScript, de tal forma que los desarrolladores web pueden utilizar todos sus conocimientos previos para crear apps híbridas fácilmente. Todo este código web se muestra en la aplicación a través de un WebView, que podríamos decir que es un pequeño navegador integrado dentro de la plataforma. Otro framework muy popular actualmente, Ionic, se basa en este mismo tipo de tecnología.

La tercera generación de este tipo de aplicaciones ha venido de la mano de React Native, que aprovecha las ventajas de la programación reactiva de ReactJS para la creación de aplicaciones móviles. En este caso, a diferencia de los frameworks anteriores, no se utiliza un WebView ni se compila tampoco todo el código a nativo. La solución en este caso es una arquitectura que combina tres elementos principales: un motor que interpreta el código fuente en JavaScript, unos componentes nativos que permiten acceder a los widgets propios de la plataforma y al hardware del dispositivo (sensores, cámara, bluetooth, etc.), y un tercer elemento que hace de puente de comunicación entre los dos elementos anteriores.

Arquitectura React Native
Arquitectura React Native

Después de React Native, la siguiente iteración en el mundo de las aplicaciones híbridas ha sido Flutter, desarrollada por Google. En el caso de Flutter, el código fuente se escribe en Dart y está basado en programación reactiva, como en el caso de React Native. Aquí, sin embargo, el código fuente se compila a código nativo, por lo que no es necesario ningún puente de comunicación como en el caso anterior, y los tiempos de arranque de la aplicación son más bajos.

Arquitectura Flutter
Arquitectura Flutter

A diferencia de Xamarin, que también traduce todo el código a nativo, Flutter no utiliza los widgets nativos de Android y iOS, sino que utiliza su propio código para crear widgets. Esto hace que todo el código relacionado con estos widgets se integre dentro de la app, y por ello las apps tienen un tamaño considerablemente más grande. Como contrapartida, Flutter permite añadir fácilmente nuevos widgets personalizados, además de incorporar un conjunto muy amplio de widgets para Android, iOS y Material Design.

Com en el caso de React Native, los widgets se dibujan en el canvas de forma optimizada, intentando renderizar sólo aquellos que necesitan ser actualizados en pantalla. Aquellos que no han cambiado, aún en el caso de que se hayan desplazado, se cargan a través de una cache, lo cual hace que las aplicaciones sean mucho más rápidas. En general, la rapidez es una de claves principales del éxito de Flutter.

Por otra parte, la distribución (layout) de elementos o widgets en pantalla no se determina mediante el conjunto de reglas que afectan a cada widget (como pasaría con HTML y CSS, por ejemplo). En cambio, cada widget tiene asociado un layout simple, de tal forma que el número de reglas o restricciones a considerar para colocar un elemento en pantalla es mucho menor. Esto reduce considerablemente el tiempo de posicionamiento de los elementos en pantalla.

Otra ventaja de que el código de los widgets forme parte de la aplicación es que éstos no dependen de librerías de la plataforma Android o iOS. De esta forma, los problemas de compatibilidad se reducen considerablemente, y la ejecución de la app en un SO más nuevo o más antiguo no implica tener que adaptar el código. Sin embargo, muchos consideran que no utilizar los widgets nativos de Android y iOS puede conllevar retrasos o problemas a la hora de disponer de las últimas versiones de éstos cuando hay actualizaciones. Google a ello responde que ellos mismos son usuarios intensivos de Flutter para sus propios proyectos, con lo que tiene motivos de peso para querer mantener su librería de widgets actualizada.

Por último, vale la pena mencionar que el editor de Flutter (por ejemplo, Android Studio con el Flutter plugin) permite recargar la aplicación en caliente. De esta forma, cuando la aplicación se lanza desde el editor, los cambios en el código se trasladan a la aplicación y ésta continúa su ejecución desde el mismo punto en el que se detuvo.

Para aquellos interesados en Flutter para otros entornos más allá del móvil, Google anunció el pasado mes de mayo que ya soporta la programación de aplicaciones web, de escritorio y para dispositivos más pequeños, como una Raspberry Pi o el Google Nest Hub.

Carles Garrigues es profesor de la UOC y imparte docencia en materias relacionadas con la seguridad informática y el desarrollo de aplicaciones para dispositivos móviles. Actualmente dirige el Máster Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles.

Comentar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.