$30 off During Our Annual Pro Sale. View Details »

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

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.

Edouard Marquez

April 25, 2022
Tweet

More Decks by Edouard Marquez

Other Decks in Programming

Transcript

  1. .NET MAUI
    Mais c'est quoi ce truc ?

    View Slide

  2. Android Makers Hello World :)
    Qui suis-je ?
    Edouard Marquez
    Freelance Android & Flutter
    [email protected]
    @g123k
    SDK Dart & Smoothie
    Newsletter Flutter

    flutter-digest.com
    Newsletter Android

    android-croissants.com

    View Slide

  3. Android Makers Xamarin 💀
    Microsoft et le multi-plateforme

    View Slide

  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

    View Slide

  5. Android Makers Xamarin 💀
    Données Statista 2021
    La dégringolade de Xamarin

    View Slide

  6. .NET MAUI : késako ?

    View Slide

  7. .NET

    Multi-platform

    App

    UI

    View Slide

  8. .NET


    Ma OUI


    View Slide

  9. Disponible en RC1

    12/04/2022

    View Slide

  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

    View Slide

  11. Android Makers Introduction
    Et on développe avec ?
    Windows macOS

    View Slide

  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

    View Slide

  13. Android Makers Introduction
    Et on développe pour ?
    Windows
    Windows
    Android
    macOS
    iOS, iPadOS…

    View Slide

  14. Android Makers Introduction
    Sur Windows, on peut se connecter à un Mac
    Windows
    Windows
    Android
    macOS
    iOS, iPadOS…

    View Slide

  15. Source : Slack AndroidFR

    View Slide

  16. Android Makers Introduction
    Et on développe pour ?
    Windows macOS
    iOS, iPadOS…
    Android
    macOS
    Windows
    iOS, iPadOS…
    Android
    macOS
    Windows

    View Slide

  17. Décortiquons le "Hello World"

    View Slide

  18. Android macOS iOS

    View Slide

  19. View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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








    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"


    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">


    #512BD4


    #DFD8F7


    #2B0B98


    White


    Black


    #E5E5E1


    #969696


    #505050


























    #F7B548


    #FFD590


    #FFE5B9


    #28C2D1


    #7BDDEF


    #C3F2F4


    #3E8EED


    #72ACF1


    #A7CBF6


    <br/><br/><br/><Setter Property="Color" Value="{AppThemeBinding Light={StaticResource<br/>Primary}, Dark={StaticResource White}}" /><br/><br/><br/>


    <br/><br/><br/><Setter Property="IndicatorColor" Value="{AppThemeBinding<br/>Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}"/><br/><br/><br/><Setter Property="SelectedIndicatorColor" Value="{AppThemeBinding<br/>Light={StaticResource DarkGray}, Dark={StaticResource LightGray}}"/><br/><br/><br/>


    <br/><br/><br/>Styles.xaml<br/>

    View Slide

  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

    View Slide






  26. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"


    x:Class="MauiApp1.MainPage">










    Text="Hello World!"


    SemanticProperties.HeadingLevel="Level1"


    FontSize="32"


    HorizontalOptions="Center" />




    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" />




    Text="Current count: 0"


    FontSize="18"


    FontAttributes="Bold"


    x:Name="CounterLabel"


    HorizontalOptions="Center" />




    Text="Click me"


    FontAttributes="Bold"


    SemanticProperties.Hint="Counts the number of times you click"


    Clicked="OnCounterClicked"


    HorizontalOptions="Center" />




    Source="dotnet_bot.png"


    SemanticProperties.Description="Cute dot net bot waving hi to you!"


    WidthRequest="250"


    HeightRequest="310"


    HorizontalOptions="Center" />











    View Slide






  27. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"


    x:Class="MauiApp1.MainPage">










    Text="Hello World!"


    SemanticProperties.HeadingLevel="Level1"


    FontSize="32"


    HorizontalOptions="Center" />




    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" />




    Text="Current count: 0"


    FontSize="18"


    FontAttributes="Bold"


    x:Name="CounterLabel"


    HorizontalOptions="Center" />




    Text="Click me"


    FontAttributes="Bold"


    SemanticProperties.Hint="Counts the number of times you click"


    Clicked="OnCounterClicked"


    HorizontalOptions="Center" />




    Source="dotnet_bot.png"


    SemanticProperties.Description="Cute dot net bot waving hi to you!"


    WidthRequest="250"


    HeightRequest="310"


    HorizontalOptions="Center" />











    View Slide






  28. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"


    x:Class="MauiApp1.MainPage">










    Text="Hello World!"


    SemanticProperties.HeadingLevel="Level1"


    FontSize="32"


    HorizontalOptions="Center" />




    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" />




    Text="Current count: 0"


    FontSize="18"


    FontAttributes="Bold"


    x:Name="CounterLabel"


    HorizontalOptions="Center" />




    Text="Click me"


    FontAttributes="Bold"


    SemanticProperties.Hint="Counts the number of times you click"


    Clicked="OnCounterClicked"


    HorizontalOptions="Center" />




    Source="dotnet_bot.png"


    SemanticProperties.Description="Cute dot net bot waving hi to you!"


    WidthRequest="250"


    HeightRequest="310"


    HorizontalOptions="Center" />











    View Slide






  29. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"


    x:Class="MauiApp1.MainPage">










    Text="Hello World!"


    SemanticProperties.HeadingLevel="Level1"


    FontSize="32"


    HorizontalOptions="Center" />




    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" />




    Text="Current count: 0"


    FontSize="18"


    FontAttributes="Bold"


    x:Name="CounterLabel"


    HorizontalOptions="Center" />




    Text="Click me"


    FontAttributes="Bold"


    SemanticProperties.Hint="Counts the number of times you click"


    Clicked="OnCounterClicked"


    HorizontalOptions="Center" />




    Source="dotnet_bot.png"


    SemanticProperties.Description="Cute dot net bot waving hi to you!"


    WidthRequest="250"


    HeightRequest="310"


    HorizontalOptions="Center" />











    View Slide






  30. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"


    x:Class="MauiApp1.MainPage">










    Text="Hello World!"


    SemanticProperties.HeadingLevel="Level1"


    FontSize="32"


    HorizontalOptions="Center" />




    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" />




    Text="Current count: 0"


    FontSize="18"


    FontAttributes="Bold"


    x:Name="CounterLabel"


    HorizontalOptions="Center" />




    Text="Click me"


    FontAttributes="Bold"


    SemanticProperties.Hint="Counts the number of times you click"


    Clicked="OnCounterClicked"


    HorizontalOptions="Center" />




    Source="dotnet_bot.png"


    SemanticProperties.Description="Cute dot net bot waving hi to you!"


    WidthRequest="250"


    HeightRequest="310"


    HorizontalOptions="Center" />











    View Slide






  31. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"


    x:Class="MauiApp1.MainPage">










    Text="Hello World!"


    SemanticProperties.HeadingLevel="Level1"


    FontSize="32"


    HorizontalOptions="Center" />




    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" />




    Text="Current count: 0"


    FontSize="18"


    FontAttributes="Bold"


    x:Name="CounterLabel"


    HorizontalOptions="Center" />




    Text="Click me"


    FontAttributes="Bold"


    SemanticProperties.Hint="Counts the number of times you click"


    Clicked="OnCounterClicked"


    HorizontalOptions="Center" />




    Source="dotnet_bot.png"


    SemanticProperties.Description="Cute dot net bot waving hi to you!"


    WidthRequest="250"


    HeightRequest="310"


    HorizontalOptions="Center" />











    View Slide

  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);


    }


    View Slide

  33. Et comment gère-t-on le multiplateforme ?

    View Slide






  34. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"


    x:Class="MauiApp1.MainPage">










    Text="Hello World!"


    SemanticProperties.HeadingLevel="Level1"


    FontSize="32"


    HorizontalOptions="Center" />




    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" />




    Text="Current count: 0"


    FontSize="18"


    FontAttributes="Bold"


    x:Name="CounterLabel"


    HorizontalOptions="Center" />




    Text="Click me"


    FontAttributes="Bold"


    SemanticProperties.Hint="Counts the number of times you click"


    Clicked="OnCounterClicked"


    HorizontalOptions="Center" />




    Source="dotnet_bot.png"


    SemanticProperties.Description="Cute dot net bot waving hi to you!"


    WidthRequest="250"


    HeightRequest="310"


    HorizontalOptions="Center" />











    View Slide



  35. Text="Hello World!"


    SemanticProperties.HeadingLevel="Level1"


    FontSize="32"


    HorizontalOptions="Center"


    TextColor="Red" />





    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"


    x:Class="MauiApp1.MainPage">










    Text="Hello World!"


    SemanticProperties.HeadingLevel="Level1"


    FontSize="32"


    HorizontalOptions="Center" />




    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" />




    Text="Current count: 0"


    FontSize="18"


    FontAttributes="Bold"


    x:Name="CounterLabel"


    HorizontalOptions="Center" />




    Text="Click me"


    FontAttributes="Bold"


    SemanticProperties.Hint="Counts the number of times you click"


    Clicked="OnCounterClicked"


    HorizontalOptions="Center" />




    Source="dotnet_bot.png"


    SemanticProperties.Description="Cute dot net bot waving hi to you!"


    WidthRequest="250"


    HeightRequest="310"


    HorizontalOptions="Center" />













    Text="Hello World!"


    SemanticProperties.HeadingLevel="Level1"


    FontSize="32"


    HorizontalOptions="Center">





    Red






    View Slide






  36. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"


    x:Class="MauiApp1.MainPage">










    Text="Hello World!"


    SemanticProperties.HeadingLevel="Level1"


    FontSize="32"


    HorizontalOptions="Center">

























    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" />




    Text="Current count: 0"


    FontSize="18"


    FontAttributes="Bold"


    x:Name="CounterLabel"


    HorizontalOptions="Center" />




    Text="Click me"


    FontAttributes="Bold"


    SemanticProperties.Hint="Counts the number of times you click"


    Clicked="OnCounterClicked"


    HorizontalOptions="Center" />




    View Slide

  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

    View Slide

  38. Comment ça marche ?

    View Slide

  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

    View Slide

  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

    View Slide

  41. Le Hot Reload

    View Slide

  42. Android Makers Le Hot Reload
    Le Hot Reload 🔥
    Sur les vues

    Fichiers XAML
    Sur le code

    Fichiers C#
    Disponible sur :

    View Slide

  43. View Slide

  44. Et sur le web ?

    View Slide

  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

    View Slide

  46. Android Makers Et sur le web ?
    Blazor : le framework de Microsoft

    View Slide

  47. View Slide






  48. 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}">




















    View Slide






  49. 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}">




















    View Slide

  50. Tient-il la comparaison ?

    View Slide

  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

    View Slide

  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)

    View Slide

  53. Et maintenant ?

    View Slide

  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…

    View Slide

  55. Pour qui ?


    Pour les développeurs de
    l'écosystème .NET/C#

    Ou les anciens Xamarin
    Aujourd'hui, .NET MAUI…

    View Slide

  56. Aujourd'hui, .NET MAUI…
    Peut-on commencer à l'utiliser ?


    Projet "entreprise", non

    Projet "perso", oui

    View Slide

  57. Aujourd'hui, .NET MAUI…
    Par où commencer ?


    Workshop sur GitHub

    dotnet-presentations/dotnet-maui-workshop

    View Slide

  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…

    View Slide

  59. Vous souvenez-vous ce


    que veut dire MAUI ?


    Aujourd'hui, .NET MAUI…
    Multipla
    tf
    orm App UI

    View Slide

  60. Merci !


    Questions ?
    Edouard Marquez
    Freelance Android & Flutter [email protected]
    @g123k
    Newsletter Flutter

    flutter-digest.com
    Newsletter Android

    Android -croissants.com

    View Slide