Arquitectura de Flutter Web

Cesar Vega
15 mayo, 2019

. . .

[Fuente]

A principios de esta semana en Google IO 2019, la Vista Técnica Previa de Flutter Web (Llamada Humming Bird) se puso a disposición del público para que nosotros los desarrolladores comenzaramos a probar.


Repasando los conceptos de Flutter y Dart


Una aplicación Flutter compilada no contiene código interpretado o WebView, todo el código es compilado a binario nativo para la plataforma en la que se está construyendo. Todo esto es posible gracias a Dart, el lenguaje utilizado por Flutter.

Dart es un lenguaje estático, basado en clases, que es capaz de compilar Just in Time (JIT) o Ahead of Time (AOT) lo que permite a Flutter hacer uso de una de sus características principales como lo es el Hot Reload (recarga en caliente) en la que se efectúa una recarga del estado en menos de un segundo de la aplicación en ejecución.

Hasta ahora, Flutter ha sido capaz de funcionar sólo con Android e iOS. Pero actualmente, Flutter está siendo desarrollado para funcionar en Windows, MacOS, Linux, Chrome OS, pantallas inteligentes y sí, incluso en la Web.


Arquitectura de Flutter


[Fuente]

En la capa superior tenemos el Framework desarrollado en Dart. Hacen parte de él las bibliotecas para Animación, Pintado, Renderizado y los Widgets que son el corazón de cada interfaz de usuario de Flutter. Las librerías Material y Cupertino también están contenidas en esta capa. El código Flutter del desarrollador se sitúa en la parte superior de esta capa y normalmente utiliza widgets de Material o Cupertino. Si hay algo que no esté incluido en estas librerías, puedes moverte a una capa inferior para crear tus propios widgets o renderizarlos.

En la capa intermedia encontramos tres bibliotecas que forman el motor de Flutter escrito en C/C++:

1. Skia - Un motor de gráficos de código abierto utilizado por Google Chrome, Android, Chrome Os y muchos más. 
2. Runtime de Dart 
3. Text - Motor utilizado para renderizar y maquetar el texto 

La última capa, específica de la plataforma, es el integrador. Acá se configura la capa de renderizado.


Arquitectura de Flutter Web


[Fuente]

Nota: Este proyecto se encuentra en las primeras etapas de desarrollo, los plugins aún no están soportados en la web, el rendimiento puede parecer lento a veces, no todas las APIs de Flutter están soportadas y la interacción completa con el escritorio no está completa.

Una versión modificada del motor de Flutter actual, llamado «flutter_web» nació para reemplazar el motor actual de Flutter ya que no era compatible con la compilación para la web. Una vez se llegue a un punto estable, Flutter lo fusionará con el repositorio principal de Flutter.

El motor y las capas bajo el Framework necesitan ser cambiadas y reimplementadas, pero la API principal de Flutter permanece con cambios mínimos, por lo que es posible portar la interfaz de usuario desde alguna aplicación Android/IOS Flutter a la Web.

La capa de interfaz de usuario de Dart, que tiene vínculos hacia DOM y al Canvas de HTML5 en lugar de Skia, se compila a JavaScript (Dart en un ambiente productivo lo hace a través de su compilador Dart2js). Esto implica que los elementos que no se pueden representar con elementos DOM se dibujan con  Canvas.


¿Qué se genera en un Proyecto Flutter Web?


Para crear un proyecto Flutter Web, y si utilizas IntelliJ, crea un nuevo proyecto con el Asistente para Dart (esta opción no está disponible en el menú de Flutter). Para los usuarios de VsCode, crea el proyecto usando «Flutter: Nuevo proyecto web» desde la paleta de comandos ( Ctrl+Mayús+P ).

Cuando se genere el proyecto, se crean dos carpetas y dos archivos:

web. Contiene index.html, el punto de entrada del proyecto y main.dart (que se utiliza para inicializar Flutter Web y luego ejecutar la aplicación). Los assets se colocan en esta carpeta.

lib. Contiene main.dart y es donde irá la mayor parte del código

pubspec.yaml. Cada paquete pub, e incluso los proyectos Flutter normales, contiene un archivo llamado pubspec.yaml. Contiene los metadatos y las dependencias asociadas al proyecto.

analysis_options.yaml. Configura las reglas de lint para el proyecto. También se puede configurar tus propias opciones de lint.

Si deseas ver un ejemplo práctico sobre Flutter web, puedes ver un artículo en Medium escrito por Nash en el siguiente enlace.

3

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comunidades en Español