Flutter es un SDK móvil multiplataforma de código abierto creado por Google que permite construir aplicaciones nativas atractivas en iOS y Android en poco tiempo. Flutter compila el código a formato nativo, lo que hace que las aplicaciones se sientan y funcionen como aplicaciones nativas sin necesidad de una máquina virtual. El uso de widgets reactivos y la capacidad de recargar en caliente el estado de la aplicación acelera el desarrollo de aplicaciones móviles atractivas.

1. La magia de Flutter
Chema Molins Edgar González
@jmolins @efgpdev

2. ¿Qué es Flutter?
Flutter.io: “Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and
Android in record time. Flutter works with existing code..., and is free and open source*.”
Un SDK open-source multiplataforma creado por Google para
● construir
● aplicaciones nativas
● atractivas
● en tiempo récord
* Actualmente in Beta

3. 1. Construir aplicaciones nativas

4. 1. Construir
Construir aplicaciones móviles
Flutter no es solo un framework.
Es un SDK completo para construir UIs.
● Independiente de la plataforma: incluye el
runtime y el renderer
● Similar a los motores de juegos
● “Forward-looking”: nuevos sistemas, fuchsia

5. 2. Aplicaciones nativas
¿Qué significa nativo para móvil?
● Plataformas OEM “Nativas” (iOS, Android)
● Widgets “Nativos” (React Native, Xamarin Native)
● Definición de Nativo:
An executable program coded in the machine language of the
hardware platform it is running in. A native application has been
compiled into the machine language of that CPU.

6. 2. Aplicaciones nativas
Flutter es Nativo por definición!
● Compila a código máquina nativo (ARM)
○ Compilación AoT (Ahead of Time)
○ Las apps son nativas en cada sistema
○ No hay máquina virtual (JVM)
○ No hay bridge javascript
● Acelaración GPU, 60 fps
● Animaciones suaves sin “jank”

7. Único SDK reactivo que es nativo

11. Único SDK reactivo que es nativo
● Vistas reactivas, sin un bridge JavaScript
● Lleva Reactivo al siguiente nivel
○ Solo re-renderiza lo que ha cambiado
○ El scrolling se ha implementado usando layout
● Streams incluidos (+ extensiones opcionales Rx)
○ Simplifica el código, evita condiciones de carrera.
● Hot-reload stateful

12. Flutter lleva la plataforma a la aplicación

13. Similar a motores de juegos, como Unity
Los motores de juegos incluyen su renderizador y todo lo
que renderizan (widgets)
Flutter es básicamente un motor pero para aplicaciones
en vez de juegos
What’s Revolutionary about Flutter

14. 3. En tiempo récord

15. En tiempo récord
● Hot-reload stateful
○ Gracias al compilador JIT
● Prototipado rápido
● Herramientas y
documentación
excepcionales

16. Hot Reload
Se inyectan los ficheros fuente modificados en la MV Dart en ejecución
Stateful: El estado de la app se mantiene después de la recarga.
Iterar rápidamente en una pantalla profunda de la aplicación.

17. Hot-reload no es única parte de la historia
Compatibilidad
Testing & QA
Mantenimiento
Material funcionando en Android Jelly Bean

18. ¿Cómo es posible?
Flutter renderiza directamente
en el canvas de la plataforma
Las librerías de compatibilidad no son necesarias.
Diferentes versiones de OS no “rompen” la app.
Las nuevas funcionalidades funcionan en móviles
antiguos

19. Widget Inspector
Analizar el árbol de widgets.
Diagnosticar errores de layout

20. - Sistema de tipos sólido
- Tree Shaking
- Rico conjunto de librerías
- GC Multi-generacional sin bloqueo
- Why Flutter uses Dart
Superpotenciado por Dart

21. 2. Aplicaciones “atractivas”

22. Widgets bonitos y rápidos

23. Experiencias de usuario atractivas
Disponibilidad de un conjunto de widgets Material y Cupertino (iOS) construidos
en el propio SDK de flutter.
● Bonitos
● Rápidos
● Personalizables y extensibles
Capacidad de realizar diseños de marca sin las limitaciones de los widgets de
plataforma.
Why Flutter doesn’t use OEM widgets

24. Personalizando y extendiendo los widgets
El sistema de widgets de Flutter se diseñó para que fuera fácilmente
personalizable
Composición: Los widgets se construyen con widgets más pequeños que puedes
reusar y combinar de maneras novedosas para hacer otro widget.
class RaisedButton extends StatelessWidget {
...
}

25. Todo es un Widget

26. Each layer
builds upon
the
previous
layer
Skia Dart Text
Foundation
Animation Painting
Rendering
Widgets
Material
Gestures
Engine
(C++)
Framework
(Dart)
Cupertino

27. Miscelánea

28. Usar “platform channels”
permite recibir llamadas
de métodos y devolver
resultados del/al
Sistema operativo
Platform Channels

29. Recursos adicionales
Blog: What’s Revolutionary about Flutter por Wm Leler: goo.gl/bZcFR9
Video: Flutter's Rendering Pipeline por Adam Barth: youtu.be/UUfXWzp0-DU
Video: The Mahogany Staircase por Ian Hickson: youtu.be/dkyY9WCGMi0
Y por supuesto: github.com/flutter & flutter.io

30. Gracias
Chema Molins Edgar González
@jmolins @efgpdev