Durante el pasado Microsoft Build 2020, .NET MAUI fue anunciado como la propuesta de un .NET unificado que permitirá a los desarrolladores enfocarse en una experiencia de un solo proyecto, implementando no solo en múltiples dispositivos sino también en plataformas. Si bien .NET MAUI admitirá los patrones conocidos MVVM y XAML, su hoja de ruta también incluye una oportunidad para aprender y aprovechar las ventajas de patrones modernos, como es el caso de MVU. La pregunta es: ¿cómo puedo prepararme para desarrollar aplicaciones de C# fluidas? Conoce Comet, un nuevo prototipo de Framework UI para escribir interfaces de usuario de aplicaciones que sigue el patrón MVU, soporta Hot Reload y permite compilar la app en múltiples plataformas: móvil (Xamarin Forms/nativo), desktop (WPF, Mac OS), web (Blazor) con C#. Si bien está en fase experimental y se considera una prueba de concepto, sin duda es un enfoque interesante que ayudará a prepararte para lo que viene en la evolución de Xamarin cuando llegue .NET MAUI En esta sesión discutiremos los conceptos básicos de MVU y hablaremos de Comet con código, demos y conceptos esenciales.

1. INTRODUCCIÓN A
MVU CON COMET

2. 3º EDICIÓN
INTRODUCCIÓN A
MVU CON COMET

3. Luis Beltrán
Investigador – TBU
@darkicebeam
luis@luisbeltran.mx
¿Quiénes somos?
Humberto Jaimes
Software Developer
@HJaimesDev
humberto@humbertojaimes.net
Cristian González
Software Developer
@DarryStonem
alex@darry.dev

4. Agenda
Introducción
¿Qué es MVU? Conceptos, Frameworks
01
02
Comet, un nuevo MVU UIToolkit03
Demos04
Luis Beltrán | Cristian González| Humberto Jaimes
Slides disponibles en
http://bit.ly/XamarinAssembleMVU

5. Introducción1

6. .NET La plataforma para construir todo
DESKTOP CLOUDWEB MOBILE ML
.NET
IoTGAMING

7. .NET MAUI
• La evolución de Xamarin.Forms
• UI nativa y multiplataforma
• Crea apps multiplataforma para
móviles, escritorio y dispositivos
• Un solo proyecto, una sola base de
código
Construye UI hermosas y nativas
para cualquier dispositivo
github.com/dotnet/maui
The Journey to One .NET
https://aka.ms/ScottBuildSessions
Para saber más acerca de .NET MAUI:
https://www.humbertojaimes.net/maui/

9. La visión para un solo .NET incluye proporcionar al desarrollador
diversas opciones para elevar la productividad:
• IDE:
• Visual Studio 2019
• Visual Studio for Mac
• Visual Studio Code
• Patrones:
• MVVM
• XAML
• Blazor
• MVU

10. ¿Qué es MVU?
Conceptos, Frameworks
2

11. MVU (Model-View-Update)
• Un patrón para escribir código de UI
• Promueve un flujo unidireccional para la gestión de datos y estado
• También conocido como La Arquitectura Elm

12. Model El estado de tu aplicación
View Una forma de convertir el estado en UI (HTML por ejemplo)
Update Una forma de actualizar el estado por medio de mensajes
Estos 3 conceptos son el núcleo de La Arquitectura Elm
El estado actual
de la aplicación
Renderiza la UI
basado en el
modelo
Crea un modelo
actualizado
Model View Update
se pasa a envía
mensaje

13. MVU Hot Reload
MVU promueve una experiencia de desarrollo code-first en la que la UI
se actualiza inmediatamente, aplicando solo los cambios necesarios

14. https://thomasbandt.com/model-view-update
• Program: La unidad autónoma más pequeña que puede ser ejecutada.
• Model: define el estado de tu programa.
• Command: Código para realizar una acción de forma (a)síncrona.
• Message: define lo que la función de Update necesita realizar.
• Init() function: el punto de entrada de un programa.
• Update() function: el único lugar que manipula el modelo de forma
directa.
• View() function: es responsible de describir la UI
Conceptos importantes

15. Centralización del estado y Update
La inmutabilidad del estado es el principal beneficio de MVU.
No hay problemas de concurrencia
Actualizando el estado solo a través de mensajes permite al framework aplicar mensajes
concurrentes en forma consecutiva.
Views explícitas en cada Update
En MVU, el framework toma la responsabilidad de actualizar la UI cada vez que el estado es
modificado.
Views reproducibles
Puedes escribir funciones libres de efectos colaterales, generando
vistas específicas con estados concretos.
Ventajas

16. Elm
• Un lenguaje functional que compila a JavaScript
• Destinado a la creación de sitios y apps web.
• Hace un fuerte énfasis en la simplicidad.
• En Elm, un programa produce HTML que es
renderizado en pantalla, y el equipo envía
mensajes de vuelta informando lo que sucede,
por ejemplo ”se ha hecho click en un botón"
https://guide.elm-lang.org/

17. https://elm-lang.org/examples/text-fields

18. https://elmprogramming.com/model-view-update-part-1.html

19. • Un framework para desarrollo de apps móviles funcionales con F#
utilizando UI declarativa dinámica.
• Diseñado/mantenido por Don Syme (Microsoft PM y arquitecto F#) y
Timothé Larivière
• Una variante de Elmish, una arquitectura Elm implementada en F#
• “La UI se convierte en cálculo e información, no un estado”
• “Las Views son recalculadas y aplicadas diferencialmente”
https://fsprojects.github.io/Fabulous/
Introduction to Fabulous a F# MVU Framework for Xamarin | The Xamarin Show
https://channel9.msdn.com/Shows/XamarinShow/Introduction-to-Fabulous-
a-F-MVU-Framework-for-Xamarin--The-Xamarin-Show

20. https://timothelariviere.com/2019/12/21/how-to-become-a-fabulous-developer/

21. Un Framework MVU en F# para construir apps cross-platform para
iOS, Android, Mac, WPF y más utilizando Xamarin.Forms.
View functions:
• DynamicView à UI en F#
• StaticView à UI en XAML
• AdaptiveView à UI en F# con bindings inmediatos
https://github.com/fsprojects/Fabulous/tree/master/Fabulous.XamarinForms
F# Fabulous – Beyond MVU Basics | The Xamarin Show
https://www.youtube.com/watch?v=CGSYyK8-sik

23. Three ways to write Xamarin Apps in F#
https://thomasbandt.com/writing-xamarin-apps-in-fsharp
MVU for Native Xamarin Apps
https://thomasbandt.com/mvu-for-native-xamarin-apps
Fabulous – F# for cross-platform mobile apps – Don Syme
https://www.youtube.com/watch?v=ZCRYBivH9BM
Más información

24. https://thomasbandt.com/microsoft-maui-mvu
https://github.com/dotnet/maui/issues/118
¿El MVU de Microsoft es realmente MVU?
https://github.com/dotnet/maui/issues/40

25. ¿El MVU de Microsoft es realmente MVU?
https://twitter.com/dsymetweets/status/1262797500949331976

26. Comet, un nuevo MVU UIToolkit3

27. ¿Qué es Comet ?
• Comet es un prototipo de un nuevo
framework UI o patrón para hacer UI de
nuestras apps utilizando C#.
• Creado por James Clancey, PM
Architect de Microsoft.
https://github.com/Clancey/Comet

28. ¿Qué es Comet ?
Está basado en una implementación del patron MVU (Model-
View-Update).
MSBuild 2020, .NET MAUI, MVU, Renders, PropertyMappers
https://www.youtube.com/watch?v=_MGh3xipWm4

29. ¿Qué es Comet ?
Está basado en una implementación del patron MVU (Model-
View-Update).

30. ¿Qué es Comet ?
Está basado en una implementación del patron MVU (Model-
View-Update).

31. ¿Qué es Comet ?
¡Y podemos usar Hot Reload!
Getting Started with Comet
https://github.com/Clancey/Comet/wiki/Getting-Started

32. ¿Cómo funciona State ?
Actualmente hay dos formas de utilizarlo:
Agregando State<T> a un View
Implementando BindingObject a un View y
después añadiendo [State] como atributo

33. ¿Cómo puedo usar Comet ?
• Necesitas VS Code, .NET Core y Xcode.
• Instalar los Templates de Comet:
• Y las herramientas de Debug del Marketplace de VS Code.
https://marketplace.visualstudio.com/items?itemName=Clancey.comet-debug

34. ¿Cómo puedo usar Comet ?
Inicias un nuevo proyecto desde terminal:
Abres el proyecto y luego restauras los paquetes nuget.
¡Y listo!
Comet UI Demo
https://www.youtube.com/watch?v=-Ieg9UadN8s

35. Demo4

38. Para aprender más sobre Comet
Introduction to Comet and MVU
https://www.youtube.com/watch?v=s6WslQhDnT0
#XamarinSaturday: Comet – A .NET UI Experiment – David Ortinau
https://www.youtube.com/watch?v=pnZQosclItg
Comet MVU Toolkit!
https://www.youtube.com/watch?v=mGq1v_n4xgc

39. Comet Discord Server
https://discord.gg/7Ms7ptM

40. Únete a la Comunidad Xamarin en Español
https://www.facebook.com/groups/xamarindiplomadoitc
https://www.youtube.com/c/ComunidadXamarinenEspañol/

41. Luis Beltrán
@darkicebeam
luis@luisbeltran.mx
Humberto Jaimes
@HJaimesDev
humberto@humbertojaimes.net
Cristian González
@DarryStonem
alex@darry.dev