Energía híbrida: ventajas y beneficios de Flutter

Flutter es una plataforma de desarrollo de aplicaciones móviles híbridas de Google que llegó a 1.0 a fines de 2018. Si bien es un participante más nuevo en la lista de marcos de desarrollo híbrido, las grandes ideas detrás de él han hecho que se popularice rápidamente entre los desarrolladores.

Mi objetivo en este artículo es explorar estas ideas y escribir sobre mis experiencias con Flutter y por qué siento que es el futuro del desarrollo de aplicaciones móviles híbridas.

Aunque existen marcos de aplicaciones híbridas más antiguos en el mercado, hay una lista creciente de empresas de renombre que eligen Flutter para sus aplicaciones móviles. Si bien la página de exhibición de Flutter enumera muchos de estos, aquí hay algunas aplicaciones notables que usan Flutter para toda la aplicación o para una característica importante:

• La aplicación de anuncios de Google
• Aplicación GrabMerchant de GrabFood
• La aplicación Xianyu de Alibaba Group, que tiene más de 50 millones de descargas
• Nubank
• La aplicación eBay Motors

Si bien el marco Flutter es bastante capaz, todavía es relativamente nuevo. En aras del equilibrio, también analizaré algunas limitaciones que debe tener en cuenta antes de comprometerse con Flutter.

Mi esperanza es que después de leer este artículo, tenga una buena idea de los pros y los contras de Flutter, y tenga suficiente información para decidir si debe usar Flutter en su próximo proyecto de aplicación móvil.

Ventajas de Flutter (desde una perspectiva de desarrollo)

Como desarrollador, este es el punto de vista con el que estoy más familiarizado y sobre el que puedo compartir la mayor parte de la información.

Curva de aprendizaje rápido

La primera sorpresa agradable que Flutter tiene para los desarrolladores es lo rápido que es comenzar. Se tarda menos de 30 minutos en finalizar el proceso de instalación y configurar un entorno de desarrollo funcional. A partir de ahí, ya está todo listo para crear su primera aplicación Flutter.

Integración del editor popular

Flutter también tiene excelentes integraciones de editor. Yo personalmente uso Android Studio, pero hay instrucciones disponibles para configurar IntelliJ, VSCode o Emacs.

Proceso de desarrollo limpio

En comparación con mi experiencia anterior con marcos de aplicaciones híbridas, el proceso de desarrollo también se siente más limpio . Por ejemplo, cuando usé WebViews para mostrar listas con muchos elementos (alrededor de 100), tuve que lidiar con un alto uso de la CPU, especialmente cuando el usuario se desplazaba por la lista. Los resolví usando elementos del marco Ionic creados específicamente para esto. En Flutter, hay una forma aceptada de mostrar listas, ListView , que tiene un rendimiento sorprendente desde el primer momento.

Recarga en vivo

Otra cosa que me sorprendió gratamente fue la funcionalidad de recarga en vivo. Como desarrollador de pila completa, estaba acostumbrado a marcos como BrowserWatch que brindan recarga en vivo en el navegador.

El desarrollo nativo no tiene eso (pero creo que SwiftUI de Apple está progresando en ese frente para el desarrollo de iOS). Los desarrolladores de Android e iOS generalmente necesitan escribir código y luego esperar a que se compile y se cargue en el dispositivo o simulador antes de que puedan ver los cambios.

Flutter proporciona (a la React Native) un mecanismo de recarga en vivo, donde el código de la aplicación se vuelve a cargar en el dispositivo tan pronto como los desarrolladores presionen "guardar". Esto brinda retroalimentación inmediata, lo que hace que el desarrollo sea mucho más rápido.

Rendimiento

El rendimiento de la aplicación es otra métrica en la que Flutter está emergiendo lentamente como ganador.

Dado que el marco Flutter se encuentra en desarrollo activo, hay muchos lugares donde se pueden realizar optimizaciones de rendimiento. Esto es evidente, por ejemplo, en Flutter 1.17, que aumentó el rendimiento de representación hasta en un 50 % en los dispositivos iOS más nuevos y disminuyó el consumo de memoria hasta en un 70 % para ciertos tipos de cargas de trabajo.

Coherencia multiplataforma

Las interfaces de usuario verdaderamente consistentes en ambas plataformas móviles es otra característica notable de Flutter. Debido a que Flutter usa su propio motor de renderizado, más sobre eso más adelante, la interfaz de usuario es exactamente la misma en iOS y Android. Los desarrolladores ya no tienen que lidiar con problemas de estilo específicos de la plataforma para que todo se vea exactamente como el diseño: esa garantía es parte del marco.

Lenguaje, Herramientas y Extensión

Otros tres aspectos más pequeños, pero aún importantes, que creo que deberían mencionarse aquí son:

• Dart, el lenguaje en el que se programan las aplicaciones de Flutter, es muy sencillo para empezar. Pero también es un lenguaje bastante poderoso, originalmente pensado por Google para reemplazar JavaScript. Si los desarrolladores tienen alguna experiencia con JavaScript u otros lenguajes similares a C, no tendrán problemas para aprender Dart en uno o dos días.
• Hay un administrador de complementos robusto (pub) incluido en la cadena de herramientas predeterminada y una enorme biblioteca de complementos disponibles a través del repositorio de complementos pub.dev.
• Crear complementos para aprovechar las capacidades de la plataforma nativa es bastante fácil, por lo que si los desarrolladores necesitan acceder a una característica de la plataforma para la que ya no existe ningún complemento, codificar uno no es demasiado difícil.

Ventajas de Flutter (desde una perspectiva comercial)

El mayor beneficio de Flutter en el que piensan la mayoría de las empresas es tener que contratar solo un equipo para las plataformas iOS y Android. Sin embargo, un beneficio más importante que muchas empresas pasan por alto es un tiempo de comercialización más rápido . Aprovechando las ventajas de desarrollo de la sección anterior, un equipo de desarrollo más pequeño puede crear una hermosa aplicación con un rendimiento nativo que brinde la misma experiencia de usuario en ambas plataformas mucho más rápido usando Flutter.

Flutter permite a los desarrolladores crear algunas interfaces de usuario verdaderamente hermosas . Eche un vistazo a un desafío reciente de Google y Lenovo para crear una hermosa interfaz de usuario de esfera de reloj para Lenovo Smart Clock. El ganador, Particle Clock de Mickel Andersson, no solo es excepcionalmente elegante, sino que también muestra el rendimiento de las animaciones en Flutter.

Para las empresas que consideran Flutter pero no están seguras de si es el camino correcto, Flutter se puede aprovechar de forma incremental: las aplicaciones móviles preexistentes pueden integrar Flutter una sola parte a la vez. De hecho, así es como la mayoría de las grandes empresas comienzan con Flutter, creando una pequeña parte de su aplicación existente en Flutter y luego reemplazando lentamente otras partes una vez que ven los beneficios.

Limitaciones a considerar antes de usar Flutter

Para ser justos, Flutter, al ser más nuevo, no está tan probado en batalla como otros marcos de aplicaciones móviles híbridas como React Native; después de todo, el alcance del usuario final de React Native cubre las aplicaciones móviles de Facebook, Instagram, Skype y Discord.

La respuesta predeterminada a "¿debería usar Flutter?" es, por ahora, un cauteloso sí . Esto se debe a que los gerentes de proyecto aún deben considerar qué funciones avanzadas, si las hay, necesitarán y asegurarse de que esas funciones estén disponibles en Flutter antes de comprometerse a usarlas. En particular, vale la pena preguntar qué bibliotecas y complementos podría necesitar un equipo para crear una aplicación en particular. Como una entrada más nueva en los marcos de aplicaciones móviles, Flutter no tiene el amplio alcance de bibliotecas y complementos que tiene React Native.

Por ejemplo, la compatibilidad con la cámara en Flutter aún no está completa, y el zoom y el control del flash aún no forman parte del complemento oficial de la cámara. Para mí, eso no fue un factor decisivo, ya que pude encontrar un complemento de terceros cuando necesitaba integrar la funcionalidad de foto/video en una aplicación que estaba creando.

Otro complemento importante que podría perderse es Google Maps. No hay complementos de Google Maps nativos de Dart y, si bien hay un complemento que permite integrar Google Maps en su código Flutter, utiliza funciones de Flutter (vistas de plataforma) que aún se encuentran en estado de vista previa para desarrolladores.

Una cosa más que no afectará a muchos proyectos, pero que debe tener en cuenta, es que, por ahora, Flutter no admite ninguna capacidad 3D. El equipo se está enfocando solo en 2D por ahora. Pero la mayoría de las aplicaciones no utilizan ninguna funcionalidad 3D, por lo que esto no debería ser un factor decisivo para la mayoría de los desarrolladores.

Algunos consejos de mi experiencia con Flutter

Después de haber lanzado tres aplicaciones de Flutter en los últimos dos años, aprendí varias cosas que desearía que me hubieran dicho cuando estaba comenzando. Los enumeraré aquí con la esperanza de que lo ayuden en su viaje de desarrollo de Flutter.

Flutter es muy fácil para empezar. Empecé con un maravilloso curso sobre App Brewery. Sin embargo, después de completar los primeros módulos, pensé que había aprendido lo suficiente y comencé a crear la primera aplicación que lancé.

Debido a mi impaciencia, me salté varios módulos de ese curso que resultaron ser importantes, y tuve que aprender las lecciones de esos módulos de la manera más difícil cometiendo errores. Específicamente, hubiera hecho un trabajo mucho mejor en mi primer uso de Flutter para el desarrollo de aplicaciones si hubiera aprendido algunas de las mejores prácticas de Flutter:

• Cómo modularizar y estructurar el código de mi aplicación Flutter.
• Cómo funciona la gestión estatal.
• Cómo autenticar usuarios y rastrear el estado de autenticación en las diferentes páginas de mi aplicación Flutter.
• Cómo integrar notificaciones usando el paquete Firebase Messaging.

Terminé aprendiendo todas estas cosas, pero primero tuve que cometer muchos errores. Reescribí partes significativas de la primera aplicación que construí. Sin embargo, con mi segunda aplicación Flutter, aprendí de mis errores y terminé haciendo un trabajo mejor y más rápido.

Hay muchos recursos que puede encontrar fácilmente buscando en Google para conocer los conceptos que mencioné anteriormente. Puede comenzar mirando los enlaces en la página Más información en el sitio de Flutter.

Otra cosa que encontré es que, debido a lo nuevo que es Flutter, no existe un patrón único para estructurar tu aplicación. Viniendo de una carrera de desarrollo basada principalmente en Django, estoy acostumbrado a saber que MVC es el patrón que se debe usar en mis aplicaciones de Django. iOS también tiene un claro ganador en el patrón MVVM que sigue. Android tiene su conjunto de pautas sobre cómo diseñar mejor una aplicación.

Flutter no tiene un patrón de arquitectura que haya "ganado" sobre las muchas posibilidades. Esto fue algo que me dio un momento difícil al principio. Al final, después de haber desarrollado varias aplicaciones de Flutter, creo que lo mejor es simplemente elegir una arquitectura y ceñirse a ella.

Yo personalmente uso el paquete del provider como un marco de inyección de dependencia y gestión de cambios. Mis aplicaciones Flutter también se dividen aproximadamente en tres líneas:

1. Vistas , que son los widgets que construyen la aplicación, incluidas las pantallas. Inyecto servicios y modelos utilizando el widget Consumer del paquete Provider en mis vistas para poder construir la interfaz de usuario en función de los datos disponibles. El widget del Consumer también reconstruye la vista cuando cambia el estado, que es cómo reaccionan mis aplicaciones a los cambios de estado.
2. Modelos , que son objetos simples y antiguos que utilizo para almacenar datos estructurados.
3. Servicios/controladores , donde va la mayor parte de la lógica empresarial. Aquí también se codifican las interfaces API, que pueden recuperar y enviar datos a la API. Estas interfaces API proporcionan y aceptan modelos para pasar datos.

También vale la pena considerar la biblioteca de bloques como una alternativa al paquete de provider . Tiene una arquitectura ligeramente diferente y utiliza secuencias de eventos y estados para conectar vistas y modelos.

Es una forma un poco más compleja de administrar el estado que usar la biblioteca de provider , pero vale la pena si tiene una aplicación compleja en la que realiza cambios en los mismos datos de múltiples fuentes y necesita responder a esos cambios desde múltiples lugares.

Si finalmente no usa BLoC o provider , tendrá que encontrar algún método para administrar el estado en su aplicación, especialmente en lo que respecta a las notificaciones.

Cómo Flutter se compara con otros marcos híbridos

reaccionar nativo

React Native es, con mucho, el marco de aplicaciones móviles híbridas más popular y exitoso hasta la fecha, y por una buena razón. Se necesitó un marco web front-end popular y bien hecho, React, y permitió que millones de desarrolladores front-end también comenzaran a escribir aplicaciones móviles. Estoy seguro de que muchas de las excelentes aplicaciones móviles que tenemos hoy nunca se habrían creado si los desarrolladores hubieran tenido que encontrar el tiempo y la motivación para aprender los SDK nativos de desarrollo de iOS y Android.

En este contexto, confío en decir que Flutter eventualmente ganará como el marco líder de aplicaciones móviles híbridas. Hay un par de razones para eso.

Los componentes de React Native se describen en código JavaScript y se traducen a controles nativos. Esto significa que los usuarios obtienen una sensación de interfaz de usuario diferente en las versiones iOS y Android de la aplicación. Si los desarrolladores están tratando de lograr una experiencia nativa para sus usuarios, esto es genial.

Sin embargo, también significa que si los desarrolladores quieren tener la misma interfaz de usuario consistente en ambas plataformas móviles, tienen que trabajar duro para diseñar los componentes nativos para que se vean iguales, o usar diferentes componentes que brinden la misma apariencia en ambas plataformas. plataformas

Compare esto con Flutter, donde el marco proporciona sus propios widgets en todas las plataformas compatibles. No hay traducción, porque Flutter no se basa en los controles nativos para pintar la interfaz de usuario. En su lugar, utiliza su propia biblioteca de controles. La biblioteca de widgets de Flutter proporciona widgets que parecen controles nativos, pero son completamente opcionales.

Este enfoque tiene sus pros y sus contras. La mayor ventaja es que ahora tiene exactamente la misma aplicación en ambas plataformas. Pero renuncias a algunas cosas para lograrlo.

Dado que Flutter usa sus propios widgets en lugar de usar los nativos, no puede usar la gran cantidad de bibliotecas existentes que brindan controles personalizados como puede hacerlo con un trabajo mínimo en React Native. En React Native, es bastante simple escribir un pequeño contenedor alrededor de cualquier control nativo existente y hacer que funcione. Esta es también la razón por la cual, en este momento, no existe una implementación estable de Google Maps para Flutter.

Sin embargo, la capacidad de incrustar controles nativos se está trabajando en este momento y se encuentra en la vista previa del desarrollador, lo que significa que puede usarla, pero es posible que tenga que lidiar con errores. Una vez que se lance, cerrará este agujero bastante grande en la funcionalidad de Flutter en comparación con React Native.

Esta misma característica de Flutter, que usa su propia biblioteca de widgets en lugar de los nativos, también brinda un gran beneficio cuando desea crear un componente completamente nuevo. En React Native, tendría que crear un componente nativo de la plataforma e importarlo a su aplicación a través de enlaces.

Con Flutter, puede crear componentes personalizados directamente en su código Dart. Tiene control completo de la interfaz de usuario con widgets como CustomPainter que le permiten dibujar lo que necesite, y tiene una biblioteca de widgets disponibles que le permiten implementar animaciones personalizadas. Nunca necesita salir de la base de código de Dart para crear estos widgets personalizados.

Y creo que este es uno de los mayores beneficios de Flutter. Tiene el control completo de su interfaz de usuario desde el código de Dart y ya no tiene que preocuparse por aprender el SDK nativo de las plataformas para las que está desarrollando.

Apache Córdoba

Apache Cordova no es tanto un marco como un contenedor de navegador. Con Cordova, crea su aplicación utilizando tecnologías web: HTML, CSS y JavaScript. Cordova le ofrece una forma de ejecutar esta aplicación web en plataformas móviles y expone las API nativas de la plataforma en JavaScript para que su aplicación pueda interactuar con la plataforma.

Hay una serie de marcos diferentes creados para Cordova. Uno de los famosos que he usado en el pasado es el marco Ionic. Proporciona un conjunto de componentes de interfaz de usuario que se ven y actúan de manera similar a los componentes de la plataforma nativa. Sin embargo, estos componentes se implementan mediante HTML/CSS/JavaScript.

La experiencia de desarrollo con Cordova e Ionic es realmente agradable, y empezar es muy rápido si ya eres desarrollador web. Debido a que está creando aplicaciones utilizando tecnologías web, tiene a su disposición todo el ecosistema web. Piense en los cientos de miles de pequeños componentes y bibliotecas basados ​​en HTML/CSS/JavaScript, y puede usar la mayoría, si no todos, de ellos. Esto significa que la mayoría de los "widgets" que necesita ya están disponibles en línea.

Sin embargo, esto también es un inconveniente. Debido a que usa tecnologías web para crear sus aplicaciones, se necesita mucho cuidado para asegurarse de que la aplicación se vea y se sienta como una aplicación móvil, y no solo como un sitio web que se redujo para funcionar en dispositivos móviles.

Si bien Cordova es una excelente manera de desarrollar un MVP o incluso las primeras versiones de su aplicación, la primera aplicación que construí en Flutter fue un puerto de una aplicación Ionic. Las mejoras de rendimiento que obtuvimos, especialmente en las vistas que tenían mucho contenido para desplazarse, se notaron desde la primera interacción.

Xamarin

No tengo ninguna experiencia con Xamarian, por lo que no puedo comparar los dos. Sin embargo, durante mi investigación, encontré un gran artículo que hace una comparación justa.

Si bien el artículo termina con un empate entre Flutter y Xamarian, puedo decir con confianza que si lo estuviera leyendo y tuviera que elegir entre los dos marcos, me habría ido con Flutter porque las cosas en las que brilla son las cosas. que valoro más.

Una descripción técnica general de Flutter

Flutter: el "motor de juego" de los frameworks de aplicaciones híbridas

Entre los marcos de aplicaciones móviles híbridas, Flutter tiene un enfoque único. No delega la interfaz de usuario a la plataforma nativa ni utiliza una vista web. En cambio, Flutter usa su propio motor de renderizado para pintar la interfaz de usuario. Esto es similar a cómo los juegos usan un motor de juego que genera todas las partes de sus interfaces de usuario, en lugar de usar controles nativos.

Flutter utiliza el motor de gráficos Skia de alto rendimiento y probado en batalla para dibujar todo en su aplicación móvil. Usar Skia proporciona dos beneficios principales que se me ocurren, aunque estoy seguro de que los ingenieros de Google detrás de Flutter tenían mucho más en mente:

1. Su aplicación se verá exactamente igual en todas las plataformas sin necesidad de personalizarla para cada una.
2. Su aplicación obtendrá un gran rendimiento, similar a las aplicaciones nativas, porque no hay una capa intermedia que tenga que traducir su código al código de la plataforma nativa para dibujar los widgets.

Todo es un widget

Los documentos de Flutter hablan de Flutter como un "marco de estilo React". Esto es evidente en la forma en que se construyen las aplicaciones mediante la composición de widgets más pequeños ( componentes en la terminología de React) juntos.

Sin embargo, Flutter lleva el enfoque de todo es un widget un paso más allá que cualquier otro marco con el que he trabajado.

Un ejemplo simple es el relleno. Con la mayoría de los marcos, el relleno es un atributo de los elementos de la interfaz de usuario. En Flutter, Padding es un widget que puede envolver otros widgets dentro de sí mismo y agregar relleno alrededor de su widget secundario.

Más singularmente, InheritedWidget no tiene interfaz de usuario y no proporciona ninguna interacción con el usuario. Su único trabajo es agregar información al árbol de widgets para que, en algún punto profundo del árbol, pueda extraer esa información.

Por ejemplo, la raíz de su aplicación, el widget MaterialApp , puede inyectar un servicio de autenticación en el árbol de widgets usando un InheritedWidget . Ahora, en lo profundo del árbol en alguna otra página, como su página de perfil de usuario, puede usar un método para extraer ese servicio de autenticación y usarlo.

Este enfoque de todo es un widget requiere un tiempo para acostumbrarse. Pero una vez que se familiarice con él, se convierte en una poderosa forma de crear funcionalidad en sus aplicaciones.

Aleteo, dardo y cavar en la fuente

Flutter está íntimamente relacionado con Dart. Si bien el motor de renderizado central está integrado en C/C++, eso es solo una pequeña parte de Flutter.

La mayor parte del código base de Flutter está escrito en Dart, y existen excelentes razones por las que el equipo de Flutter lo eligió. Pero el mayor beneficio para mí fue que podía mirar fácilmente el código fuente del marco, y todos los diferentes widgets que proporciona, y aprender de ellos.

Esta es una ventaja más poderosa de lo que muchos desarrolladores creen. Recomiendo que la mayoría de los desarrolladores traten de encontrar respuestas en el código de sus marcos/bibliotecas, ya que eso no solo les ayuda a comprender lo que sucede debajo de las sábanas, sino que también los expone a un código de alta calidad y bien diseñado, que es una forma segura. de crecer como desarrollador.

Interoperabilidad de plataforma nativa

Si bien Flutter proporciona la capa de interfaz de usuario y la lógica comercial se maneja fácilmente a través de paquetes puros de Dart, para acceder a las capacidades de la plataforma nativa, como la geolocalización y el control de la cámara, el uso de paquetes de terceros de pub.dev es la estrategia más sencilla.

Sin embargo, si hay alguna funcionalidad que necesita que no está disponible a través de un paquete existente, escribir uno usted mismo no es demasiado difícil. Yo mismo no he creado ningún paquete nativo de la plataforma, pero he mirado el código fuente de muchos por curiosidad.

Aunque no soy un desarrollador de aplicaciones nativo, pude comprender principalmente las partes nativas de esos complementos y ver cómo se conectaban al tiempo de ejecución de Dart a través del paso de mensajes. Para los desarrolladores experimentados de plataformas nativas, será muy fácil crear un nuevo paquete para aprovechar una capacidad nativa.

¿Deberías usar Flutter en tu próximo proyecto?

Con suerte, este artículo le ha brindado suficiente información para decidir si puede usar Flutter en su proyecto de aplicación móvil. He tratado de dar una imagen equilibrada de Flutter, enumerando los pros y los contras.

Si bien nadie puede tomar la decisión por usted, puedo darle algunos consejos de despedida sobre cómo podría abordar la cuestión de usar Flutter en mi próxima aplicación móvil. Si las ventajas de Flutter pueden proporcionar todas las capacidades que necesita una aplicación, la elegiría en un santiamén.

Esto se debe a que, aparte de las pocas áreas en las que actualmente falta Flutter, todos los demás aspectos son los que he llegado a admirar y en los que confío al desarrollar y lanzar las cinco aplicaciones diferentes de Flutter el año pasado:

• La facilidad de Flutter para empezar
• Las ganancias de velocidad que se pueden obtener al usar un marco que fue diseñado desde cero para enfocarse en la velocidad de desarrollo
• El rico ecosistema de bibliotecas Dart fácilmente disponibles y paquetes de terceros
• La forma diferente pero extremadamente productiva de Flutter de desarrollar aplicaciones utilizando el enfoque de todo es un widget

Aquellos que ofrecen servicios de desarrollo de aplicaciones móviles harían bien en darle una mirada seria a Flutter, si aún no lo han hecho.

Terminaré señalando una última ventaja de Flutter: tiene la mejor documentación de cualquier biblioteca o marco con el que haya trabajado. Es raro que busco en Google una pregunta de Flutter y no es respondida por una página del propio sitio de Flutter.

Como Google Cloud Partner, los expertos certificados por Google de Toptal están disponibles para las empresas que lo soliciten para sus proyectos más importantes.