Flutter o cómo construir atractivas aplicaciones nativas en tiempo récord

Rhinno

,

Flutter

Flutter o cómo construir atractivas aplicaciones nativas en tiempo récord

Yoel González | nov 13, 2020

¿Qué es Flutter?

Flutter es un SDK (Software Development Kit) de desarrollo de aplicaciones móviles de código abierto creado por Google, que permite crear atractivas soluciones móviles nativas de forma ágil.

Captura de pantalla 2020-11-13 a las 15.51.23

¿Por qué Flutter?

¿Qué aporta? ¿Por qué no utilizar otro framework de desarrollo ya existente como React Native, Xamarin o Nativescript?

Todos estos frameworks buscan atajar un mismo problema: el ser capaz de construir aplicaciones multiplataforma con un solo código base y que tenga la estética, funcionamiento y eficiencia de una app nativa. Elegir un framework u otro no es tarea sencilla, pero hay una diferencia fundamental entre estos otros y Flutter: la visión a largo plazo.

Flutter no es solamente un framework, sino que es un completo SDK para construir aplicaciones que interactúan con una pantalla. Contiene todo lo necesario para crear la interfaz de usuario, incluido el renderizador y los objetos a renderizar (que Flutter llama widgets). El hecho de que Flutter sea un SDK, permite llevarlo prácticamente a cualquier dispositivo que tenga pantalla (como por ejemplo una Raspberry Pi). Además, el renderizador de Flutter utiliza Skia, un motor gráfico de código abierto.

Cada vez con más frecuencia, las apps se están expandiendo más allá del mundo de los teléfonos móviles. Es común acceder a apps a través de diferentes dispositivos, como asistentes personales (Google Home HUB, Lenovo Smart Display, etc.), monitores en vehículos, electrodomésticos, wereables, smart watches, etc. Muchos de estos dispositivos tienen pantallas interactivas, y la arquitectura de Flutter permite crear atractivas aplicaciones también para ellos.

Con Flutter solo es necesario construir la aplicación una vez, y ya está lista para funcionar en dispositivos multiplataforma.

Captura de pantalla 2020-11-13 a las 15.57.24

El lenguaje Dart

Flutter usa el lenguaje de programación de código abierto Dart, también creado por Google. El objetivo de Dart no era reemplazar JavaScript como el principal lenguaje de programación web en los navegadores, sino ofrecer una alternativa más moderna. Sin embargo, su simbiosis con Flutter ha catapultado su popularidad. Estas son algunas de las características que junto con Flutter los hacen únicos:

  • Dart es uno de los pocos lenguajes que está bien adaptado para ser compilado tanto AOT (ahead-of-time) como JIT (just-in-time). Usa la compilación JIT durante el desarrollo, utilizando un compilador que es especialmente rápido y que incluye la opción Stateful Hot Reload para agilizar el desarrollo. Luego, cuando una aplicación está lista para su lanzamiento, se compila AOT. Consecuentemente, con la ayuda de herramientas y compiladores avanzados, Dart puede ofrecer lo mejor de ambos mundos: ciclos de desarrollo extremadamente rápidos y tiempos de ejecución y puesta en marcha rápidos.

  • Dart facilita la creación de animaciones y transiciones suaves que se ejecutan a 60fps. Dart puede hacer object allocation y garbage collection sin bloqueos. Esto ayuda a evitar el jank y el sutter de la interfaz de usuario. Al igual que JavaScript, Dart evita la programación anticipada y la memoria compartida. Debido a que las aplicaciones Flutter están compiladas en código nativo, no requieren un puente lento entre dominios, el llamado “puente Javascript”, que a menudo genera cuellos de botella en el rendimiento (este puente es típico en otros frameworks como React Native).

  • Dart permite que Flutter evite la necesidad de un lenguaje de diseño declarativo separado como JSX o XML o constructores de interfaces visuales separados, porque el diseño declarativo y programático de Dart es fácil de leer y visualizar. Con todo el diseño en un solo lenguaje y en un solo lugar, es fácil para Flutter proporcionar herramientas avanzadas que hacen que el diseño sea un juego de niños.

  • Los desarrolladores han descubierto que Dart es particularmente fácil de aprender porque tiene características que son familiares para los usuarios de lenguajes estáticos y dinámicos.

Captura de pantalla 2020-11-13 a las 16.00.34

Stateful Hot Reload

Una de las características más populares de Flutter es su hot reload (recarga en caliente) extremadamente rápida. Durante el desarrollo, Flutter utiliza un compilador de JIT que puede recargar y continuar ejecutando código normalmente en menos de un segundo. El estado de la aplicación se mantiene en las recargas siempre que sea posible, de modo que la aplicación puede continuar desde donde se quedó. Un ejemplo puede verse en el siguiente video:

Hot_Reload

 

Widgets

Los widgets son los elementos que afectan y controlan la vista y la interfaz de una aplicación. En Flutter, cada elemento de la pantalla es un widget, siendo estos los bloques de construcción sobre los que se levanta una aplicación. La idea central es que seas tú quien construya su propia UI con widgets, y dado que no utiliza los widgets nativos de la plataforma sino que proporciona sus propios widgets, permite interactuar con ellos de manera sencilla y limpia.

Captura de pantalla 2020-11-13 a las 15.29.41

En este código todo es un widget. El widget Center centra su hijo dentro de su padre (por ejemplo, la pantalla). El widget Column ordena a sus hijos (una lista de widgets) verticalmente. La columna contiene un widget Text y un widget Icon (que tiene una propiedad color).

Al contrario que otros frameworks, Flutter eleva los widgets y el renderizador desde la plataforma a la aplicación, lo que les permite ser personalizables y extensibles. Todo lo que Flutter requiere de la plataforma es un canvas en el que renderizar los widgets para que aparezcan en la pantalla del dispositivo, y acceso a eventos (toques, temporizadores, etc.) y servicios (localización, cámara, etc.). Mover los widgets y el renderizador a la aplicación afecta al tamaño de esta, haciendo que las aplicaciones de Flutter ocupen más que otras aplicaciones similares creadas con otros frameworks.

Flutter intercambia este tamaño por unos widgets de apariencia agradable, más rápidos, extensibles y personalizables, y debido a que los widgets ahora son parte de la aplicación, se pueden añadir nuevos widgets y los ya existentes se pueden personalizar para darles un aspecto diferente o para que se ajusten a la marca de la empresa.

Captura de pantalla 2020-11-13 a las 15.30.38

Conclusiones

  • Flutter proporciona una alta velocidad de desarrollo debido a sus herramientas (Hot Reload incluido), sencillez y compatibilidad.
  • Permite crear atractivas aplicaciones nativas a partir de un solo código base, ahorrando dinero y riesgos.
  • Es gratuito y de código abierto, y está apoyado por Google, que lo usa de forma habitual en sus propias aplicaciones como la aplicación Google Ads Mobile.
  • Otorga una gran capacidad de control al desarrollador mediante sus widgets personalizables y extensibles.
  • Su lenguaje, Dart, fue diseñado específicamente para ser familiar y fácil de aprender.
  • La combinación de compilaciones AOT y JIT proporciona lo mejor de los dos mundos logrando aplicaciones ágiles tanto en desarrollo como en productivo.
¡Suscríbete!