Upload
others
View
19
Download
0
Embed Size (px)
Citation preview
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