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

Este es el segunda y última parte, de un artículo hecho para explicar por qué este gran marco podría ser la mejor opción para el desarrollo móvil. La decisión de dividir esta exposición en dos columnas diferentes fue profundizar el argumento sin confundir o aburrir al lector. Recuerdo que si no sabes ni siquiera un poco sobre Flutter, se recomienda leer primero nuestro artículo sobre Flutter essentials para que el mensaje llegue sin huecos.

En el primer articulo Examinamos las dos mejores ventajas de Flutter para el desarrollo móvil front-end multiplataforma. Ahora, vamos con el tercero.

Diseño de aleteo

Como su nombre lo indica, diseño establece el arreglo, el formato, la organización de los elementos. Configura las partes y las compone para construir algo que tenga sentido, como una plantilla. Entre otros, especifica la posición y el tamaño de cada pieza (en este caso, widgets) cumpliendo un conjunto de reglas (generalmente restricciones). Si está involucrado en el mundo del desarrollo de aplicaciones, ya sea web o móvil, el diseño le resultará familiar.

Normalmente, la forma de hacer el diseño es resolver muchas reglas estrictas y rigurosas que cubren todos los widgets, y esas reglas implementan algunos métodos de diseño. Eso es lo que sucede con CSS (en el desarrollo móvil es lo mismo). Las propiedades CSS (reglas) se aplican a las etiquetas HTML (widgets o elementos).

El uso de esas propiedades incluye cierto número de modelos de diseño (modelos de caja, tablas, columnas y más recientemente flexboxes y cuadrículas en CSS). sin embargo, el el desarrollador no puede crear o agregar nuevos modelos de diseño, deben implementarse en el lenguaje y para todos los usuarios y desarrolladores (en todos los navegadores en CSS, como se hace con flexbox y grid).

Además, las reglas pueden interferir e incluso chocar entre sí, y como resultado los elementos generalmente tienen muchas reglas aplicadas, lo que hace que el diseño sea lento. Tampoco ayuda que el rendimiento sea a menudo o (N ^ 2), lo que significa que como resultado de un incremento del número de elementos, el rendimiento del diseño disminuye aún más.

En Google, encontraron que:

• La mayoría del diseño con frecuencia es relativamente simple y local a un subárbol de elemento, usando un modelo de diseño (lo que significa reglas bajas necesarias para detectar el comportamiento)
• Dejando a un lado el modelo típico de diseño puede obtener ganancias de rendimiento relevantes

Entonces concluyeron que cambiar las ideas sobre el diseño podría ser más claro y simple:

• Como alternativa a tener una gran cantidad de reglas de diseño que se pueden aplicar a cualquier elemento, cada elemento especificaría su propio modelo de diseño simple.
• Como cada elemento tiene que considerar unas reglas de diseño mucho más bajas, el diseño sería optimizado.

Y eso es lo que hicieron con los widgets de Flutter. De hecho, para simplificar aún más el diseño, convirtieron casi todo en un widget.

En Flutter todo es un widget, el diseño también. Usted puede consulte el Catálogo de widgets en el sitio web de documentos. Como ejemplo, el widget de diseño de fila organiza una lista de widgets (sus elementos secundarios) horizontalmente. El widget Alinear alinea a su hijo dentro de sí mismo y, opcionalmente, se ajusta según el tamaño del niño. Así de fácil.

Fila (niños:  [Alinear (alineación: Alignment.centerLeft, child: Padding (padding: EdgeInsets.all (8), child: Text ("Hello World", style: TextStyle (fontSize: 30, fontStyle: FontStyle.italic, fontFamily: "Roboto" , color: Colors.blueGrey))),), Align (alineación: Alignment.centerRight, child: Padding (padding: EdgeInsets.all (8), child: FlutterLogo ()),),],);

El relleno y el centrado son widgets. Los temas también son widgets, que se aplican a sus hijos. Las propiedades de estilo de texto son un widget llamado TextStyle (). E incluso las aplicaciones y la navegación son widgets.

Existen buenos pocos widgets de diseño. Centros, columnas y filas, pilas, listas y cuadrículas ... Y un modelo de diseño para hacer desplazamiento, el Modelo de diseño de astilla, porque el diseño es tan rápido que puede usarse para desplazarse. No es una cosa menor, ya que el desplazamiento debe ser tan suave que el usuario no sepa que está renderizando cada vez. Al usar el diseño para el desplazamiento, se pueden implementar tipos avanzados de desplazamiento en Flutter, como se muestra en las animaciones GIF a continuación.

Finalmente, es bastante notable que Flutter casi siempre pueda hacer diseño en una sola pasada. Eso significa tiempo lineal u O (n) que implica la posibilidad de sosteniendo muchos widgets. De todos modos, Flutter también almacena en caché y otras cosas para evitar hacer el diseño, cuando sea posible.

Diseño a medida

Mover widgets y su representación desde la plataforma a la aplicación da como resultado fácil personalización y la creación de nuevos widgets, y los desarrolladores pueden diseñar completamente según la marca de la compañía. Es más flexible, en una palabra.

Además, Flutter implementa una amplia gama de Material Design widgets a medida para Android y iOS, construido precisamente por la personalización que ofrece Flutter. Esos widgets emulan perfectamente los widgets OEM de múltiples plataformas nativas. Los desarrolladores pueden hacer lo mismo de acuerdo a sus necesidades y deseos.

Manejo de árboles

Si llegaste aquí leyendo, sabrás que tanto Flutter como React (React Native también) usan algún tipo de árbol de widgets. En vistas web reactivas, ese árbol es el DOM virtual. DOM (Document Object Model) es la interfaz que trata un documento HTML como una estructura de árbol en la que cada nodo representa una parte del documento, para que JavaScript pueda manipular estos nodos con su API. DOM virtual, en cambio, es una versión abstracta del DOM basada en objetos directamente en JavaScript.

Las vistas web reactivas funcionan así:

• El DOM virtual, que es inmutable, es rconstruido cada vez todo cambia
• El DOM virtual se contrasta con el DOM real para obtener el cambios mínimos necesario, y luego esos cambios se aplican al DOM real para actualizarlo
• El verdadero DOM es re-renderizado y pintado en un lienzo

Ahora puede estar pensando que parece estúpido o un trabajo extra inútil, pero se hace así porque es muy costoso manipular el HTML o el DOM real. React Native funciona de manera similar, pero en lugar de DOM y DOM virtual, manipula los widgets nativos de la plataforma móvil y crea un árbol virtual de widgets. Ese árbol virtual de widgets está conectado a widgets nativos por el puente, manteniendo los datos pasados al mínimo.

¿Qué hay de Flutter? Como se dijo en la primera parte de este artículo, los widgets y el procesador se han trasladado de la plataforma a la aplicación del usuario. Ese procedimiento implica que, aunque React Native fue una gran innovación para el desarrollo móvil (Flutter se ha inspirado en ello) Flutter ha ido más lejos y ha dado un paso mucho más grande.

No hay puente, ni árbol de widgets virtuales, ni widgets nativos necesarios, y eso significa tres capas eliminadas de golpe. Aleteo simplemente representa su árbol de widgets y representarlo en el lienzo de la plataforma, que es bastante rápido. No más problemas de rendimiento de animación y soluciones difíciles como las de React Native, porque se produce en el reino de Flutter. Además, su renderizador es más original e innovador que el de React Native (y otros), repintando "por widget" solo aquellos que deben actualizarse y almacenamiento en caché de widgets sin cambios.

Por último, resalte que Flutter es de código abierto y su repositorio está en GitHub, para que pueda cambiar o modificar fácilmente cada uno según sea necesario.

Recarga en caliente

Además de los widgets, el aleteo también se destaca por la recarga en caliente. Esta es una característica rápida que permite aplicar cambios a una aplicación Flutter mientras se está ejecutando, recargando el código sin alterar el estado de la aplicación. Es tan rápido que usualmente dura menos de un segundo, y si hay un error, puede corregir el error, volver a cargar en caliente y continuar.

El inconveniente aquí es que hacer un recarga completa, aunque es rápido en comparación con otras tecnologías, es más lento que las plataformas nativas, y especialmente en iOS, puede ser un poco molesto. Aún así, creo que las ventajas valen mucho más que este problema. Pintar instantáneamente su aplicación después de casi cada pequeño cambio es una característica muy valiosa y citada.

Compatibilidad

Si está acostumbrado a codificar aplicaciones nativas de Android con Java o Kotlin, biblioteca problemas de compatibilidad, multidex, Android X, etc. serán conceptos que comprenderá y odiará de cierta manera. Con Flutter que la burocracia hace no existe. Dado que los widgets pertenecen a tu aplicación y no a la plataforma, evitas estas cosas.

Su proyecto funcionará perfectamente en Android desde Jelly Bean e iOS desde 8.0 en todas las versiones y dispositivos. No más bibliotecas compat. Además, las aplicaciones de prueba en versiones anteriores se reducirán y su aplicación funcionará en futuras versiones del sistema operativo. Sin embargo, si importa bibliotecas hechas en código fuente con código nativo, puede meterse en problemas.

Actualización del marco

Una posible pregunta podría ser qué sucede cuando se lanza una nueva versión de iOS y Android. Lo hará los widgets Flutter tardan mucho en actualizarse si hay algunas características nuevas, widgets nativos o cambios en un widget actual? Bueno, podría ser, pero:

• GRAMOoogle usa Flutter internamente, por lo que tienen incentivos para mantener actualizados los conjuntos de widgets y cerca de los widgets de la plataforma actual.
• Google no es el único usuario de Flutter con un incentivo para mantener actualizados los widgets. Cualquiera puede actualizar fácilmente widgets, incluso tú.
• En el caso de que no desee que el nuevo cambio se refleje en su aplicación, está bien. Como los widgets son parte de su aplicación, lo harán nunca cambies debajo de ti y rompa su aplicación o haga que su aplicación se vea mal.
• Y si eso no fuera suficiente, puede escribir su aplicación y use el nuevo widget incluso en versiones anteriores del sistema operativo.

Paquetes

Antes de agregar características nuevas y complejas a sus aplicaciones, puedes consultar el repositorio de paquetes Flutter. Desde herramientas y utilidades hasta implementaciones multimedia y de terceros servicios, probablemente encontrará algo útil para tu aplicación. También existen complementos para acceder fácilmente a los servicios (cámara, ubicación, aceleración, permisos).

Fuente abierta

Como se mencionó anteriormente, fuente abierta y el renderizado de aplicaciones hacen que Flutter sea personalizable para cada aplicación individual. Casi todo es modificable, concretamente todo del motor Dart:

Cierre

Espero que estos dos artículos te aclaren por qué Flutter es una herramienta muy poderosa esa puede ser la herramienta dominante en el desarrollo móvil y por qué lo usamos en aplicaciones Stratton. Pero si no, aquí te dejamos un resumen de sus características únicas:

• Vistas reactivas, sin puente de JavaScript
• Rápido, suave y predecible; el código compila AOT al código nativo (ARM)
• Viene con widgets hermosos y personalizables
• El desarrollador tiene control total sobre los widgets y el diseño.
• Excelentes herramientas para desarrolladores, con una increíble recarga en caliente
• Más rendimiento, más compatibilidad, paquetes
• Código abierto y modificable
• Aplicaciones rápidas y hermosas para múltiples plataformas desde un único código fácil

Si desea una aplicación genial, original, rápida y receptiva para múltiples plataformas, no dude en contáctenos en aplicaciones Stratton. Nosotros construirá de forma rápida y económica una solución Flutter con soporte de fondo si es necesario.