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.
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/
8.
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
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/
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
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
22.
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
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
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