This document summarizes the evolution of Blazor and Xamarin Forms (now known as Maui) for building mobile, web, and desktop applications with C#. It discusses the differences between Blazor Server and Blazor WebAssembly models, how to create reusable components, access native features via JavaScript interop, and experimental support for building mobile apps using Blazor through Mobile Blazor Bindings. It also provides an overview of upcoming features in .NET 6 to improve the Blazor experience.

1. @cloudgen_verona
#CodeGen2021

2. 2
TOPIC
Mobile Blazor
Bindings and Maui
1 cup of Blazor
2 spoonful of Xamarin Forms (Maui)
1 pinch of JavaScript
And a whole lot of C#

3. @jjcolumbie
jjcolumb
josejaviercolumbie
Jose Javier Columbie
DevExpress and Microsoft MVP

4. Web, Desktop or Mobile?
Web 💖 JS

5. Samsung Tizen , macOS, GTK#, WPF

6. Ooui Web Head
WebAssembly
renderers for
Xamarin.Forms with
Uno Platform
WEB
Evolution of Xamarin Forms

7. Blazor
Interactive web UI with C#

8. Blazor
1. Server
2. Client
3. PWA. Offline support. Home
screen and taskbar. Push
Notifications
4. .Net renders to
Electron/WebView.
5. Mobile

9. Blazor Server vs Blazor
WebAssembly

10. Blazor WebAssembly
1. Runs directly in WA on the client
2. Download everything to the browser,
HTML, CSS, JS, .NET dlls and the .NET
Runtime
3. No server needed
Azure Storage
Static Website

11. Blazor Server
1. ASP.Net Core Server with the Blazor
App,it contains the .NET Core runtime
and the communication with the UI
happens using Signal R.
2. Events to the server and UI updates sent
back to the browser
What is Signal R?

12. Blazor Server

13. Blazor Server

14. Reusable Components
1. Blazor is based on
Reusable Components
(Web Forms
Replacement 🤯)
2. Composition of
Components. Parent
and childs.
3. Razor Libraries
4. Templates

15. Blazor WebAssembly

16. Blazor Server

17. Blazor Components

18. Javascript Interop
A Blazor app can invoke JavaScript functions from .NET methods and
.NET methods from JavaScript functions.

19. PWA - Blazor WebAssembly
App
1. Offline capabilities.
2. Home screen and taskbar.
3. Push Notifications

20. Electron

21. Experimental Mobile Blazor
Bindings

22. Experimental Mobile Blazor
Bindings
1. Blazor - Web
2. Same component (UI) in
mobile and desktop
3. Native Access to the device
4. Hybrid - web and native UI

23. Experimental Mobile Blazor
Bindings

24. Experimental Mobile Blazor
Bindings
DEMO

25. Experimental Mobile Blazor
Bindings
1. Web Content in the same process as the rest
of the app (no web server)
2. No remoting between AppDomains
3. All tooling: Visual Studio
4. Experimental (ControlTemplate)
5. Everywhere Xamarin Forms runs
6. How complete is it?

26. .NET 6 for Blazor
• Hot reload for Blazor
• AOT Compilation
• Target and deploy to desktop platforms.
• Support custom event args in Blazor
• Required parameters to blazor components
• Expose location changing event for
NavigationManger
• Dynamically rendered components
• Update Blazor head components
• Improve SVG support in Blazor
• Drag & Drop
😀😀😀

27. Community

28. Thank you
Any questions?
jjcolumb @jjcolumbie josejaviercolumbie