Download to read offline
Uploaded byEd Charbeneau
Blazor Full-Stack
The document outlines a presentation on building full-stack Blazor applications, covering ASP.NET and ASP.NET Core, and the differences between Blazor server and client-side Blazor using WebAssembly. It highlights advanced topics such as Blazor hybrid apps, combining native and web UI, and the upcoming support for cross-platform applications in .NET 6. The presentation is led by Ed Charbeneau, a Developer Advocate at Progress Software, and includes information about available resources and demos.
Blazor Full-Stack
- 1. Ed Charbeneau, Developer Advocate Ed.Charbeneau@progress.com Buildyour first full-stack Blazor app
- 2. Ed Charbeneau Author: Pr. DeveloperAdvocate Progress Software, Telerik UI for Blazor “Blazor:A Beginner's Guide” (free) Тwitter: @EdCharbeneau Тwitch: Twitch.tv/EdCharbeneau
- 3. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. Today’s Agenda
- 4. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. ASP.NET vs. ASP.NET Core • • • • • • • • • • •
- 5. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. ASP.NET Core in .NET 5 • • • • • •
- 6. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. Blazor in .NET 5.0 🔥 • • •
- 7. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. .NET Schedule
- 8. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. Blazor in Detail
- 9. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. • • • •
- 10. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. What is Blazor
- 11. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. Just the FAQs What it IS • • • • • • • What it is NOT
- 12. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. Key Differences • • • • • •
- 13. © 2019 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. PUBLISHING COMPONENT MODEL FORMS & VALIDATION DEPENDENCY INJECTION AUTO REBUILD UNIT TESTING JAVASCRIPT INTEROP SERVER-SIDE RENDERING DEBUGGING INTELLISENSE & TOOLING LAYOUTS ASSEMBLY TRIMMING COMPONENT PACKAGES ROUTING Blazor
- 14. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. What is WebAssembly(WASM)
- 15. © 2020 ProgressSoftware 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
- 16. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. How Client-Side Works https://... Engine Compiler Byte Code DOM Parser Foo.js
- 17. © 2020 ProgressSoftware 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
- 18. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. How Client-Side Works https://... DOM Engine mono.wasm .NET Runtime
- 19. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. How Client-Side Works https://... DOM .NET Runtime .NET Application App.dll
- 20. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. https... How Server-Side Works ASP.NET Core .NET Runtime SignalR DOM
- 21. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. Let’s Compare Client-Side • • • • • • • • • • • Server-Side
- 22. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. Telerik UI for Blazor Nativecomponents Basethemes JavaScriptpayload
- 23. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. Demos Components Telerik UIs Full Stack Q/A
- 24. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. Line of Business Demo
- 25. Thank you! • JoeMello, Account Executive mello@progress.com • Ed Charbeneau, Developer Advocate Ed.Charbeneau@progress.com • Maria Veledinova, Program Manager Maria.Veledinova@progress.com • Marin Bratanov, Support Engineer Marin.Bratanov@progress.com
- 26. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. Extended Q/A Blazor Desktop & MAUI
- 27. Hybrid apps Native desktopapp Web view Native mobile app Web view
- 28. Hybrid app benefits •Reuse existing web development skills and code • Access to all the native capabilities of the device • Mix native & web UI • Reduce app development time
- 29. Hybrid apps with.NET & Blazor Native desktop app Web view Native mobile app Web view .NET .NET Blazor Blazor
- 30. Mobile Blazor Bindings •Blazor components run natively • Rendered to a web view through a local interop channel • Access native functionality directly through .NET APIs • Mix native and web UI • Currently experimental https://aka.ms/mobile-blazor-bindings
- 31.
- 32. Cross-platform, native UI Singleproject system, single codebase Deploy to multiple devices, mobile & desktop General availability in .NET 6 .NET Multi-platform App UI .NET 6 .NET Multi-platform App UI github.com/dotnet/maui WinUI Mac Catalyst Android iOS iOS macOS
- 33. Reuse UI componentsacross native & web Mix & match web and native UI Directly access native device functionality Cross-platform mobile & desktop apps (primary focus on desktop for .NET 6) Blazor hybrid apps with .NET Multi-platform App UI .NET Multi-platform App UI WinUI Mac Catalyst Android iOS iOS macOS github.com/dotnet/maui Blazor
- 34. Summary • Build fullstack web apps with ASP.NET Core & Blazor • Get the best of native & the web with hybrid apps • Support for cross-platform hybrid apps coming in .NET 6 with .NET Multi-platform App UI & Blazor • Previews coming soon!
- 35. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. Blazor Wasm (WebAssembly) • • • • • • • •
- 36. © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. Blazor Server • • • • •
Editor's Notes
- #2 “In this session we’ll talk about the evolving ASP.NET platform and what’s new with .NET 5, as well as what’s coming with .NET 6. Modern ASP.NET applications will take advantage of .NET full-stack using Microsoft’s Blazor framework. We’ll discuss how the new framework coupled with Telerik UI for Blazor cut development time and boost productivity.”
- #14 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
- #16 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.
- #17 In a typical application JavaScript is downloaded by the browser It is then parsed, compiled, and turned into byte code before it can execute.
- #18 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.
- #19 Microsoft has taken the .NET runtime and compiled as web assembly. This makes it possible to run .NET code directly in the browser.
- #20 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.
- #21 If we choose to host Blazor on the server
- #23 New Components Four Gauge Components – Circular, Linear, Radial, Arc ColorPalette Component ( will be followed by ColorPicker in September) MediaQuery - not an UI component, but used for making other UI components and layout responsive New Features Grid New Features: Hide columns on small device Fit column width to content Built-in validation for inline and incell edit modes TreeList (similar to the Grid features) Fit column width to content Built-in validation for inline and incell edit modes Editor Enhancements Highlighting with color - background and text Copy & Paste of images Paste cleanup options Window Enhancements: Stacking Windows Predefined Dialogs – Alert, Prompt, Confirm Form Enhancements: Form Disabled Fields
- #33 We’re making progress on .NET Multi-platform App UI that we announced almost a year ago at Build 2020. It will help you deliver performant, beautiful and consistent app experiences across various platforms and devices, and allow you to share code across your mobile and desktop apps. .NET MAUI under the hood uses technologies out there today for building native apps on Windows with WinUI, Mac Catalyst for macOS, and of course, iOS and Android. .NET MAUI abstracts all those frameworks into a single framework built on .NET 6. <CLICK> That means it will allow you to build these apps for any device from a single codebase and project system. <CLICK> And that includes desktop and mobile across operating systems, Windows, macOS, iOS and Android. <CLICK> It will be part of the unified .NET in the .NET 6 timeframe <CLICK> and preview 1 dropped last week so you can go check it out!
- #34 I’m excited to announce .NET Multi-platform App UI, or just .NET MAUI. <CLICK> It is a cross-platform, native UI stack so you’ll get great performance on any device. <CLICK> It will allow you to build these apps for any device from a single codebase and project system <CLICK> And that includes desktop and mobile across operating systems, like Windows, MacOS, iOS and Android. <CLICK> This is the evolution of Xamarin technology, building on Xamarin.Forms and expanding that to cross-platform desktop scenarios. <CLICK> It will be part of the unified .NET in the .NET 6 timeframe with previews available end of this year. You’ll see us working on it in the open on GitHub.