Introduction to .NET MAUI

1. Luis Beltrán
Microsoft MVP
@darkicebeam

3. Introducción a .NET
MAUI

4. BIBLIOTECAS BASE COMUNES / APIs
INFRASTRUCTURE
.NET 6
HERRAMIENTAS
Visual Studio Code
CLI
Visual Studio
Visual Studio for Mac
WEB MÓVIL JUEGOS IoT IA
DESKTOP
NUBE
ECOSISTEMA
NuGet
GitHub
Componentes,
herramientas,
proveedores de
bibliotecas

6. iOS
Swift
Swift
Swift
Swift
Java
Java
Java
Java C++
C++
.NET
JS
Obj-C
Obj-C
Obj-C
Obj-C
macOS
JS
JS
JS
JS
Kotlin
Kotlin
Kotlin
Kotlin
JS
JS
JS
JS
iOS

7. iOS macOS
iOS
.NET
.NET .NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET
.NET

9. Una plataforma de aplicaciones open-source
de Microsoft para la construcción de
aplicaciones iOS, Android, macOS & Windows
modernas, de alto rendimiento & multi-plataforma
con C# y .NET desde una
única base de código compartida.

10. Interfaz de usuario nativa multiplataforma
Sistema de proyecto único, base de código única
Acceso multiplataforma a la API de dispositivos
Compilación nativa, rendimiento nativo
Implementación en múltiples dispositivos, dispositivos
móviles y de escritorio
.NET MAUI
.NET 6
.NET MAUI
github.com/dotnet/maui
WinUI
Mac
Catalyst
Android
iOS
iOS
macOS

11. Arquitectura de una aplicación .NET MAUI
C# C#
Código compartido
UI, Recursos, Características de Plataforma & Lógica de Negocios
C# C#

12. Entorno productivo
Maximiza la reutilización de código
Rendimiento e integraciones nativas
Ecosistema expansivo

13. Instalación

14. Visual Studio 2022 (preview)
Desarrollo moderno
Cree aplicaciones innovadoras y modernas con .NET 6, GitHub y Azure
con herramientas integradas
Productividad personal y de equipo
Live Share, Hot reload, Web live preview, IntelliCode, herramientas
mejoradas de depuración y prueba
Escale a proyectos de cualquier tamaño
Una interfaz de usuario moderna y optimizada basada en una arquitectura
de 64 bits para admitir las bases de código y los flujos de trabajo más
grandes y complejos
https://visualstudio.microsoft.com/es/vs/preview/

17. Rápido y Fluido
Centrado en el rendimiento con más de 100 problemas
reportados por los usuarios solucionados; soporte nativo
para el procesador M1 de Apple
Interfaz de usuario moderna de macOS
Una interfaz de usuario reescrita, utilizando las API nativas
de macOS Cocoa. Con temática nativa, soporte de pantalla
completa y herramientas de accesibilidad de macOS.
Compatibilidad con .NET 6
Cree para la web, la nube y el móvil, utilizando .NET 6.
https://aka.ms/vsmac-preview

18. Cross-Platform UI

19. Plataforma de
aplicaciones completa
✓ Más de 40 páginas, diseños y controles
(Disponibles en C# o XAML)
✓ Enlace de datos bidireccional
✓ Navegación
✓ Visual State Manager
✓ API de animación
✓ Dependency Service
✓ Messaging Center
✓ Compatibilidad con CI/CD
✓ Desarrollo híbrido con Blazor
✓ Acceso a la API de la plataforma
✓ Imágenes, iconos, fuentes, pantallas de bienvenida
✓ Temas personalizados y predeterminados
C# C#
Código Compartido
UI, Recursos, Características de Plataforma & Lógica de Negocios
C# C#

21. CarouselView CollectionView ListView Picker TableView
IndicatorView ProgressBar ActivityIndicator Editor Entry
CheckBox DatePicker Slider Stepper Switch
TimePicker Button ImageButton RadioButton RefreshView
Frame GraphicsView Image Label ScrollView
SearchBar SwipeView BlazorWebview Border BoxView

22. Layouts
Páginas
Content Flyout Navigation Tabbed

24. Acceso a las APIs de
Plataforma

25. MapKit UIKit SiriKit ARKit CoreML

26. Fingerprint Bluetooth Picture-in-Picture Geolocation NFC

27. Cross-Platform APIs
Flashlight
Geolocation
Preferences
Device Info
Device Display Info
Secure Settings
Accelerometer
Battery
Clipboard
Compass
Connectivity
Data Transfer
Email
File System
Geocoding
Gyroscope
Magnetometer
Phone Dialer
Screen Lock
Sms
Text to Speech
Vibration

28. // Get cached location, else get real location.
var location = await Geolocation.GetLastKnownLocationAsync();
if (location == null)
{
location = await Geolocation.GetLocationAsync(new GeolocationRequest
{
DesiredAccuracy = GeolocationAccuracy.Medium,
Timeout = TimeSpan.FromSeconds(30)
});
}

29. // Register service
builder.Services.AddSingleton<IGeolocation>(Geolocation.Default);
// Inject service
IGeolocation geolocation;
public MyViewModel(IGeolocation geolocation)
{
this.geolocation = geolocation;
}

30. Rendimiento

31. Basado en tecnología de confianza
.NET for iOS hace una compilación completa
de Ahead Of Time (AOT) para producir un
binario ARM para la App Store de Apple.
.NET for Android aprovecha la
compilación Just In Time (JIT) y Ahead
of Time (AOT) en el dispositivo Android.
BINARIO
ARM
Se ejecuta de
forma nativa
.APP
AOT
.NET
C#
Bindings
.APK
Compilar
y vincular
.NET
C#
Bindings
IL
+
JIT
Se ejecuta de
forma nativa

32. https://github.com/microsoft/dotnet-podcasts

33. https://github.com/jsuarezruiz/netmaui-travel-app-challenge

34. https://github.com/davidortinau/WeatherTwentyOne

35. Ecosistema .NET MAUI

36. ¿Qué pasa con los desarrolladores
web?

37. ASP.NET Core
Desarrollo web con .NET
JS
Blazor

38. Blazor es flexible. Tienes opciones.
Blazor Server Blazor WebAssembly
DOM
Blazor
WebAssembly
.NET
Razor Components
Blazor
.NET
Razor Components
DOM
SignalR

39. Blazor

40. Blazor Híbrido: +

41. Arquitectura híbrida - .NET MAUI & Blazor
C# C#
Lógica de negocio compartida
C# C# C#
Componentes compartidos de Blazor

43. .NET ofrece opciones enriquecidas para desarrolladores
y equipos de desarrollo
Alcance Potencia
PWA Aplicación
nativa
con WebView
Sitio Aplicación
nativa
Web Híbrido Nativo
Blazor Blazor Hybrid
(Blazor + .NET MAUI)
.NET MAUI

44. Estructura de la
aplicación

45. 1 Proyecto único que
aloja todo el código
fuente del proyecto,
incluida la interfaz de
usuario, el código de la
plataforma, los recursos
compartidos y más

46. Las fuentes, las imágenes y los assets están
contenidos en el proyecto.
Fuentes: configuradas automáticamente por
plataforma
Imágenes – Redimensionadas, SVG
Iconos de aplicaciones y Splash Screens
también compatibles

47. Las carpetas específicas de la
plataforma contienen recursos
específicos de la plataforma,
configuración, lógica de inicio y
código de plataforma.

48. <TargetFrameworks>
net6.0-android;net6.0-ios;net6.0-maccatalyst;net6.0-windows10.0.19041
</TargetFrameworks>
<!-- Display name -->
<ApplicationTitle>MonkeyFinder</ApplicationTitle>
App Identifier -->
<ApplicationId>com.companyname.monkeyfinder</ApplicationId>
<!-- Versions -->
<ApplicationVersion>1</ApplicationVersion>

49. #if ANDROID
var button = new Android.Widget.Button(context);
#elif IOS
var button = new UIKit.UIButton();
#endif

50. public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
return builder.Build();
}

51. public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
builder.Services.AddSingleton<MonkeyService>();
builder.Services.AddSingleton<MonkeysViewModel>();
builder.Services.AddSingleton<MainPage>();
return builder.Build();
}

52. •
•
•

53. §
§
§
§
§
§

54. var secondWindow = new Window { Page = new MySecondPage { // ... } };
Application.Current.OpenWindow(secondWindow);

55. Shell
<Shell>
<FlyoutItem
Title="Style Guide"
Icon="Compass.png">
<ShellContent
ContentTemplate="{DataTemplate p:StyleGuidePage}"/>
</FlyoutItem>
</Shell>

56. •
•
ContentPage
Control
Content property

57. •
•
ContentPage
Layout
Content property
Control
Control
Control
Control
Children
Layout

58. Comportamiento
var entry = new Entry
{
Placeholder = "Enter text",
Keyboard = Keyboard.Email
};
entry.TextChanged += (sender, e) => {
// Input changed
};
Los controles exponen propiedades para alterar la visualización
Los controles exponen eventos para proporcionar un comportamiento interactivo

60. Migración de
Xamarin.Forms a .NET
MAUI

61. Q&A