Flutter, presente y futuro del desarrollo móvil multiplataforma #1

Explicar por qué este marco innovador podría ser el mejor solución para desarrollo móvil vamos a separar los motivos en dos artículos diferentes para profundizar en cada motivo sin confundir ni aburrir al lector. Esta es la primera parte, y al final tendrás un enlace a la segunda parte de esta narración.

Si aún no lo ha hecho y especialmente si no sabe nada al respecto, le recomiendo encarecidamente leer nuestro artículo sobre Flutter essentials. Sin embargo, daremos una pequeña definición para entrar en contexto para quienes no quieran leerlo.

Sobre Flutter

Flutter es un SDK innovador para crear principalmente aplicaciones para Android e iOS (más plataformas actualmente en versión beta y alfa). Este marco permite a los desarrolladores crear aplicaciones móviles nativas multiplataforma hermosas y de alto rendimiento solo codificando una vez, en Flutter.

Y cuando una nueva tecnología sale al mercado de desarrollo, lo primero que hay que tener en cuenta es cuales son sus ventajas. Es decir, la primera pregunta que debe hacerse es por qué usarlo. En el campo del takeit para el desarrollo de aplicaciones multiplataforma, además, ya existen muchas tecnologías. Cordova, PhoneGap, el nuevo Ionic, etc.

El atributo "nativo" mencionado anteriormente, en caso de que no lo hayas notado. Pero primero, explicaremos el problema al revisar cómo funcionan todas las demás tecnologías.

Relación marco-dispositivo

El primer argumento será el camino Flutter y los dispositivos móviles interactúan. Vamos a repasar cómo el framework o el software interactúa con el dispositivo en todas las tecnologías para saber cómo es este vínculo, cómo funciona realmente.

Los SDK de la plataforma (Android y iOS)

Tanto Android, el sistema operativo de Google lanzado en 2009 como iOS, lanzado en 2008, funcionan de la misma manera. Están basados en diferentes lenguajes (Objective-C y Java) pero su funcionamiento es el mismo.

Su aplicación puede ordenar a la plataforma que haga dos cosas diferentes: crear widgets o acceder a servicios del dispositivo móvil (cámara, ubicación, batería, sensores, etc.). Esos widgets se representan en un lienzo de pantalla y algunos eventos se devuelven a los widgets.

Aunque es una arquitectura simple, el problema con esto es el hecho de que tienes que crear aplicaciones separadas con dos códigos diferentes porque tienen diferentes idiomas nativos y widgets.

WebViews

Cuando Android e iOS crecieron y, por lo tanto, el desarrollo móvil lo hizo, sus clases para administrar contenido web sin salir de la aplicación se volvió cada vez más versátil, y permitió la creación de frameworks que aprovechan esa vistas web para mostrar contenido en ambas plataformas a través de ellas. Así es como surgieron Phonegap y Apache Cordova.

Usando las clases WebView (Android) y UIWebView (iOS, ahora en desuso para WKWebView), renderizan código HTML, CSS y JavaScript, y existe una comunicación entre el JavaScript de la vista web y el código nativo para acceder a los servicios. Sin embargo, dado que es difícil para lenguajes como JavaScript comunicarse directamente con el código móvil nativo, implementan un "puente" que hace conexión entre el reino de JavaScript y el reino nativo.

Al ver que los servicios de plataforma normalmente no se llamaban con tanta frecuencia, esto no causó demasiados problemas de rendimiento al principio. Pero cuando el mercado de aplicaciones creció cada vez más, esta tecnología se reveló como bastante limitado, especialmente por el rendimiento (es por eso que el propósito de Flutter era hacer una aplicación fluida para ambas plataformas renderizando a 120 FPS, leer más aquí).

Vistas reactivas

A medida que llegó la programación reactiva, los marcos web reactivos como ReactJS (y otros) se han vuelto populares principalmente porque simplifican la creación de vistas web. En 2015, la creación de React Native trajo los muchos beneficios de vistas de estilo reactivo a aplicaciones móviles y ahora es popular.

En React Native, el ámbito de JavaScript accede a los widgets de la plataforma en el ámbito nativo, en lugar de utilizar WebView. Sin embargo, tiene que irse a través del puente para ellos también, y ahora no solo para acceder a servicios nativos, sino también para renderizar. Y debido a que normalmente se accede a los widgets con bastante frecuencia (hasta 60 veces por segundo) especialmente durante animaciones, transiciones, etc., esto puede causar problemas de rendimiento y generalmente son difíciles de resolver. La parte nativa es rápida, la parte JS es rápida, pero moverse de una a otra causa una cuello de botella de rendimientoy debe mantener el flujo de datos entre ellos al mínimo.

Aleteo

Flutter se ha inspirado en React Native y también utiliza vistas de estilo reactivo. Sin embargo, los creadores tuvieron una gran idea para evitar el puente de conexión. En lugar de usar JavaScript, usaron el lenguaje compilado llamado Dart, también desarrollado por Google. Dart se compila con anticipación (AOT) directamente en código nativo, y así es como no solo solucionaron problemas de rendimiento, sino también tiempos de inicio de aplicaciones mejorados.

Esto solo (vistas reactivas sin puente) ya debería ser una razón para hablar de Flutter como una tecnología de desarrollo interesante e innovadora que vale la pena probar, pero es solo el aperitivo de la revolución de Flutter. El plato principal es su implementación de widgets. La importancia es tal que discutiremos el funcionamiento de flutter en la siguiente sección, la sección de Widgets.

Widgets de Flutter

Los widgets son uno de los elementos más importantes de una aplicación. Ellos crear y modificar la vista y son el comportamiento principal y pueden hacer o deshacer una aplicación. Los servicios son funciones complementarias que sirven a los widgets para completar una aplicación y darle funcionalidad.

(gif)

Entre otros, deben ser

• Buen aspecto y sentimiento. Los widgets deben verse bien y ser flexibles y naturales. Tienen que comportarse y adaptarse en varios tamaños de pantalla.
• Rendimiento rápido: para construir el árbol de widgets, inflar los widgets (instanciando a sus hijos), colocarlos en la pantalla, renderizarlos y (especialmente) animarlos.
• Extensible y personalizable. Las aplicaciones modernas exigen personalidad y estilo, y los desarrolladores deben poder agregar nuevos widgets agradables, hacer otros a partir de los primeros y personalizar todos los widgets para obtener el diseño y modelo de su marca.

Flutter, en lugar de utilizar Widgets OEM (widgets de la plataforma nativa) o DOM WebViews, ha desarrollado un nueva arquitectura con widgets que cumplan las tres reglas mencionadas anteriormente.

Eso es porque este marco mueve el widgets y renderizador desde la plataforma nativa en la aplicación, dejando en la plataforma solo un lienzo dentro del cual renderizar esos widgets en la pantalla del dispositivo, pero no los widgets en sí. Los servicios (como la cámara) y los eventos (temporizadores, toques, etc.) también se acceden a través de la plataforma nativa. Pero el problema, como se ve en las vistas de reacción, estaba en la representación.

Cambiar los widgets y el renderizador hace que el la aplicación pesa un poco más. Poniendo números sobre la mesa, el tamaño mínimo de una aplicación de Flutter es de aproximadamente 4,6 MB, que es comparable a las que se compilan con herramientas de desarrollo equivalentes. De hecho, flutter también se aprovecha de esto porque a medida que aumenta el volumen y la carga de la aplicación, el tamaño no aumenta de manera muy notable. Depende de los desarrolladores decidir si vale la pena los beneficios de flutter o no.

Por último, comenta que aunque todavía existe un vínculo entre Dart y el código nativo para codificar y decodificar datos, esto es mucho más rápido que el puente de JavaScript.

Eso es todo amigos. Como has visto, en relación al dispositivo, Flutter es muy progresista, es muy ventajoso en comparación con otros. Este es el primer punto por el que Flutter podría convertirse en el campeón del desarrollo de front-end, especialmente para aplicaciones móviles. El segundo son sus poderosos widgets. En el próximo artículo, cubriremos el diseño, el diseño personalizado, la gestión de árboles, la recarga en caliente, la compatibilidad y más. ¡Espero que les haya gustado!