Flutter: primer contacto

Flutter permite construir aplicaciones móviles completas dando acceso a los sistemas de conectividad, almacenamiento y sensores del dispositivo en que se ejecutan, pero su razón de existir es la interfaz de usuario. Flutter capacita a los desarrolladores para crear interfaces donde prima el diseño de marca, manteniendo una única base de código compatible con iOS y Android. Al mismo tiempo, permite adherirse al estilo de la plataforma cuando así se desea, proporcionando dos conjuntos de componentes (widgets) separados, Material Design y Cupertino.

La idea de hacer apps multiplataforma tiene poco de original. Mantener una sola base de código para iOS y Android es terriblemente atractivo como forma de reducir costes de desarrollo y mantenimiento, al menos en teoría.

La aproximación de Flutter es similar a la de muchos motores de videojuegos. El código de la aplicación, junto con el del propio Flutter, se compila a una biblioteca nativa. Ésta se empaqueta en un fichero APK o IPA junto con un proyecto base que actúa como “ejecutor” de la biblioteca. Cuando la app se lanza, el proyecto base carga la biblioteca y delega en ella cualquier evento de usuario o de sistema que reciba, así como la responsabilidad de dibujar la pantalla.

El punto diferenciador con respecto a otras soluciones multiplataforma es que el SDK no se apoya ni en tecnología web como Cordova, ni en los componentes gráficos de la plataforma base como Xamarin. Flutter incluye un motor de renderizado gráfico propio y sus widgets se ejecutan directamente sobre él. El motor está basado en Skia, una biblioteca de dibujo en 2D que forma parte de la pila de Chrome, Firefox o el propio Android, y se incluye en cada aplicación Flutter compilado de forma nativa.

Con esta implementación Flutter apuesta por una pila tecnológica más independiente del sistema base, más delgada, y con más margen para optimizar tanto el rendimiento de las interfaces como su fidelidad al diseño original.

Mi tesoro

Además del SDK, Flutter proporciona una serie de herramientas necesarias para la creación de aplicaciones. Todas ellas son accesibles bien desde línea de comandos, bien desde las respectivas extensiones oficiales para Android Studio/IntelliJ IDEA y Visual Studio Code.

La estrella del paquete es, sin duda, el sistema de recarga en caliente. Éste permite que casi cualquier cambio hecho al código se refleje inmediatamente en ejecución con sólo guardar fichero. Funciona sorprendentemente bien, tanto en dispositivos reales como en emuladores, en iOS y en Android.

Lo complementa estupendamente el inspector de widgets, un panel en las extensiones de los IDEs capaz de localizar y observar en tiempo real el estado de cada elemento de la interfaz. La combinación de ambos consigue que no se eche en falta ninguna herramienta de edición gráfica, delegando su cometido en el dispositivo móvil o emulador.

No se olvida Flutter tampoco de la importancia de los tests automáticos. El paquete incluye APIs diferenciadas para desarrollar tests unitarios y de integración, junto con un ejecutor de pruebas que funciona en Windows, Linux y Mac sin necesidad de dispositivos o emuladores, ideal para operar en entornos de integración continua.

Enséñame la pasta

Las aplicaciones Flutter se escriben en Dart, un lenguaje de programación creado por Google, originalmente para desarrollo web. Dart es orientado a objetos, tipado y transpilable a JavaScript. Fue aprobado como estándar ECMA en 2015.

Veamos el aspecto de Dart con un clásico.

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

El ejemplo anterior muestra una app basada en Material Design. La primera línea importa el conjunto de widgets de Flutter que implementan este estilo. En la segunda aparece el método main(), punto de entrada en la aplicación, haciendo uso de la notación => para definir su cuerpo en una sola línea.

Dicha línea crea un único widget que aloja toda la aplicación. En Flutter casi todos los elementos imaginables en una interfaz de usuario serán widgets. Los widgets de Flutter son componentes reactivos diseñados para favorecer la composición, y van más allá de lo que se asocia habitualmente a la palabra ‘widget’ en otros sistemas, incluyendo conceptos como alineaciones o márgenes.

En el ejemplo se define la clase MyApp como un widget sin estado, que sirve como raíz de la interfaz. De MyApp pende un widget de tipo Scaffold, un elemento específico de la biblioteca Material que acepta una barra de aplicación con un título y una propiedad body para alojar el contenido principal de la vista. En este caso, el body consiste de un widget Center que alinea a su widget hijo Text en el centro de la pantalla.

Para ver este código en acción, sigue las instrucciones aquí. El ejemplo está copiado del primer paso en un pequeño tutorial de la documentación oficial de Flutter.

Dar cera, pulir cera

Fin del publirreportaje. A pesar del entusiasmo de Google y la comunidad de Flutter, aún hay mucho que demostrar. En todas las soluciones multiplataforma la pregunta fundamental es la misma: ¿hasta que punto puedo reemplazar mis dos entornos de desarrollo nativos por esta nueva y flamante solución?

Flutter viene acompañado por un sistema de interoperabilidad y extensión que permite acceder a la interfaz de programación de la plataforma desde el código escrito en Dart. Dicho sistema sirve como base para diversos paquetes de extensión publicados en Dartlang.org que son fácilmente integrables en las apps gracias a la herramienta de gestión de dependencias incluída con el SDK. Todo un ecosistema de bibliotecas a tiro de piedra.

La cuestión es que dichos paquetes no son Flutter, y por tanto el fabuloso, sólido y confiable 1.0 que acompaña al sistema no aplica a los mismos. Cada paquete tiene su propio conjunto de colaboradores, su propio estado de madurez y su propio número de versión. A priori, es difícil poner la misma confianza en un paquete de acceso a cámara que luce una versión 0.4.2 que en las interfaces directas del sistema base.

Flutter nos anima a nosotros, desarrolladores, a crear nuestras propias extensiones y a sumarnos a la comunidad de colaboradores. Sin duda es un planteamiento fantástico para potenciar el crecimiento de la plataforma. Sin embargo, suma un punto de incertidumbre acerca de su estabilidad y evolución a corto plazo que un desarrollador responsable no puede ignorar.

Por otro lado, la independencia de los componentes de interfaz nativos trae sus propios inconvenientes. Hay un nuevo catálogo de widgets que aprender, con el tiempo y esfuerzo que ello requiere. Dicho catálogo parece realmente completo, pero compite con dos que llevan mucho tiempo afianzados, y no podemos dar por sentado que nuestros componentes favoritos tendrán un widget equivalente disponible. Además, los puristas no dudarán en recordarnos que los widgets de Flutter sólo imitan los estilos nativos.

En cuanto a las herramientas, la jaula dorada de Apple favorece una asimetría totalmente esperable. Si bien Xcode es un requisito para poder generar las apps de Flutter para iOS, no hay forma alguna de desarrollar las mismas en él. La transición se antoja mucho más sencilla para desarrolladores de Android o Xamarin al existir extensiones para sus IDEs habituales.

Merece mención especial la ausencia de un sistema de inyección de indepencias. Searching for friends.

Hakuna matata

¿Merece la pena dar el salto? Pues mira, yo que sé. El desarrollo de apps multiplataforma se ha convertido en el Santo Grial del desarrollo móvil, y bien sabemos que hasta el momento es mitad realidad, mitad leyenda.

A primera vista Flutter parece lo bastante sólido como para funcionar bien en prototipado rápido o clientes REST sencillos, pero guarda mucha incertidumbre como para llevar a producción apps más sofisticadas.

Esto lo coloca en una situación similar a otros sistemas multiplataforma, con la desventaja de que llega más tarde, lo que dificulta justificar el cambio si ya se cuenta con experiencia en alguno de ellos. Quizá el rendimiento optimizado que promete marque la diferencia, pero valorar esto en profundidad va más allá de lo que podemos estimar con una primera aproximación.

Otro incentivo interesante es que Flutter sea la primera plataforma de desarrollo de apps conocida para Google Fuchsia, el sistema operativo para dominarlos a todos. Posicionar temprano tus apps en Fuchsia supondría una ventaja competitiva importante si el proyecto llegara a buen término. Así parecía, al menos, hasta que se supo que las apps de Android estarán soportadas por el sistema. Y no olvidemos que Google cierra proyectos como el que cierra la puerta de su casa. Ciao, Google+.

En definitiva, valóralo tú mismo. Si te apetece echar un vistazo hay mucho contenido interesante en la documentación oficial, también en español. Los Codelabs sobre Flutter son particularmente apropiados para iniciarse.

Nosotros seguiremos con un ojo puesto en la plataforma, pero por el momento tenemos claro que hay otras cestas en las que poner parte de los huevos.