Goodbye JavaScript, Hello Blazor

For .NET developers, writing client side C# has always been a pipe dream. With the introduction of Blazor this all changes. Blazor is a .NET web framework that runs in any browser. Blazor uses the latest in web standards, WebAssembly. This means no plugins, transpilation, or JavaScript are needed.

In this session we’ll explore what Blazor means for web development and learn about how this experiment at Microsoft is shaping up. Blazor runs in the browser on a real .NET runtime (Mono) implemented in WebAssembly that executes normal .NET assemblies.

Transcript

1. Beer City Code @EdCharbeneau #Blazor
2. Ed Charbeneau Developer Advocate for Progress<Telerik> Author<T> Podcast => “Eat Sleep” Twitter.Where(user == @EdCharbeneau)
3. Hello Blazor
6. What if… @EdCharbeneau #Blazor
7. Client-side Web Was C#? @EdCharbeneau #Blazor
8. Previous Attempts • WebForms • Silverlight
9. C#/Razor + HTML Blazor is an experimental .NET web framework using C# and HTML that runs in the browser. Browser + Razor = Blazor
10. Just the FAQs What it is • Client Side C# • Web Standard Technologies • WebAssembly • .NET Standard • Experimental What it’s NOT • A Plugin • ASP.NET WebForms • Trans-piled JavaScript
11. Key Differences Blazor • .NET Standard Libs • MS Build • C# JavaScript • NPM Packages • WebPack • TypeScript / JavaScript
12. @EdCharbeneau #WASM
13. WebAssembly (wasm) WebAssembly is a web standard that defines an assembly-like format for executable code in Web pages. It’s what makes Blazor possible.
14. JavaScript JavaScript (.js) Parser Compiler JIT Interpreter Native Web APIs (DOM, file storage, etc) HTML (.html) Inline JS JavaScript Runtime Browser
15. WebAssembly JavaScript (.js) Parser Compiler JIT Interpreter Native Web APIs (DOM, file storage, etc) HTML (.html) Inline JS JavaScript Runtime Browser WebAssembly (.wasm)
16. WebAssembly JavaScript (.js) Parser Compiler JIT Interpreter Native Web APIs (DOM, file storage, etc) HTML (.html) Inline JS JavaScript Runtime Browser WebAssembly (.wasm) C++ RUST Go .NET
17. Blazor Apps Parser Compiler JIT Interpreter Native Web APIs (DOM, file storage, etc) JavaScript Runtime Browser blazor.js mono.wasm Blazor Page (.cshtml) mono.js netstandard.dll app.dll Interop layer
18. Blazor Framework Features • Virtual DOM • Components (MVVM like) – Data Binding – Event Handling • Layouts • Dependency Injection • Routing • JavaScript/C# Interop (bi-directional)
19. Components <h1>@headingText</h1> @functions { private string headingText = “Hello World"; }
20. Routing @page "/RouteParameter" @page "/RouteParameter/{text}" <h1>Blazor is @Text!</h1>
21. Dependency Injection @inject HttpClient Http @functions { WeatherForecast[] forecasts; protected override async Task OnInitAsync() { forecasts = await Http.GetJsonAsync<WeatherForecast[]>(uri); } }
22. @EdCharbeneau #Blazor
23. Prerequisites • .NET Core 2.1 SDK (2.1.300 or later). • Visual Studio 2017 15.7 • Blazor Language Services extension from the Visual Studio Marketplace.
24. File > New Project • Blazor • Blazor (ASP.NET Core Hosted)
25. Demo Time @EdCharbeneau #Blazor
26. Ed Charbeneau
27. Ed Charbeneau Developer Advocate for Progress<Telerik> Author<T> Podcast => “Eat Sleep Code” Twitter.Where(user == @EdCharbeneau)
28. Resources • Articles – edweb.me/4k (by Dave Glick) – edcharbeneau.com/BlazeDown/ • Blazor – Blazor.net • Telerik – www.Telerik.com • Twitter – @EdCharbeneau