Downloaded 24 times
![Dependency Injection @inject HttpClient Http @code { WeatherForecast[] forecasts; protected override async Task OnInititalizedAsync() { forecasts = await Http.GetJsonAsync<WeatherForecast[]>(uri); } }](https://image.slidesharecdn.com/blazor-191122162936/75/Goodbye-JavaScript-Hello-Blazor-22-2048.jpg)
Uploaded byEd Charbeneau
Goodbye JavaScript Hello Blazor
Blazor is a new .NET web framework that allows for client-side programming with C# and HTML, running in the browser using WebAssembly. It contrasts with previous technologies like Web Forms and Silverlight, not requiring plugins or transpiled JavaScript. The document outlines its key features, prerequisites, and future potential, focusing on both client-side and server-side implementations.
Goodbye JavaScript Hello Blazor
- 1.
- 2. Ed Charbeneau Developer Advocatefor Progress<Telerik> Author<T> Twitter.Where(user == @EdCharbeneau)
- 3.
- 4.
- 5.
- 6. Previous Attempts • WebForms •Silverlight
- 7. C#/Razor + HTML Blazoris an new .NET web framework using C# and HTML that runs in the browser. Browser + Razor = Blazor
- 8. Just the FAQs Whatit is • Client Side C# • Web Standard Technologies • WebAssembly • .NET Standard What it’s NOT • A Plugin • ASP.NET WebForms • Trans-piled JavaScript
- 9. Key Differences Blazor • .NETStandard Libs • MS Build • C# JavaScript • NPM Packages • WebPack • TypeScript / JavaScript
- 10.
- 11. WebAssembly (wasm) WebAssembly isa web standard that defines an assembly-like format for executable code in Web pages. It’s what makes Blazor possible.
- 12. © 2019 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. PUBLISHING COMPONENT MODEL FORMS & VALIDATION DEPENDENCY INJECTION AUTO REBUILDUNIT TESTING JAVASCRIPT INTEROP SERVER-SIDE RENDERING DEBUGGING INTELLISENSE & TOOLING LAYOUTS ASSEMBLY TRIMMING COMPONENT PACKAGES ROUTING Blazor
- 13. 13 © 2019Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Blazor: Client & Server https://... DOM Razor Components .NET WebAssembly https... DOM ASP.NET Core SignalR Razor Components .NET
- 14. 14 © 2019Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. How Client-Side Works https://... Engine Compiler Byte Code DOM Parser Foo.js
- 15. 15 © 2019Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. How Client-Side Works https://... DOM Engine Parser Compiler Byte Code Foo.wasm Parser Compiler
- 16. 16 © 2019Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. How Client-Side Works https://... DOM Enginemono.wasm .NET Runtime
- 17. 17 © 2019Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. How Client-Side Works https://... DOM.NET Runtime .NET Application App.dll
- 18. 18 © 2019Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. https... How Server-Side Works ASP.NET Core .NET Runtime SignalR Blazor.server.js DOM
- 19. 19 © 2019Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. At a Glance Client-Side Low-no server overhead RESTful Offline & PWA capable Larger payload size Disconnected Environment Supported May 2020 Server-Side Tiny Payload Size Less Abstraction Pre-Rendering Supported Today Connection Required Server Resources
- 20.
- 21.
- 22. Dependency Injection @inject HttpClientHttp @code { WeatherForecast[] forecasts; protected override async Task OnInititalizedAsync() { forecasts = await Http.GetJsonAsync<WeatherForecast[]>(uri); } }
- 23.
- 24. Prerequisites • .NET Core3.1 Preview Latest • Visual Studio 2019 Preview
- 25. File > NewProject • Blazor WebAssembly • Blazor Server
- 26.
- 27.
- 28. Blazor on thedesktop?
- 29.
- 30.
- 31. Resources • Links – Blogs.Telerik.com –EdCharbeneau.com – Twitch.tv/EdCharbeneau – Blazor.net – codemag.com/Magazine/Issue/netcore3 • Twitter – @EdCharbeneau
- 32. Ed Charbeneau Developer Advocatefor Progress<Telerik> Author<T> Twitter.Where(user == @EdCharbeneau)
- 33.
Editor's Notes
- #7 WebForms tried to be stateful web Silverlight didn’t conform to web standards
- #11 Even if your not a .NET Developer, this is exciting
- #13 Blazor is a fully featured single page application framework by Microsoft It has a huge ecosystem of .NET packages on NuGet because it’s compatible with .NET standard
- #14 Blazor is independent of it’s hosting model This means we have options when hosting host Blazor applications. The most common options are Client-Side, and Server-Side hosting. Let’s discuss the two options starting with Client-Side Blazor.
- #15 In a typical application JavaScript is downloaded by the browser It is then parsed, compiled, and turned into byte code before it can execute.
- #16 A more modern approach is to use WebAssembly, which is a standard byte code browsers can execute. What makes WebAssembly different, is that it is parsed and compiled before it is delivered to the browser. Languages other than JavaScript, such as C++ can compile directly to WebAssembly byte code.
- #17 Microsoft has taken the .NET runtime and compiled as web assembly. This makes it possible to run .NET code directly in the browser.
- #18 This is how Blazor enables developers to write .NET code in a client-side web application. Because the .NET runtime is available on the client, we can utilize virtually any .NET Standard assembly.
- #19 If we choose to host Blazor on the server
- #27 Components - Data Binding - Code Behind - Http External Components BlazeDown
- #34 Components - Data Binding - Code Behind - Http External Components BlazeDown