10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Blazor

Create .NET Code running

in the Browser

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Topics

INTRO TO BLAZOR BLAZOR SERVER BLAZOR WEBASSEMBLY

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Christian Nagel

• Independent Consultant

• Training

• Coaching

• Coding

• Writing

csharp.christiannagel.com

www.cninnovation.com

@christiannagel

Microsoft MVP

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Intro to Blazor

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

What is WebAssembly?

• WASM Bytecode

• Sandboxed environment

• Part of the Open Web Platform

• https://www.w3.org/TR/wasm-core-1/

• https://caniuse.com/#search=webassembly

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

WebAssembly Design Goals

Fast

Safe

Portable

• Near native code performance

• Validated, memory-safe, sandboxed

• Hardware-independent

• Language-independent

• Platform-independent

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Use Cases • Image/Video edit

• Games

• Peer-to-peer apps

• Music apps

• CAD apps

• Local web server

• Fat clients

• Language interpreters

• Virtual machines

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

What is Razor?

• HTML content mixed with C# Code

• Razor Views

• Views for ASP.NET Core MVC

• Razor Pages

• Simpler technology compared to MVC

• Inline code or code-behind

• Razor Components

• Self-contained chunks of user interfaces

• Pages, dialogs, forms

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

What is Blazor?

• Razor Pages with extensions

• Razor Components

• Blazor Server

• Razor components on the Server

• Blazor WebAssembly

• .NET runtime created with WASM

• IL code running in the client

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Blazor WebAssembly

• .NET Runtime using WASM Code

• C# and Razor compiled to .NET assemblies

• Unused code stripped out

• .NET runtime and assemblies cached in the browser

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Demo

• Blazor WASM App

• Mono Runtime

• .NET Assemblies for the client

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Runtime

• Mono runtime built with Wasm

• Work-in-progress with .NET Core

• Interpreter

• Work-in-progress JIT, AOT compilers

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Blazor Server

• Decouples component rendering logic

• UI updates handled over SignalR connection

• Runtime handles sending UI events from the browser to the server

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Demo

• Blazor Server App

• SignalR Communication

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

SignalR

• Real-time communication

• Using WebSockets if available

• Blazor opens channels from the page and each IFrame

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Blazor Components

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Razor Components

• Use it from other components

• Like HTML Elements

#ThriveITConf

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Demo

• Host

• Startup

• Dependency Injection

• Inject HttpClient

• Layout

• Navigation

• Routing Parameter

• Binding

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Dependency Injection

• Framework

• Using Microsoft.Extensions.DependencyInjection

• BlazorWebAssemblyHost

• Registers core services

• @inject

• Inject services into components

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Razor Components

• Blazor UI based on Razor Pages

• Razor Pages are new since .NET Core 2.0

• Razor Components have the .razor file extension

• @page directive for routing

• Layouts derive from BlazorLayoutComponent

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Share ComponentsBlazor Server & WASM

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Demo

• Accessing a database

• Inject DbContext

• Inject custom services

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Share Blazor Components Guidelines

• The same components with Blazor Server and Blazor WASM

• Don't inject platform specific dependencies in the component

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Blazor Releases

Blazor Server

•Released on 23-Sep-2019

Blazor WASM

•Planned for 2020

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

.NET WebAssembly Alternatives

• Blazor

• Browser & Razor

• https://blazor.net

• Ooui

• Xamarin.Forms running in WebAssembly

• https://github.com/praeclarum/Ooui/wiki/Xamarin.Forms-with-Web-Assembly

• Uno Platform

• UWP running in WebAssembly

• https://platform.uno/

#ThriveITConf

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Summary

• WebAssembly opens new possibilities

• WebAssembly is at the start

• Blazor Server allows to host the same components now

• Blazor supports all modern browsers

• Use your existing ASP.NET Core knowledge

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

• Try it out• Blazor Server is released

• .NET Core 3.1 Preview

• Blazor WASM Preview

• https://blazor.net

• https://learn-blazor.com

• https://github.com/aspnet/AspNetCore/tree/master/src/Components

• https://csharp.christiannagel.com

• https://github.com/cninnovation/thriveconf2019

For Action

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Questions?

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

THANK YOU

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Thank you Sponsors #ThriveITconf

Silver

Evening event sponsor

Material

Media