Introduction to Maui

class: title, smokescreen, shelf, no-footer
background-image: url(/assets/images/presentations/introduction-to-maui-2021/intro.png)
# Introduction to Maui

## Programmez! DevCon \#11

---
class: col-2

# About me

![John Thiriet Picture](/assets/images/bio-photo.jpg)

@johnthiriet

Mobile lead engineer @ Edenred

- Specialized in mobile development *(iOS, Android and Windows)* and .NET
- 12 years of professional experience
- Former Microsoft MVP and Xamarin MVP
- Public Speaker (Techdays, Microsoft Experiences, Xamarin Day, Meetups...)
- Press and online Writer

---
class: col-2

# About my employer

![Edenred Logo](/assets/images/presentations/edenred.png)

**Enrich connections. For good.**

- 10000 employees in 46 countries
- \> 850000 corporate clients
- \> 50 million users
- \> 2 million partner merchants
- Close to 30 billion euros in business volume of which is 86 % of which is digital
- \> 2,5 billion transaction managed in 2020

---
class: col-2

# Agenda

Microsoft has been talking about .NET 6 and the Xamarin.Forms rework into .NET Maui (for Multiplatform App UI) for about a year now.

In this presentation we will do a quick recap of what is Xamarin, explain what Maui means and launch our first Maui application.

1. Xamarin
3. .NET Maui
3. Demo
4. Conclusion

???

A cause de la pandémie il a fallu attendre un peu plus qu'escompté pour pouvoir jouer avec et d'après les dernières nouvelles il faudra attendre le second trimestre 2022 pour avoir Maui en GA.

---
class: title, fogscreen, no-footer
background-image: url(/assets/images/presentations/xamarin-from-2020-to-2021/monkey-debug.jpg)

# Xamarin and .NET 6

---
# Xamarin ecosystem

.NET is a developer platform made up of tools, programming languages, and libraries for building many different types of applications.

Xamarin extends the .NET developer platform with tools and libraries specifically for building apps for Android, iOS, tvOS, watchOS, macOS, and Windows.

There are two approaches to Android development with Xamarin:
- Xamarin.Android
- Xamarin.Forms

---
# Demystifying an urban legend

Xamarin is an additional layer on top of the native platform, a native application will always be lighter than a Xamarin one.
Fortunately, the "cost" of Xamarin in terms of weight is **far from being 20-25MB**.

A few key points here:
- Xamarin Native and Xamarin.Forms do not have the same impact
- Both still rely on native Android tooling for weight management of the native side of things
- Xamarin also has its own tooling for the .NET side of things
- Developers often have little knowledge of this tooling

---
class: title, fogscreen, no-footer
background-image: url(/assets/images/presentations/xamarin-from-2020-to-2021/maui.jpeg)

# .NET Maui

---
# Introducing .NET Multiplatform App UI

- Cross-platform, native UI
- Single project, single codebase
- Deploy to multiple devices, mobile and desktop
- Evolution of Xamarin.Forms
- Targeting .NET 6

[https://github.com/dotnet/maui](https://github.com/dotnet/maui)

---
# How does .NET MAUI works

![Maui architecture](/assets/images/presentations/introduction-to-maui-2021/architecture.png# w-50pct db fl mr-4)

- Android apps compiled into IL then JITted into native assembly
- iOS apps fully AOTed into native ARM assembly
- macOS apps uses Mac Catalyst which brings UIKit to desktop
- Windows apps uses WinUI 3 that can target both desktop and UWP

--
1. Developers mostly interact with Maui

--
1. But they can access native code too

--
1. As .NET Maui does

---
class: compact
# What does .NET MAUI provide?

- Collection of controls that can be used to display data, initiate actions, indicate activity, display collections, pick data, and more.

--
- An elaborate layout engine.

--
- Multiple page types for creating rich navigation types, like drawers.

--
- Support for data-binding.

--
- The ability to customize handlers to enhance the way in which UI elements are presented.

--
- Essential cross-platform APIs for accessing native device features.

--
- A cross-platform graphics library.

--
- A single project system that uses multi-targeting to target Android, iOS, macOS, and Windows.

--
- .NET hot reload, so that you can modify both your XAML and your managed source code while the app is running.

---
# .NET MAUI essentials

Access to native device features is made thanks to a cross-platform API that includes:

- Sensors like accelerometer, gyroscope, compass...
- Connectivity state and changes
- Device information
- Clipboard
- Secure storage
- Text-to-speech
- Browser-based authentication

---
class: img-left
# .NET MAUI Single project

![Maui single project](/assets/images/presentations/introduction-to-maui-2021/single-project.png)
- One project that targets multiple platforms and devices
- One location to manage resources like fonts and images
- Multi-targeting to organize platform-specific code

---
# Hot reload

## .NET hot reload
- Modify your managed source code while the app is running.
- Code edits can be applied to your running app without recompilation.

## Xaml hot reload
- Save your Xaml files and see the changes reflected in your running app without recompilation.
- Navigation state and data will be maintained.
- Quickly iterate on your UI without losing your place in the app.

---
class: title, fogscreen, no-footer
background-image: url(/assets/images/presentations/xamarin-from-2020-to-2021/visual-studio.jpg)

# Demo

---
class: title, fogscreen, no-footer
background-image: url(/assets/images/presentations/introduction-to-maui-2021/conclusion.jpg)

# Wrapping up

---
# .NET Multi-platform app UI

Xamarin.Forms 5.0 will be the last major version of Xamarin.Forms.

New major features and developments will now be in .NET MAUI and the Xamarin Community Toolkit.

- Cross-platform, native UI
- Single project, single codebase
- Deploy to multiple devices, mobile & desktop
- Evolution of Xamarin.Forms
- Targeting .NET

[https://github.com/dotnet/maui](https://github.com/dotnet/maui)

---
class: compact
# MAUI modern app patterns

MVVM

```xml
<StackLayout>
  <Label Text="Welcome to .NET MAUI!" />
  <Button Text="{Binding Text}" Command="{Binding ClickCommand}" />
</StackLayout>
```

MVU

```csharp
readonly State<int> count = 0;

[Body]
  View body() => new StackLayout
  {
      new Label("Welcome to .NET MAUI!"),
      new Button(() => $"You clicked {count} times.", () => count.Value ++))
  };
```

---
class: roomy img-right
# Finally

![Questions ?](/assets/images/presentations/introduction-to-maui-2021/questions.jpg)

- Visual Studio Code and CLI supported
- Support of Android, iOS, macOS, Windows and even Blazor
- .NET and Xaml hot reload
- Expected in Q2 2022

**The best is yet to come !**

---
# Slides

.qrcode.db.fr.w-40pct.ml-4[]

Slides are available on [john's blog](/presentations/).

Scan the QrCode for direct access.

@johnthiriet
- [Twitter](https://twitter.com/JohnThiriet)
- [LinkedIn](https://linkedin.com/in/JohnThiriet)

---
class: title, smokescreen, shelf, no-footer
background-image: url(/assets/images/presentations/introduction-to-maui-2021/outro.png)