Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies...
Transcript of Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies...
![Page 1: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/1.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Blazor
Create .NET Code running
in the Browser
![Page 2: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/2.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Topics
INTRO TO BLAZOR BLAZOR SERVER BLAZOR WEBASSEMBLY
![Page 3: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/3.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Christian Nagel
• Independent Consultant
• Training
• Coaching
• Coding
• Writing
csharp.christiannagel.com
www.cninnovation.com
@christiannagel
Microsoft MVP
![Page 4: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/4.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Intro to Blazor
![Page 5: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/5.jpg)
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
![Page 6: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/6.jpg)
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
![Page 7: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/7.jpg)
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
![Page 8: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/8.jpg)
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
![Page 9: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/9.jpg)
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
![Page 10: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/10.jpg)
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
![Page 11: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/11.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Demo
• Blazor WASM App
• Mono Runtime
• .NET Assemblies for the client
![Page 12: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/12.jpg)
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
![Page 13: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/13.jpg)
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
![Page 14: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/14.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Demo
• Blazor Server App
• SignalR Communication
![Page 15: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/15.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
SignalR
• Real-time communication
• Using WebSockets if available
• Blazor opens channels from the page and each IFrame
![Page 16: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/16.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Blazor Components
![Page 17: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/17.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Razor Components
• Use it from other components
• Like HTML Elements
#ThriveITConf
![Page 18: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/18.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Demo
• Host
• Startup
• Dependency Injection
• Inject HttpClient
• Layout
• Navigation
• Routing Parameter
• Binding
![Page 19: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/19.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Dependency Injection
• Framework
• Using Microsoft.Extensions.DependencyInjection
• BlazorWebAssemblyHost
• Registers core services
• @inject
• Inject services into components
![Page 20: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/20.jpg)
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
![Page 21: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/21.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Share ComponentsBlazor Server & WASM
![Page 22: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/22.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Demo
• Accessing a database
• Inject DbContext
• Inject custom services
![Page 23: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/23.jpg)
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
![Page 24: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/24.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Blazor Releases
Blazor Server
•Released on 23-Sep-2019
Blazor WASM
•Planned for 2020
![Page 25: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/25.jpg)
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
![Page 26: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/26.jpg)
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
![Page 27: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/27.jpg)
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
![Page 28: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/28.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Questions?
![Page 29: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/29.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
THANK YOU
![Page 30: Blazor Create .NET Code running in the Browser10th annual conference about modern it technologies topics intro to blazor blazor server blazor webassembly](https://reader035.fdocuments.us/reader035/viewer/2022062317/5f02c3677e708231d405e416/html5/thumbnails/30.jpg)
10TH ANNUAL CONFERENCE ABOUT MODERN IT TECHNOLOGIES
Thank you Sponsors #ThriveITconf
Silver
Evening event sponsor
Material
Media