blazor create .net code running in the browser10th annual conference about modern it technologies...

10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES

Blazor

Create .NET Code running

in the Browser


Topics

INTRO TO BLAZOR BLAZOR SERVER BLAZOR WEBASSEMBLY


Christian Nagel

• Independent Consultant

• Training

• Coaching

• Coding

• Writing

csharp.christiannagel.com

www.cninnovation.com

@christiannagel

Microsoft MVP


Intro to Blazor


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

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

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


WebAssembly Design Goals

Fast

Safe

Portable

• Near native code performance

• Validated, memory-safe, sandboxed

• Hardware-independent

• Language-independent

• Platform-independent


Use Cases • Image/Video edit

• Games

• Peer-to-peer apps

• Music apps

• CAD apps

• Local web server

• Fat clients

• Language interpreters

• Virtual machines


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


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


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


Demo

• Blazor WASM App

• Mono Runtime

• .NET Assemblies for the client


Runtime

• Mono runtime built with Wasm

• Work-in-progress with .NET Core

• Interpreter

• Work-in-progress JIT, AOT compilers


Blazor Server

• Decouples component rendering logic

• UI updates handled over SignalR connection

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


Demo

• Blazor Server App

• SignalR Communication


SignalR

• Real-time communication

• Using WebSockets if available

• Blazor opens channels from the page and each IFrame


Blazor Components


Razor Components

• Use it from other components

• Like HTML Elements

#ThriveITConf


Demo

• Host

• Startup

• Dependency Injection

• Inject HttpClient

• Layout

• Navigation

• Routing Parameter

• Binding


Dependency Injection

• Framework

• Using Microsoft.Extensions.DependencyInjection

• BlazorWebAssemblyHost

• Registers core services

• @inject

• Inject services into components


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


Share ComponentsBlazor Server & WASM


Demo

• Accessing a database

• Inject DbContext

• Inject custom services


Share Blazor Components Guidelines

• The same components with Blazor Server and Blazor WASM

• Don't inject platform specific dependencies in the component


Blazor Releases

Blazor Server

•Released on 23-Sep-2019

Blazor WASM

•Planned for 2020


.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

https://blazor.net/

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

https://platform.uno/


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


• 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

https://blazor.net/

https://learn-blazor.com/

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

https://csharp.christiannagel.com/

https://github.com/cninnovation/thriveconf


Questions?


THANK YOU


Thank you Sponsors #ThriveITconf

Silver

Evening event sponsor

Material

Media

http://www.racunalniske-novice.com/

blazor create .net code running in the browser10th annual conference about modern it technologies...

Documents