Blazor is a WebAssembly (Wasm) technology. A WebAssembly is a safe, portable, low-level code format designed for efficient execution and compact representation. These slides are used in my DevDay.be 2018 presentation.

1. http://blazormastermind.azurewebsites.net

2. Speakers
Denis Voituron
• Engineer
• Developer VB3  C#
• Podcaster
• Principal .Net Software Architect

3. Traditional

4. Single Page Application

5. JS

6. JavaScript
• Easy to learn
• The king of the Web
• Dynamic typing
• Insufficient structures
• No POO
• Poorly accepted by pro.

7. Alternatives

8. WebAssembly
• Announced on June 17, 2015
• Supported by the majority of browsers
• Developed by the W3C
• Draft published on 15 February 2018
https://www.w3.org/TR/wasm-core-1
01000
10011
WA WEB
=

9. WebAssembly (wasm)
A safe, portable, low-level code format designed for
efficient execution and compact representation.
http://webassembly.org
Format bas niveau, portable et sûr, conçu pour une exécution efficace et une représentation compacte.

10. WebAssembly (wasm)
A safe, portable, low-level code format designed for
efficient execution and compact representation.
int calc(int a, int b)
{
if (a > 10)
return a * 5;
return a * b;
}
https://mbebenita.github.io/WasmExplorer
http://webassembly.org
Format bas niveau, portable et sûr, conçu pour une exécution efficace et une représentation compacte.

11. Usable ?
WebAssembly or "wasm" is a new portable, size- and load-time-
efficient format suitable for compilation to the web.
Global usage: 80,2% of all users

12. Blazor ?
WA
B azor
v 0.7.0
https://blazor.net

13. Why .NET ?
• Stable, mature, efficient .NET standard, MSBuild, Unit Tests, …
• Fast, scalable .NET Core for Backend Services
• Modern languages Innovations in C#, F#, Razor
• Tools oriented dev Visual Studio, IntelliSense
everything is already there

14. BROWSER
Principles

15. Get started
• Go to https://blazor.net
• Install the .NET Core SDK : https://dot.net
• Install the Blazor CLI
• In Visual Studio, install the Blazor extension
https://marketplace.visualstudio.com/items?itemName=aspnet.blazor
dotnet new -i Microsoft.AspNetCore.Blazor.Templates

16. Let’s GO

17. MasterMind
Computer Choice
Row 1
Row 2
Row 3

18. Demo
1. Component : Razor, Code Behind
2. Binding
3. Parameters
4. Dependency Injection
5. Routing
6. JavaScript Interop
7. Publish
<Counter />
<div value="@City" onchange="@MyMethod" />
<div bind ="@Lastname">
@page "/Contacts/{id:int}"
[Inject]
<NavLink />
JSRuntime.Current.InvokeAsync
dotnet publish
[Parameter]
IUriHelperHttpClient
@page "/Contacts"

19. Server-side Blazor
SignalR

20. Server-side Blazor
• Entire app with C#
• Avoid page refreshes
• App size smaller
• Full server capabilities
• Thin clients
• Latency for every interaction
• No offline support
• Server must manage multiple
connections & states
.NET Core 3.0

21. Blazor
Compiler
.NET Standard (C#) + Razor (HTML)
Components Binding Parameters
Routes Injection Interrop
Single Page Application
WebAssembly

22. http://programmez.devday.be

23. https://blazor.net
https://blazor.net/community.html
https://learn-blazor.com
https://www.slideshare.net/dvoituron
https://blazormastermind.azurewebsites.net
https://github.com/dvoituron/Blazor.Mastermind
@DenisVoituron