¿Qué es Flutter?
La era de Flutter

Así como los físicos teóricos llevan años intentando unificar la clásica física newtoniana con la revolucionara física cuántica. En el mundo tecnológico, los ingenieros llevamos años buscando un kit de desarrollo de software que permita el desarrollo de código 100% nativo bajo una sola rama de desarrollo para cada plataforma, es aquí donde entra en escena el famoso Flutter, un SDK de código abierto que está dando mucho de que hablar, no solamente por lo que representa ya en la actualidad, sino también por la puerta de desarrollo que ha abierto. En este artículo intentaremos explicar algunas de las novedades más importantes del Flutter. 

PARA PONERNOS EN CONTEXTO, HAGAMOS UN BREVE REPASO A LA HISTORIA DEL DESARROLLO DE APLICACIONES MÓVILES:

El desarrollo de las distintas aplicaciones móviles es un campo relativamente reciente. De hecho, su diseño y elaboración por parte de  desarrolladores independientes no tiene más de una década en uso.

1. Las plataformas SDKs

En 2008 Apple lanzó su kit de desarrollo de software basado en el lenguaje Objective-C. Casi paralelamente, Google lo haría en 2009 utilizando Java.

Así pues, era casi obligatorio crear aplicaciones por separado para poder correrlas en ambas plataformas no solamente por los distintos lenguajes utilizados en cada una, sino también por los distintos widgets OEM que cada sistema utilizaba.

OEM

2. Webviews

Los primeros frameworks multiplataforma se desarrollaron utilizando JavaScript y Webviews. A la espera de los SDK de iOS por parte de Apple, estos frameworks hicieron posible que muchos desarolladores independientes comenzaran a construir aplicaciones web para iPhone.

Sin embargo, el principal problema de estos sistemas radicaba en que las aplicaciones utilizaban tecnología web, basada en HTML, por lo que necesitaban de un "puente" que permitiera la conexión de la plataforma con la aplicación desarrollada en JavaScript. Esto, en algunos casos comportaba problemas de bajo rendimiento.

Flutter Views

3. Reactive Views

En 2015 se creó React Native, cuya principal aportación fue simplificar la creación de vistas web a través de la programación reactiva. De este modo, en vez de ejecutar las apps dentro de una webview, las aplicaciones elaboradas a partir de React Native renderizan utilizando views nativas, mejorando de esta manera el rendimiento de las apps.

A pesar de su gran aporte tecnológico, las aplicaciones seguían necesitando de un puente. Esto sumado a que la modernización de los sistemas implicaban una mayor demanda de recursos, lo cual generalmente se traducía en un mayor acceso a los OEM widgets. Por ejemplo, para deslizar la pantalla táctil con el dedo se accedía hasta 60 veces por segundo. El impacto más inmediato era, como es obvio un menor rendimiento.

React Views

4. Flutter

Al igual que el React Native, Flutter también proporciona views nativas. Sin embargo, la principal diferencia radica en que este no necesita de ningún puente que conecte la aplicación con la plataforma, de modo que consigue brindar un rendimiento totalmente nativo tanto en iOS como en Android. Esto lo consigue sustituyendo el lenguaje Javascript por uno más novedoso llamado Dart que es compilado "ahead of time" (AOT) en código nativo para múltiples plataformas.

Los más entendidos entenderán que el no necesitar un puente de conexión entre la aplicación y la plataforma es razón suficiente para su utilización. Sin embargo, lo más revolucionario del Flutter radica en como implementa los distintos widgets.


4.1 Widgets

Los widgets constituyen una de las partes más importantes de una aplicación móvil, pues son elementos que controlan la vista y la interfaz de la aplicación. En esta línea, podemos definir algunos requisitos de un buen widget:

  • Estética: la apariencia es uno de los aspectos más importantes, debiendo verse bien en varios tamaños de pantalla y sentirse naturales.

  • Rendimiento: los widgets deben funcionar rápidamente y percibirse de esta manera por el usuario. 

  • Para aplicaciones modernas, los widgets deben tener la capacidad de ser extensibles y personalizables para encajar perfectamente con la marca del desarrollador.

Flutter sigue la premisa de "si quieres algo bien hecho, hazlo tu mismo", así es, Flutter no utiliza widgets provenientes de plataformas, sino que provee unos propios. Así pues, los widgets brindados por Flutter tienen una estructura fresca con un excelente diseño, que a su vez brindan una percepción de un muy alto rendimiento al funcionar a 60fps.

Flutter Views

Al "trasladar" los widgets de la plataforma a las aplicaciones, estos se vuelven por definición personalizables y extensibles. Ya que al ser los widgets parte de la aplicación, si se requiere pueden añadirse más widgets o incluso modificar los existentes para dar una sensación a gusto de consumidor.  Lo único que Flutter requiere de la plataforma es un canvas que le permita reproducir los widgets para que puedan aparecer en la pantalla del dispositivo, y acceder a eventos y servicios  (cámara, bluetooth, etc.).

Cabe mencionar que aunque no existe un puente como tal, sí que hay una interfaz que conecta el código Dart con el propio de la plataforma realizando una codificación y decodificación de datos, pero este sistema es mucho más rápido que la empleada mediante un puente Javascript.

Un punto negativo y posibilidad de mejora en el futuro es que mover los widgets dentro de la aplicación afecta directamente el tamaño de la aplicación móvil, siendo el mínimo aproximadamente de 4.6MB. No es un gran aumento de ocupación de espacio, pero dependerá de cada desarrollador determinar si los demás beneficios de Flutter valen la pena.


4.2 Estructura o Layout

Para entender el impacto de Flutter en cuanto a la estructura, es necesario dar un contexto general sobre las características de un Layout clásico. Con este motivo pondremos como ejemplo la típica CSS layout, cuyas propiedades o reglas son aplicadas a elementos HTML (widgets). Concretamente, CSS3 define 375 propiedades.

Un mismo elemento puede llegar a tener una gran cantidad de reglas, las cuales pueden interactuar y entrar en conflicto con las de otros elementos (incluso entrando en conflicto) causando una estructura lenta.

Otro problema con los layout tradiciones es que los desarrolladores no pueden añadir nuevos modelos, de modo que los flexbox y las cuadrículas han de ser añadidas al CSS e implementadas en todos los navegadores.

Conociendo como funciona un Layout clásico, podemos explicar mejor las ventajas que ofrece Flutter en estos escenarios:

  • En vez de tener una gran cantidad de reglas para los distintos layout que puedan aplicarse a cualquier widget, Flutter permite que cada widget tenga su propio modelo de layout.

  • El hecho de que cada widget tenga una menor cantidad de reglas de layout, permite optimizar considerablemente el funcionamiento de la aplicación.

  • Las layout son extremadamente simplificadas con Flutter, ya que el código es convertido en widgets.

De hecho, la simplificación que proporciona Flutter es tal que incluso posee un modelo que es tan rápido y ligero que puede ser usado para el deslizamiento de pantallas. La ventaja que esto ofrece es que pueden implementarse distintos y avanzados tipos de deslizamiento, utilizando imágenes GIF por ejemplo:


Ejemplos de Flutter

Ejemplos de Flutter


4.3 El lenguaje de programación Dart

Dart es un lenguaje de programación de código abierto que fue desarrollado por Google con el objetivo de ofrecer una alternativa moderna al clásico JavaScript. En la actualidad se emplea para el desarrollo de aplicaciones móviles, servidores y webs.

¿Pero porqué Flutter usa Dart? Al desarrollar Flutter, el equipo de Google probó más de una docena de lenguajes de programación, y finalmente acabaron escogiendo Dart porque encajaba perfectamente con las características deseadas. A continuación, se listan algunas de las características de Dart que lo hacen indispensable para su uso en Flutter:

  • DART es AOT ("Ahead of Time): esto significa que es compilado de manera muy rápida, predecible y con código nativo. Esto además de hacer que Flutter sea rápido, permite que se pueda personalizar todo (incluso los widgets) de manera virtual.

  • DART puede ser JIT ("Just in Time): esto ofrece muchos más ciclos de desarrollo, pero la ejecución es lenta e incómoda para el usuario.

  • Dart facilita la creación de animaciones y transiciones que puedan correr a 60FPS brindando una percepción de muy alto rendimiento. Dart también puede hacer la asignación de objetos y la recolección de basura sin bloqueos. Y, al igual que JavaScript, Dart evita la programación preventiva y la memoria compartida. 

  • Dart le permite a Flutter evitar la necesidad de un lenguaje de diseño declarativo separado como JSX o XML, o constructores de interfaz visual separados, siendo el diseño declarativo y programático de Dart más fácil de leer y visualizar. Y con todo el diseño en un idioma y en un solo lugar, es fácil para Flutter proporcionar herramientas avanzadas que faciliten el diseño.

  • Por último, 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.

Las características mencionadas no son exclusivas de Dart, pero es la combinación de las mismas la que hacen de Dart el candidato idóneo para su uso en Flutter.


4.4 Recarga en caliente

La rapidez que flutter proporciona permite realizar cambios a sus aplicaciones mientras estas están en ejecución. Esto ofrece la posibilidad de que corregir errores ipso facto, como si nunca hubieran ocurrido. Incluso si la corrección del error requiere una recarga completa, esta será muy rápida.

Programación Recarga en caliente

4.5 Compatibilidad

Gracias a la renderización de los Widgets que son parte de la aplicación, no hay necesidad de ninguna plataforma, ni ningún concepto extraño sobre librerias. Flutter permite que te olvides de esas engorrosas diversificaciones en donde tenías que trabajar en diferente ramas de desarrollo para diferentes versiones OS, la aplicación funcionará perfectamente tanto si estás en iOS 8.0, Android Jelly Bean, o en las versiones más nuevas de iOS y Android. ¿Resultado? Una reducción bestial de horas de testings para validar que funcionan correctamente en una versión u otra, sin contar que las nuevas versiones que se desplieguen también tendrá funcionarán perfectamente.



5. Conclusiones

¿Así que? ¿Porque Flutter es tan revolucionario? Ahora puedes argumentarlo, sea que tengas un proyecto entre manos y desees argumentar el porque decantarte por Flutter, sea que aún tenías dudas sobre que tecnología usar o aprender, ahora si puedes argumentarlo:


  • Las vistas reactivas sin necesidad de un puente conector entre la tecnología de desarrollo y el dispositivo, brindan una ventaja destacable ante cualquier alternativa.

  • El código de Flutter compila AOT al código nativo(ARM) ¿tengo que decir más? Rápido, fluido y limpio.

  • El equipo de desarrollo tiene un control total sobre los Widgets y las Vistas.

  • Si no tienes un diseñador en tu equipo y eres de los que tiene dificultades para el diseño, porque no se te ocurre como armar las vistas, tengo buenas noticias; flutter ya incorpora widgets atractivos y customizables con los que podras dedicarte a lo verdaderamente importante, programar.

  • El IDE de Flutter tiene más que de sobra, herramientas potentes con las que podrás trabajar sin que te falte nada.

  • Cuando usas HotReload, luego no sabes que hacer sin él. Te permite ver todos los cambios en tu aplicación, en vivo y en directo, esto permitirá ver en vivo todos los cambios que hagas... Aún tengo pesadillas recordando el tener que compilar la aplicación, esperar a que compile, esperar a que se cree el binario, esperar a que instale en el dispositivo virtual el binario, y tener que usar la aplicación para poder verificar que el cambio ha tenido resultado.

  • Un rendimiento bestial, si tienes dudas o quieres saber más; te invito a que leas este post donde pusimos a prueba Flutter.

  • Permite desarrollar bajo un solo código base, la aplicación tanto para iOS y Android.

¿Qué es Flutter?
JUMO Technologies S.L., Juan Manuel Ojeda Garcia
30 marzo, 2020
Share this post
Archivar
Identificarse to leave a comment
¿Qué es Firebase y cuál es su coste?
Conoce que es Firebase y aprende a estimar su coste anual