¿Qué tiene de revolucionario Flutter?

¿Qué es Flutter?

El SDK de la aplicación móvil Flutter es una nueva forma de crear hermosas aplicaciones móviles nativas que se alejan de las aplicaciones "cortadoras de galletas" que han sido tan comunes en el pasado. A las personas que prueban Flutter realmente les gusta; por ejemplo, vea esto , esto o esto . O aquí hay una lista de artículos y videos compilados por un tercero.

Al igual que con cualquier sistema nuevo, la gente quiere saber qué hace que Flutter sea diferente o, dicho de otro modo, "¿qué tiene de nuevo y emocionante Flutter?" Esa es una buena pregunta, y este artículo intentará responderla desde un punto de vista técnico, no solo qué es emocionante, sino por qué .

Pero antes, un poco de historia.

Una breve historia del desarrollo de aplicaciones móviles

El desarrollo de aplicaciones móviles es un campo de actividad relativamente reciente. Los desarrolladores externos han podido crear aplicaciones móviles durante menos de una década, por lo que no sorprende que las herramientas sigan evolucionando.

Los SDK de la plataforma

El SDK de iOS de Apple se lanzó en 2008 y el SDK de Android de Google en 2009. Estos dos SDK se basaron en diferentes lenguajes: Objective-C y Java, respectivamente.

Su aplicación se comunica con la plataforma para crear widgets o acceder a servicios como la cámara. Los widgets se representan en un lienzo de pantalla y los eventos se devuelven a los widgets. Esta es una arquitectura simple, pero prácticamente tiene que crear aplicaciones separadas para cada plataforma porque los widgets son diferentes, sin mencionar los idiomas nativos.

WebViews

Los primeros marcos multiplataforma se basaron en JavaScript y WebViews. Los ejemplos incluyen una familia de marcos relacionados : PhoneGap, Apache Cordova, Ionic y otros. Antes de que Apple lanzara su iOS SDK, animaron a los desarrolladores externos a crear aplicaciones web para el iPhone, por lo que crear aplicaciones multiplataforma utilizando tecnologías web fue un paso obvio.

Su aplicación crea HTML y lo muestra en un WebView en la plataforma. Tenga en cuenta que es difícil para los lenguajes como JavaScript hablar directamente con el código nativo (como los servicios), por lo que pasan por un "puente" que cambia el contexto entre el dominio de JavaScript y el dominio nativo. Debido a que los servicios de la plataforma normalmente no se llaman con tanta frecuencia, esto no causó demasiados problemas de rendimiento.

Vistas reactivas

Los marcos web reactivos como ReactJS (y otros ) se han vuelto populares, principalmente porque simplifican la creación de vistas web mediante el uso de patrones de programación tomados de la programación reactiva . En 2015, se creó React Native para brindar los muchos beneficios de las vistas de estilo reactivo a las aplicaciones móviles.

React Native es muy popular (y merece serlo), pero debido a que el dominio de JavaScript accede a los widgets de la plataforma en el dominio nativo, también tiene que pasar por el puente para ellos. Por lo general, se accede a los widgets con bastante frecuencia (hasta 60 veces por segundo durante animaciones, transiciones o cuando el usuario "desliza" algo en la pantalla con el dedo), por lo que esto puede causar problemas de rendimiento. Como dice un artículo sobre React Native :

Aquí radica una de las principales claves para comprender el rendimiento de React Native. Cada reino por sí mismo es increíblemente rápido. El cuello de botella del rendimiento a menudo se produce cuando nos movemos de un ámbito a otro. Para diseñar aplicaciones React Native de alto rendimiento, debemos mantener los pases sobre el puente al mínimo.

Aleteo

Al igual que React Native, Flutter también ofrece vistas de estilo reactivo. Flutter adopta un enfoque diferente para evitar los problemas de rendimiento causados por la necesidad de un puente de JavaScript mediante el uso de un lenguaje de programación compilado, a saber, Dart . Dart se compila "antes de tiempo" (AOT) en código nativo para múltiples plataformas. Esto permite que Flutter se comunique con la plataforma sin pasar por un puente de JavaScript que hace un cambio de contexto. La compilación con código nativo también mejora los tiempos de inicio de la aplicación.

El hecho de que Flutter sea el único SDK móvil que proporciona vistas reactivas sin necesidad de un puente de JavaScript debería ser suficiente para que Flutter sea interesante y valga la pena probarlo, pero Flutter tiene algo mucho más revolucionario , y es cómo implementa los widgets .

Widgets

Los widgets son los elementos que afectan y controlan la vista y la interfaz de una aplicación. No es una exageración decir que los widgets son una de las partes más importantes de una aplicación móvil. De hecho, los widgets solos pueden hacer o deshacer una aplicación.

• La apariencia de los widgets es primordial. Los widgets deben verse bien, incluso en varios tamaños de pantalla. También necesitan sentirse naturales.
• Los widgets deben funcionar rápido : para crear el árbol de widgets, infle los widgets (creando instancias de sus hijos), colóquelos en la pantalla, renderícelos o (especialmente) anímelos.
• Para las aplicaciones modernas, los widgets deben ser extensibles y personalizables . Los desarrolladores quieren poder agregar nuevos widgets encantadores y personalizar todos los widgets para que coincidan con la marca de la aplicación.

Flutter tiene una nueva arquitectura que incluye widgets que se ven y se sienten bien, son rápidos, personalizables y extensibles. Así es, Flutter no usa los widgets de la plataforma (o DOM WebViews), proporciona sus propios widgets.

Flutter eleva los widgets y el renderizador de la plataforma a la aplicación, lo que les permite ser personalizables y extensibles. Todo lo que Flutter requiere de la plataforma es un lienzo en el que representar los widgets para que puedan aparecer en la pantalla del dispositivo y acceder a eventos (toques, temporizadores, etc.) y servicios (ubicación, cámara, etc.).

Todavía hay una interfaz entre el programa Dart (en verde) y el código de la plataforma nativa (en azul, para iOS o Android) que codifica y decodifica datos, pero esto puede ser mucho más rápido que un puente de JavaScript.

Mover los widgets y el renderizador a la aplicación afecta el tamaño de la aplicación. El tamaño mínimo de una aplicación Flutter en Android es de aproximadamente 4,7 MB, que es similar a las aplicaciones mínimas creadas con herramientas comparables. Depende de usted decidir si los beneficios de Flutter valen la pena, por lo que el resto de este artículo analiza estos beneficios.

Diseño

Una de las mayores mejoras en Flutter es cómo hace el diseño. El diseño determina el tamaño y la posición de los widgets en función de un conjunto de reglas (también denominadas restricciones).

Tradicionalmente, el diseño utiliza un gran conjunto de reglas que se pueden aplicar a (prácticamente) cualquier widget. Las reglas implementan múltiples métodos de diseño. Tomemos como ejemplo el diseño CSS porque es bien conocido (aunque el diseño en Android e iOS es básicamente similar). CSS tiene propiedades (las reglas), que se aplican a los elementos HTML (los widgets). CSS3 define 375 propiedades.

CSS incluye una serie de modelos de diseño, incluidos (múltiples) modelos de cuadro, elementos flotantes, tablas, varias columnas de texto, medios paginados, etc. Posteriormente se agregaron modelos de diseño adicionales, como flexbox y grid, porque los desarrolladores y diseñadores necesitaban más control sobre el diseño y usaban tablas e imágenes transparentes para obtener lo que querían. En el diseño tradicional, el desarrollador no puede agregar nuevos modelos de diseño, por lo que flexbox y grid tuvieron que agregarse a CSS e implementarse en todos los navegadores.

Otro problema con el diseño tradicional es que las reglas pueden interactuar (e incluso entrar en conflicto) entre sí, y los elementos suelen tener docenas de reglas aplicadas. Esto hace que el diseño sea lento. Peor aún, el rendimiento del diseño suele ser del orden de N al cuadrado, por lo que a medida que aumenta la cantidad de elementos, el diseño se ralentiza aún más.

Flutter comenzó como un experimento realizado por miembros del equipo del navegador Chrome en Google. Queríamos ver si se podía construir un renderizador más rápido si ignorábamos el modelo tradicional de diseño. Después de algunas semanas, habíamos logrado mejoras significativas en el rendimiento. Descubrimos:

• La mayoría de los diseños son relativamente simples, como: texto en una página de desplazamiento, rectángulos fijos cuyo tamaño y posición dependen solo del tamaño de la pantalla, y tal vez algunas tablas, elementos flotantes, etc.
• La mayoría de los diseños son locales para un subárbol de widgets, y ese subárbol generalmente usa un modelo de diseño, por lo que solo una pequeña cantidad de reglas deben ser compatibles con esos widgets.

Nos dimos cuenta de que el diseño se podía simplificar significativamente si lo invertíamos :

• En lugar de tener un gran conjunto de reglas de diseño que podrían aplicarse a cualquier widget, cada widget especificaría su propio modelo de diseño simple.
• Debido a que cada widget tiene un conjunto mucho más pequeño de reglas de diseño a considerar, el diseño se puede optimizar en gran medida.
• Para simplificar aún más el diseño, convertimos casi todo en un widget.

Aquí está el código de Flutter para crear un árbol de widgets simple con diseño:

nuevo centro (hijo: nueva columna (hijos: [nuevo texto ('¡Hola, mundo!')), nuevo icono (iconos.estrella, color: colores.verde)]))

Este código es lo suficientemente semántico como para que puedas imaginar fácilmente lo que producirá, pero aquí está la pantalla resultante:

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

En Flutter, el centrado y el relleno son widgets. Los temas son widgets, que se aplican a sus hijos. E incluso las aplicaciones y la navegación son widgets.

Flutter incluye bastantes widgets para hacer el diseño, no solo columnas sino también filas, cuadrículas, listas, etc. Además, Flutter tiene un modelo de diseño único que llamamos "modelo de diseño de astilla" que se usa para desplazarse. El diseño en Flutter es tan rápido que se puede usar para desplazarse. Piense en eso por un momento. El desplazamiento debe ser tan instantáneo y suave que el usuario sienta que la imagen de la pantalla está pegada a su dedo mientras la arrastra por la pantalla física.

Al usar el diseño para el desplazamiento, Flutter puede implementar tipos avanzados de desplazamiento, como los que se muestran a continuación. Tenga en cuenta que estas son imágenes GIF animadas, Flutter es aún más suave. Puede (¡y debe!) ejecutar estas aplicaciones usted mismo; consulte la sección Recursos al final de este artículo.

Aplicación Flutter Gallery

Aplicación Posse Gallery

Aplicación Posse Gallery

La mayoría de las veces, Flutter puede hacer el diseño en una sola pasada, lo que significa en tiempo lineal, por lo que puede manejar una gran cantidad de widgets. Flutter también realiza el almacenamiento en caché y otras cosas para que pueda evitar hacer el diseño, cuando sea posible.

Diseño personalizado

Debido a que los widgets ahora son parte de la aplicación, se pueden agregar nuevos widgets y los widgets existentes se pueden personalizar para darles una apariencia diferente o para que coincidan con la marca de una empresa. La tendencia en el diseño móvil se aleja de las aplicaciones de corte de galletas que eran comunes hace unos años y se dirige hacia diseños personalizados que deleitan a los usuarios y ganan premios.

Flutter viene con conjuntos de widgets enriquecidos y personalizables para Android, iOS y Material Design (de hecho, nos han dicho que Flutter tiene una de las implementaciones de Material Design de mayor fidelidad). Usamos la capacidad de personalización de Flutter para crear estos conjuntos de widgets, para que coincidan con la apariencia de los widgets nativos en múltiples plataformas. Los desarrolladores de aplicaciones pueden usar la misma capacidad de personalización para ajustar aún más los widgets según sus deseos y necesidades.

Más acerca de las vistas reactivas

Las bibliotecas para vistas web reactivas introdujeron DOM virtual . DOM es el modelo de objeto de documento HTML, una API utilizada por JavaScript para manipular un documento HTML, representado como un árbol de elementos. Virtual DOM es una versión abstracta del DOM creado usando objetos en el lenguaje de programación, en este caso JavaScript.

En las vistas web reactivas (implementadas por sistemas como ReactJS y otros), el DOM virtual es inmutable y se reconstruye desde cero cada vez que algo cambia. El DOM virtual se compara con el DOM real para generar un conjunto de cambios mínimos, que luego se ejecutan para actualizar el DOM real. Finalmente, la plataforma vuelve a renderizar el DOM real y lo pinta en un lienzo.

Esto puede sonar como mucho trabajo extra, pero vale la pena porque manipular el HTML DOM es muy costoso .

React Native hace algo similar, pero para aplicaciones móviles. En lugar de DOM, manipula los widgets nativos en la plataforma móvil. En lugar de un DOM virtual, construye un árbol virtual de widgets y lo compara con los widgets nativos y solo actualiza aquellos que han cambiado.

Recuerde que React Native tiene que comunicarse con los widgets nativos a través del puente, por lo que el árbol virtual de widgets ayuda a mantener al mínimo los pases por el puente, al mismo tiempo que permite el uso de widgets nativos. Finalmente, una vez que se actualizan los widgets nativos, la plataforma los representa en el lienzo.

React Native es una gran victoria para el desarrollo móvil y fue una inspiración para Flutter, pero Flutter lleva esto un paso más allá.

Recuerda que en Flutter, los widgets y el renderizador se han elevado de la plataforma a la aplicación del usuario. No hay widgets de plataforma nativos para manipular, por lo que lo que era un árbol de widgets virtual ahora es el árbol de widgets. Flutter renderiza el árbol de widgets y lo pinta en un lienzo de plataforma. Esto es agradable y simple (y rápido). Además, la animación ocurre en el espacio del usuario, por lo que la aplicación (y, por lo tanto, el desarrollador) tiene más control sobre ella.

El renderizador Flutter en sí mismo es interesante: utiliza varias estructuras de árbol internas para renderizar solo aquellos widgets que necesitan actualizarse en la pantalla. Por ejemplo, el renderizador usa “ ” (significado “estructural” por widget , que es más eficiente que hacerlo por áreas rectangulares en la pantalla). Los widgets que no han cambiado, incluso aquellos que se han movido, se borran un poco de la memoria caché, lo cual es muy rápido. Esta es una de las cosas que hace que el desplazamiento sea tan eficaz en Flutter, incluso en el desplazamiento avanzado (discutido y mostrado arriba).

Para ver más de cerca el renderizador de Flutter, . También puedes mirar el código, porque Flutter es de código abierto . Y, por supuesto, puede personalizar o incluso reemplazar toda la pila, incluido el renderizador, el compositor, la animación, el reconocedor de gestos y (por supuesto) los widgets.

El lenguaje de programación Dart

Debido a que Flutter, al igual que otros sistemas que usan vistas reactivas, actualiza el árbol de vistas para cada cuadro nuevo, crea muchos objetos que pueden vivir solo por un cuadro (una sexagésima parte de un segundo). Afortunadamente, Dart utiliza una “ recolección de basura generacional ” que es muy eficiente para este tipo de sistemas, porque los objetos (especialmente los de vida corta) son relativamente baratos. Además, la asignación de objetos se puede realizar con un solo golpe de puntero, que es rápido y no requiere bloqueos. Esto ayuda a evitar el bloqueo y el tartamudeo de la interfaz de usuario.

Dart también tiene un compilador de " movimiento de árboles ", que solo incluye el código que necesita en su aplicación. Puede sentirse libre de usar una gran biblioteca de widgets, incluso si solo necesita uno o dos de ellos.

Para obtener más información sobre Dart, lee " Por qué Flutter usa Dart ".

recarga caliente

Una de las características más populares de Flutter es su recarga en caliente rápida y con estado. Puede realizar un cambio en una aplicación Flutter mientras se está ejecutando, y volverá a cargar el código de la aplicación que ha cambiado y permitirá que continúe desde donde lo dejó, a menudo en menos de un segundo. Si su aplicación encuentra un error, normalmente puede corregir el error y luego continuar como si el error nunca hubiera ocurrido. Incluso cuando tienes que hacer una recarga completa, es rápido.

recarga con estado en caliente

Los desarrolladores nos dicen que esto les permite "pintar" su aplicación, haciendo un cambio a la vez y luego viendo los resultados casi instantáneamente, sin tener que reiniciar la aplicación.

Compatibilidad

Debido a que los widgets (y el renderizador de esos widgets) son parte de su aplicación, no de la plataforma, no se necesitan " bibliotecas de compatibilidad". Tus aplicaciones no solo funcionarán, sino que funcionarán de la misma manera en versiones recientes del sistema operativo: Android Jelly Bean y posteriores, e iOS 8.0 y posteriores. Esto reduce significativamente la necesidad de probar aplicaciones en versiones anteriores del sistema operativo. Además, es probable que sus aplicaciones funcionen en futuras versiones del sistema operativo.

Hay una preocupación potencial sobre la que nos preguntan. Debido a que Flutter no usa los widgets de la plataforma nativa, ¿los widgets de Flutter tardarán mucho en actualizarse cuando salga una nueva versión de iOS o Android que admita un nuevo tipo de widget o cambie el aspecto o el comportamiento de un widget existente? ?

• En primer lugar, Google es un gran usuario interno de Flutter, por lo que tenemos un fuerte incentivo para actualizar los conjuntos de widgets para mantenerlos actualizados y lo más cerca posible de los widgets de la plataforma actual.
• Si alguna vez hay un momento en que tardamos demasiado en actualizar un widget, Google no es el único usuario de Flutter con un incentivo para mantener los widgets actualizados. Los widgets de Flutter son tan extensibles y personalizables que cualquiera puede actualizarlos, incluso tú. Uno ni siquiera tiene que presentar una solicitud de extracción. Nunca tendrás que esperar a que Flutter se actualice.
• Y los puntos anteriores se aplican solo si desea que el nuevo cambio se refleje en su aplicación. Si no desea que un cambio afecte la apariencia o el comportamiento de su aplicación, está bien. Los widgets son parte de su aplicación, por lo que un widget nunca cambiará y hará que su aplicación se vea mal (o peor aún, la rompa).
• Como beneficio adicional, puede escribir su aplicación para que use el nuevo widget incluso en versiones anteriores del sistema operativo.

Otros beneficios

La simplicidad de Flutter lo hace rápido, pero es la capacidad de personalización y extensibilidad generalizada lo que lo hace poderoso.

Dart tiene un repositorio de paquetes de software para que pueda ampliar las capacidades de sus aplicaciones. Por ejemplo, hay una serie de paquetes que facilitan el acceso a Firebase para que pueda crear una aplicación "sin servidor". Un colaborador externo ha creado un paquete que le permite acceder a un almacén de datos de Redux . También hay paquetes llamados " complementos " que facilitan el acceso a los servicios y hardware de la plataforma, como el acelerómetro o la cámara, de forma independiente del sistema operativo.

Por supuesto, Flutter también es de código abierto , lo que, junto con el hecho de que la pila de procesamiento de Flutter es parte de su aplicación, significa que puede personalizar casi cualquier cosa que desee para una aplicación individual. Todo lo que está en verde en esta figura se puede personalizar:

Entonces, "¿Qué hay de nuevo y emocionante en Flutter?"

Si alguien te pregunta sobre Flutter, ahora ya sabes cómo responder:

• Las ventajas de las vistas reactivas, sin puente JavaScript
• Rápido, suave y predecible; el código compila AOT en código nativo (ARM)
• El desarrollador tiene control total sobre los widgets y el diseño.
• Viene con hermosos widgets personalizables
• Excelentes herramientas para desarrolladores, con increíble recarga en caliente
• Más rendimiento, más compatibilidad, más diversión

¿Te diste cuenta de lo que dejé en esta lista? Es algo que suele ser lo primero que menciona la gente cuando habla de Flutter, pero para mí es una de las cosas menos interesantes de Flutter.

Es el hecho de que Flutter puede crear aplicaciones hermosas y rápidas para múltiples plataformas a partir de un solo código base. ¡Por supuesto, eso debería ser un hecho! Es la capacidad de personalización y la extensibilidad lo que facilita la orientación de Flutter a múltiples plataformas sin renunciar al rendimiento o la potencia.

Revolucionario

Tampoco expliqué completamente por qué Flutter es "revolucionario". Simplemente parece apropiado, porque una de las primeras aplicaciones importantes creadas con Flutter por desarrolladores externos es la aplicación oficial de " Hamilton: An American Musical ", que tiene lugar en la época de la Guerra Revolucionaria Estadounidense. Hamilton es uno de los musicales de Broadway más populares de todos los tiempos.

La agencia, Posse , dice que eligieron Flutter porque necesitaban crear la aplicación " en solo tres cortos meses ". Lo llaman "Una aplicación revolucionaria para un programa revolucionario" y dicen que "Flutter es una excelente opción para experiencias móviles hermosas, de alto rendimiento e impulsadas por la marca". en la conferencia Google Developer Days sobre su experiencia en la creación de una aplicación con Flutter. La aplicación está disponible en Android e iOS y recibió excelentes críticas .

¡Únete a la revolución!

El 4 de diciembre de 2018, se lanzó Flutter 1.0 . Continuaremos agregándole más funciones y tenemos más optimizaciones planeadas. El uso de Flutter ha despegado, con más de 250 000 desarrolladores en todo el mundo. Flutter se encuentra actualmente en el top 20 en Github para repositorios de software activos.

Si está interesado en Flutter, puede instalarlo y jugar con algunas aplicaciones de muestra que vienen con la instalación. Asegúrese de revisar la recarga en caliente con estado.

Si no es desarrollador o simplemente quiere ver algunas aplicaciones, puede instalar aplicaciones creadas con Flutter y ver cómo se ven y funcionan. Recomiendo la app de Hamilton , pero hay otras. También deberías ver el video de Google I/O donde codifican en vivo una aplicación de Flutter.

Recursos

• Mira los videos de Flutter de Google I/O 2018
• Mire los videos de DartConf 2018 , que se llevó a cabo del 23 al 24 de enero de 2018 en Los Ángeles, California
• .

Sitios web:

• El sitio web de Flutter
• Los repositorios de origen (¡las solicitudes de extracción son bienvenidas!)
• Más enlaces útiles
• Canal de Gitter

Vídeos:

• Codificación en vivo de una aplicación Flutter, en Google I/O
• Programación en vivo con un diseñador, en Google I/O
• “ Flutter, una nueva esperanza ” en Droidcon Italia
• “ La canalización de renderizado de Flutter ”

aplicaciones:

• La aplicación para Hamilton: un musical estadounidense
• Flutter Gallery: para Android , en Github (también incluido en la instalación de flutter en ejemplos/flutter_gallery)
• Galería Posse
• Friendlychat: primer codelab , Firebase codelab , en Github

Otras lecturas:

• Por qué Flutter usa Dart
• Presentando Flutter a su empresa o cliente