Qu'est-ce que .NET MAUI ? (Android Makers 2022)

.NET MAUI est le nouveau framework multiplateforme de Microsoft. Conçu pour remplacer Xamarin.Forms, il propose une compatibilité Android/iOS/Windows/Mac.

Dans cette présentation d'une vingtaine de minutes, nous verrons en quoi ce framework consiste après avoir décortiqué le "Hello World", puis nous évoquerons ses forces et faiblesses.

Transcript

1. .NET MAUI Mais c'est quoi ce truc ?
2. Android Makers Hello World :) Qui suis-je ? Edouard Marquez Freelance Android & Flutter edouard@marquez.cool @g123k SDK Dart & Smoothie Newsletter Flutter flutter-digest.com Newsletter Android android-croissants.com
3. Android Makers Xamarin 💀 Microsoft et le multi-plateforme
4. Android Makers Xamarin 💀 Microsoft et le multi-plateforme Xamarin Native UI Windows UI Android UI iOS Code commun en C# Xamarin.Forms Code commun en C# UI commune
5. Android Makers Xamarin 💀 Données Statista 2021 La dégringolade de Xamarin
6. .NET MAUI : késako ?
7. .NET Multi-platform App UI
8. .NET Ma OUI “ “
9. Disponible en RC1 12/04/2022
10. Android Makers Introduction Compatibilité .NET MAUI iOS, iPadOS… 10 Android 5.0 (API 21) Windows 10 & 11 macOS 10.13 (via Catalyst) Officiel Communauté Linux Tizen
11. Android Makers Introduction Et on développe avec ? Windows macOS
12. Android Makers Introduction Et on développe avec ? Professional 45 USD/mois PRE Enterprise 250 USD/mois PRE Ligne de commande Gratuite To use .NET MAUI RC1 on Mac, follow the commande line instructions on the wiki. Support for .NET MAUI in Visual Studio 2022 for Mac will ship formally in a future preview. “ “ Community Gratuite PRE
13. Android Makers Introduction Et on développe pour ? Windows Windows Android macOS iOS, iPadOS…
14. Android Makers Introduction Sur Windows, on peut se connecter à un Mac Windows Windows Android macOS iOS, iPadOS…
15. Source : Slack AndroidFR
16. Android Makers Introduction Et on développe pour ? Windows macOS iOS, iPadOS… Android macOS Windows iOS, iPadOS… Android macOS Windows
17. Décortiquons le "Hello World"
18. Android macOS iOS
20. Platforms Android iOS MacCatalyst Windows Resources Fonts Images App.xaml App.xaml.cs MainPage.xaml MainPage.xaml.cs MauiProgram.cs Arborescence d'un projet
21. Platforms Android iOS MacCatalyst Windows Resources Fonts Images App.xaml App.xaml.cs MainPage.xaml MainPage.xaml.cs MauiProgram.cs Arborescence d'un projet Resources AndroidManifest.xml MainActivity.cs MainApplication.cs
22. Platforms Android iOS MacCatalyst Windows Resources Fonts Images App.xaml App.xaml.cs MainPage.xaml MainPage.xaml.cs MauiProgram.cs Arborescence d'un projet Resources AndroidManifest.xml MainActivity.cs MainApplication.cs using Android.App; using Android.Content.PM; using Android.OS; namespace MauiApp1; [Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)] public class MainActivity : MauiAppCompatActivity { } MainActivity.cs
23. Platforms Android iOS MacCatalyst Windows Resources Fonts Images App.xaml App.xaml.cs MainPage.xaml MainPage.xaml.cs MauiProgram.cs Arborescence d'un projet Fonts OpenSans-Regular.ttf OpenSans-Semibold.ttf Images dotnet_bot.svg appicon.svg appiconfg.svg Styles.xaml
24. Platforms Android iOS MacCatalyst Windows Resources Fonts Images App.xaml App.xaml.cs MainPage.xaml MainPage.xaml.cs MauiProgram.cs Arborescence d'un projet Fonts OpenSans-Regular.ttf OpenSans-Semibold.ttf Images dotnet_bot.svg appicon.svg appiconfg.svg Styles.xaml <?xml version="1.0" encoding="UTF-8" ?> <?xaml-comp compile="true" ?> <ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"> <Color x:Key="Primary">#512BD4</Color> <Color x:Key="Light">#DFD8F7</Color> <Color x:Key="Dark">#2B0B98</Color> <Color x:Key="White">White</Color> <Color x:Key="Black">Black</Color> <Color x:Key="LightGray">#E5E5E1</Color> <Color x:Key="MidGray">#969696</Color> <Color x:Key="DarkGray">#505050</Color> <SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource Primary}"/> <SolidColorBrush x:Key="LightBrush" Color="{StaticResource Light}"/> <SolidColorBrush x:Key="DarkBrush" Color="{StaticResource Dark}"/> <SolidColorBrush x:Key="WhiteBrush" Color="{StaticResource White}"/> <SolidColorBrush x:Key="BlackBrush" Color="{StaticResource Black}"/> <SolidColorBrush x:Key="LightGrayBrush" Color="{StaticResource LightGray}"/> <SolidColorBrush x:Key="MidGrayBrush" Color="{StaticResource MidGray}"/> <SolidColorBrush x:Key="DarkGrayBrush" Color="{StaticResource DarkGray}"/> <Color x:Key="Yellow100Accent">#F7B548</Color> <Color x:Key="Yellow200Accent">#FFD590</Color> <Color x:Key="Yellow300Accent">#FFE5B9</Color> <Color x:Key="Cyan100Accent">#28C2D1</Color> <Color x:Key="Cyan200Accent">#7BDDEF</Color> <Color x:Key="Cyan300Accent">#C3F2F4</Color> <Color x:Key="Blue100Accent">#3E8EED</Color> <Color x:Key="Blue200Accent">#72ACF1</Color> <Color x:Key="Blue300Accent">#A7CBF6</Color> <Style TargetType="ActivityIndicator"> <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" /> </Style> <Style TargetType="IndicatorView"> <Setter Property="IndicatorColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}"/> <Setter Property="SelectedIndicatorColor" Value="{AppThemeBinding Light={StaticResource DarkGray}, Dark={StaticResource LightGray}}"/> </Style> <Style TargetType="Border"> Styles.xaml
25. Platforms Android iOS MacCatalyst Windows Resources Fonts Images App.xaml App.xaml.cs MainPage.xaml MainPage.xaml.cs MauiProgram.cs Arborescence d'un projet namespace MauiApp1; public partial class MainPage : ContentPage { int count = 0; public MainPage() { InitializeComponent(); } private async void OnCounterClicked(object sender, EventArgs e) { count++; CounterLabel.Text = $"Current count: {count}"; SemanticScreenReader.Announce(CounterLabel.Text); } } MainPage.xaml.cs
26. <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.MainPage"> <ScrollView> <VerticalStackLayout Spacing="25" Padding="30"> <Label Text="Hello World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center" /> <Label Text="Welcome to .NET Multi-platform App UI" SemanticProperties.HeadingLevel="Level1" SemanticProperties.Description="Welcome to dot net Multi platform App U I" FontSize="18" HorizontalOptions="Center" /> <Label Text="Current count: 0" FontSize="18" FontAttributes="Bold" x:Name="CounterLabel" HorizontalOptions="Center" /> <Button Text="Click me" FontAttributes="Bold" SemanticProperties.Hint="Counts the number of times you click" Clicked="OnCounterClicked" HorizontalOptions="Center" /> <Image Source="dotnet_bot.png" SemanticProperties.Description="Cute dot net bot waving hi to you!" WidthRequest="250" HeightRequest="310" HorizontalOptions="Center" /> </VerticalStackLayout> </ScrollView> </ContentPage>
27. <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.MainPage"> <ScrollView> <VerticalStackLayout Spacing="25" Padding="30"> <Label Text="Hello World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center" /> <Label Text="Welcome to .NET Multi-platform App UI" SemanticProperties.HeadingLevel="Level1" SemanticProperties.Description="Welcome to dot net Multi platform App U I" FontSize="18" HorizontalOptions="Center" /> <Label Text="Current count: 0" FontSize="18" FontAttributes="Bold" x:Name="CounterLabel" HorizontalOptions="Center" /> <Button Text="Click me" FontAttributes="Bold" SemanticProperties.Hint="Counts the number of times you click" Clicked="OnCounterClicked" HorizontalOptions="Center" /> <Image Source="dotnet_bot.png" SemanticProperties.Description="Cute dot net bot waving hi to you!" WidthRequest="250" HeightRequest="310" HorizontalOptions="Center" /> </VerticalStackLayout> </ScrollView> </ContentPage>
28. <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.MainPage"> <ScrollView> <VerticalStackLayout Spacing="25" Padding="30"> <Label Text="Hello World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center" /> <Label Text="Welcome to .NET Multi-platform App UI" SemanticProperties.HeadingLevel="Level1" SemanticProperties.Description="Welcome to dot net Multi platform App U I" FontSize="18" HorizontalOptions="Center" /> <Label Text="Current count: 0" FontSize="18" FontAttributes="Bold" x:Name="CounterLabel" HorizontalOptions="Center" /> <Button Text="Click me" FontAttributes="Bold" SemanticProperties.Hint="Counts the number of times you click" Clicked="OnCounterClicked" HorizontalOptions="Center" /> <Image Source="dotnet_bot.png" SemanticProperties.Description="Cute dot net bot waving hi to you!" WidthRequest="250" HeightRequest="310" HorizontalOptions="Center" /> </VerticalStackLayout> </ScrollView> </ContentPage>
29. <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.MainPage"> <ScrollView> <VerticalStackLayout Spacing="25" Padding="30"> <Label Text="Hello World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center" /> <Label Text="Welcome to .NET Multi-platform App UI" SemanticProperties.HeadingLevel="Level1" SemanticProperties.Description="Welcome to dot net Multi platform App U I" FontSize="18" HorizontalOptions="Center" /> <Label Text="Current count: 0" FontSize="18" FontAttributes="Bold" x:Name="CounterLabel" HorizontalOptions="Center" /> <Button Text="Click me" FontAttributes="Bold" SemanticProperties.Hint="Counts the number of times you click" Clicked="OnCounterClicked" HorizontalOptions="Center" /> <Image Source="dotnet_bot.png" SemanticProperties.Description="Cute dot net bot waving hi to you!" WidthRequest="250" HeightRequest="310" HorizontalOptions="Center" /> </VerticalStackLayout> </ScrollView> </ContentPage>
30. <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.MainPage"> <ScrollView> <VerticalStackLayout Spacing="25" Padding="30"> <Label Text="Hello World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center" /> <Label Text="Welcome to .NET Multi-platform App UI" SemanticProperties.HeadingLevel="Level1" SemanticProperties.Description="Welcome to dot net Multi platform App U I" FontSize="18" HorizontalOptions="Center" /> <Label Text="Current count: 0" FontSize="18" FontAttributes="Bold" x:Name="CounterLabel" HorizontalOptions="Center" /> <Button Text="Click me" FontAttributes="Bold" SemanticProperties.Hint="Counts the number of times you click" Clicked="OnCounterClicked" HorizontalOptions="Center" /> <Image Source="dotnet_bot.png" SemanticProperties.Description="Cute dot net bot waving hi to you!" WidthRequest="250" HeightRequest="310" HorizontalOptions="Center" /> </VerticalStackLayout> </ScrollView> </ContentPage>
31. <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.MainPage"> <ScrollView> <VerticalStackLayout Spacing="25" Padding="30"> <Label Text="Hello World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center" /> <Label Text="Welcome to .NET Multi-platform App UI" SemanticProperties.HeadingLevel="Level1" SemanticProperties.Description="Welcome to dot net Multi platform App U I" FontSize="18" HorizontalOptions="Center" /> <Label Text="Current count: 0" FontSize="18" FontAttributes="Bold" x:Name="CounterLabel" HorizontalOptions="Center" /> <Button Text="Click me" FontAttributes="Bold" SemanticProperties.Hint="Counts the number of times you click" Clicked="OnCounterClicked" HorizontalOptions="Center" /> <Image Source="dotnet_bot.png" SemanticProperties.Description="Cute dot net bot waving hi to you!" WidthRequest="250" HeightRequest="310" HorizontalOptions="Center" /> </VerticalStackLayout> </ScrollView> </ContentPage>
32. Platforms Android iOS MacCatalyst Windows Resources Fonts Images App.xaml App.xaml.cs MainPage.xaml MainPage.xaml.cs MauiProgram.cs Arborescence d'un projet namespace MauiApp1; { count++; CounterLabel.Text = $"Current count: {count}"; SemanticScreenReader.Announce(CounterLabel.Text); }
33. Et comment gère-t-on le multiplateforme ?
34. <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.MainPage"> <ScrollView> <VerticalStackLayout Spacing="25" Padding="30"> <Label Text="Hello World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center" /> <Label Text="Welcome to .NET Multi-platform App UI" SemanticProperties.HeadingLevel="Level1" SemanticProperties.Description="Welcome to dot net Multi platform App U I" FontSize="18" HorizontalOptions="Center" /> <Label Text="Current count: 0" FontSize="18" FontAttributes="Bold" x:Name="CounterLabel" HorizontalOptions="Center" /> <Button Text="Click me" FontAttributes="Bold" SemanticProperties.Hint="Counts the number of times you click" Clicked="OnCounterClicked" HorizontalOptions="Center" /> <Image Source="dotnet_bot.png" SemanticProperties.Description="Cute dot net bot waving hi to you!" WidthRequest="250" HeightRequest="310" HorizontalOptions="Center" /> </VerticalStackLayout> </ScrollView> </ContentPage>
35. <Label Text="Hello World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center" TextColor="Red" /> <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.MainPage"> <ScrollView> <VerticalStackLayout Spacing="25" Padding="30"> <Label Text="Hello World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center" /> <Label Text="Welcome to .NET Multi-platform App UI" SemanticProperties.HeadingLevel="Level1" SemanticProperties.Description="Welcome to dot net Multi platform App U I" FontSize="18" HorizontalOptions="Center" /> <Label Text="Current count: 0" FontSize="18" FontAttributes="Bold" x:Name="CounterLabel" HorizontalOptions="Center" /> <Button Text="Click me" FontAttributes="Bold" SemanticProperties.Hint="Counts the number of times you click" Clicked="OnCounterClicked" HorizontalOptions="Center" /> <Image Source="dotnet_bot.png" SemanticProperties.Description="Cute dot net bot waving hi to you!" WidthRequest="250" HeightRequest="310" HorizontalOptions="Center" /> </VerticalStackLayout> </ScrollView> </ContentPage> <Label Text="Hello World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center"> <Label.TextColor> Red </Label.TextColor> </Label>
36. <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MauiApp1.MainPage"> <ScrollView> <VerticalStackLayout Spacing="25" Padding="30"> <Label Text="Hello World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center"> <Label.TextColor> <OnPlatform x:TypeArguments="Color"> <On Platform="Android" Value="Orange" /> <On Platform="iOS" Value="Blue" /> </OnPlatform> </Label.TextColor> </Label> <Label Text="Welcome to .NET Multi-platform App UI" SemanticProperties.HeadingLevel="Level1" SemanticProperties.Description="Welcome to dot net Multi platform App U I" FontSize="18" HorizontalOptions="Center" /> <Label Text="Current count: 0" FontSize="18" FontAttributes="Bold" x:Name="CounterLabel" HorizontalOptions="Center" /> <Button Text="Click me" FontAttributes="Bold" SemanticProperties.Hint="Counts the number of times you click" Clicked="OnCounterClicked" HorizontalOptions="Center" />
37. namespace MauiApp1; public partial class MainPage : ContentPage { int count = 0; public MainPage() { InitializeComponent(); } private async void OnCounterClicked(object sender, EventArgs e) { count++; CounterLabel.Text = $"Current count: {count}"; #if ANDROID // TODO Android #elif IOS // TODO iOS #elif WINDOWS // TODO Windows #endif SemanticScreenReader.Announce(CounterLabel.Text); } } MainPage.xaml.cs
38. Comment ça marche ?
39. Android Makers Comment ça marche ? Code de l'application .NET MAUI .NET Android .NET iOS .NET Mac WinUI 3 .NET 6 Base Class Library Runtime Mono Win32 Android iOS Mac Windows
40. Android Makers Comment ça marche ? Button Microsoft.Maui.Controls IButton Microsoft.Maui ButtonHandler Microsoft.Maui.Handlers ButtonHandler Microsoft.Maui.Handlers ButtonHandler Microsoft.Maui.Handlers AppCompatButton AndroidX.AppCompat.Widget UIButton UIKit UIButton UIKit Button Microsoft.UI.Xaml.Controls
41. Le Hot Reload
42. Android Makers Le Hot Reload Le Hot Reload 🔥 Sur les vues Fichiers XAML Sur le code Fichiers C# Disponible sur :
44. Et sur le web ?
45. Android Makers Et sur le web ? Mes attentes Code Dart / Flutter Dessine sur un canvas Android/iOS/Windows/Mac/Linux Génère du "HTML" Navigateurs
46. Android Makers Et sur le web ? Blazor : le framework de Microsoft
48. <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:b="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Comp xmlns:local="clr-namespace:MauiApp2" x:Class="MauiApp2.MainPage" BackgroundColor="{DynamicResource PageBackgroundColor}"> <b:BlazorWebView HostPage="wwwroot/index.html"> <b:BlazorWebView.RootComponents> <b:RootComponent Selector="#app" ComponentType="{x:Type local:Main}" /> </b:BlazorWebView.RootComponents> </b:BlazorWebView> </ContentPage>
49. <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:b="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Comp xmlns:local="clr-namespace:MauiApp2" x:Class="MauiApp2.MainPage" BackgroundColor="{DynamicResource PageBackgroundColor}"> <b:BlazorWebView HostPage="wwwroot/index.html"> <b:BlazorWebView.RootComponents> <b:RootComponent Selector="#app" ComponentType="{x:Type local:Main}" /> </b:BlazorWebView.RootComponents> </b:BlazorWebView> </ContentPage>
50. Tient-il la comparaison ?
51. Android Makers Comparaison .NET MAUI Flutter React Native Popularité 14,9k ⭐ 139k ⭐ 102k ⭐ Languages C# et XAML Dart Javascript Etat Release Candidate Stable Stable Licence MIT 3 BSD MIT Statistiques 
 (Google Play*) 0 % 
 (Xamarin 1,89%) 2,96 % 4,66 % *Données AppBrain
52. Android Makers Comparaison .NET MAUI Flutter React Native Composants graphiques Natifs Dessinés sur un Canvas Natifs Hot Reload Oui 
 (quand ça marche) Oui Oui Support Android Oui 
 (natif) Oui 
 (natif) Oui Support iOS Oui 
 (natif) Oui 
 (natif) Oui Support Windows Oui 
 (natif) Oui 
 (natif) Oui (non-officiel) Support Mac Oui 
 (natif) Oui (natif), 
 mais bêta Oui (non-officiel) Support Linux Non Oui (natif), 
 mais bêta Non Support Web Hybride via Blazor Oui Oui (non-officiel)
53. Et maintenant ?
54. N'y a-t-il que des Labels et des Buttons ? “ “ Non, "tous" les Controls sont déjà faits. Et il existe même des composants graphiques payants ! Aujourd'hui, .NET MAUI…
55. Pour qui ? “ “ Pour les développeurs de l'écosystème .NET/C# Ou les anciens Xamarin Aujourd'hui, .NET MAUI…
56. Aujourd'hui, .NET MAUI… Peut-on commencer à l'utiliser ? “ “ Projet "entreprise", non Projet "perso", oui
57. Aujourd'hui, .NET MAUI… Par où commencer ? “ “ Workshop sur GitHub dotnet-presentations/dotnet-maui-workshop
58. Est-ce que ça vaut l'investissement ? “ “ Di ffi cile à prédire 🔮 Mais en arrivant après tout le monde, ce ne sera pas simple Aujourd'hui, .NET MAUI…
59. Vous souvenez-vous ce que veut dire MAUI ? “ “ Aujourd'hui, .NET MAUI… Multipla tf orm App UI
60. Merci ! Questions ? Edouard Marquez Freelance Android & Flutter edouard@marquez.cool @g123k Newsletter Flutter flutter-digest.com Newsletter Android Android -croissants.com