SlideShare a Scribd company logo
Ed Charbeneau, Developer
Advocate
Ed.Charbeneau@progress.com
Build your first full-stack
Blazor app
Ed Charbeneau
Author:
Pr. Developer Advocate
Progress Software,
Telerik UI for Blazor
“Blazor:A Beginner's Guide” (free)
Тwitter: @EdCharbeneau
Тwitch: Twitch.tv/EdCharbeneau
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Today’s Agenda






© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
ASP.NET vs. ASP.NET Core
•
•
•
•
•
•
•
•
•
•
•
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
ASP.NET Core in .NET 5
•
•
•
•
•
•
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Blazor in .NET 5.0
🔥
•
•
•
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
.NET Schedule
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Blazor in Detail
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
•
•
•
•
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
What is Blazor
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Just the FAQs
What it IS
•
•
•
•
•
•
•
What it is NOT
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Key Differences
•
•
•
•
•
•
© 2019 Progress Software 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
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
What is WebAssembly(WASM)
© 2020 Progress 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
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
How Client-Side Works
https://...
Engine
Compiler
Byte Code
DOM
Parser
Foo.js
© 2020 Progress 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
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
How Client-Side Works
https://...
DOM
Engine
mono.wasm
.NET Runtime
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
How Client-Side Works
https://...
DOM
.NET Runtime
.NET Application
App.dll
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
https...
How Server-Side Works
ASP.NET Core
.NET Runtime
SignalR
DOM
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Let’s Compare
Client-Side
•
•
•
•
•
•
•
•
•
•
•
Server-Side
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Telerik UI for Blazor
Nativecomponents Basethemes JavaScriptpayload
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Demos
Components Telerik UIs Full Stack Q/A
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Line of Business Demo
Thank you!
• Joe Mello, 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
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Extended Q/A
Blazor Desktop & MAUI
Hybrid apps
Native desktop app
Web view
Native mobile app
Web view
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
Hybrid apps with .NET & Blazor
Native desktop app
Web view
Native mobile app
Web view
.NET
.NET
Blazor
Blazor
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
Demo:
Blazor hybrid apps
Cross-platform, native UI
Single project 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
Reuse UI components across 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
Summary
• Build full stack 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!
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Blazor Wasm (WebAssembly)
•
•
•
•
•
•
•
•
© 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.
Blazor Server
•
•
•
•
•

More Related Content

PPTX
PPTX
PDF
Blazor web apps
PPTX
Blazor - An Introduction
PDF
jQuery for beginners
PPTX
Welcome to Blazor
PPTX
Building Web Apps with WebAssembly and Blazor
PPTX
.Net Core
Blazor web apps
Blazor - An Introduction
jQuery for beginners
Welcome to Blazor
Building Web Apps with WebAssembly and Blazor
.Net Core

What's hot (20)

PPTX
Spring Framework
PPTX
Introduction to spring boot
PPTX
Front-End Web Development
PDF
Dot Net Core
PDF
Build responsive applications with google flutter
PDF
Modern Web Development
PPT
How to install android sdk
PPT
PPT
ASP.NET MVC Presentation
PPTX
React Native
PDF
introduction to Vue.js 3
PDF
PPTX
PDF
The Hack Spectrum: Tips, Tricks, and Hacks for Unity
PPTX
PDF
Introduction to ASP.NET Core
PPTX
Angular tutorial
PDF
Git workflows
PPTX
Html5 and-css3-overview
Spring Framework
Introduction to spring boot
Front-End Web Development
Dot Net Core
Build responsive applications with google flutter
Modern Web Development
How to install android sdk
ASP.NET MVC Presentation
React Native
introduction to Vue.js 3
The Hack Spectrum: Tips, Tricks, and Hacks for Unity
Introduction to ASP.NET Core
Angular tutorial
Git workflows
Html5 and-css3-overview
Ad

Similar to Blazor Full-Stack (20)

PPTX
Modernizing Web Apps with .NET 6.pptx
PPTX
Modernizing Web Apps with .NET 6.pptx
PPTX
Goodbye JavaScript Hello Blazor
PDF
Node.js Tools Ecosystem
PDF
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
PDF
Everything about flutter web development
PDF
【BS1】What’s new in visual studio 2022 and c# 10
PPTX
Native App + Wep App = ? (Hybrid Applications)
PDF
20201012 - Serverless Architecture Conference - Deploying serverless applicat...
KEY
Getting Started with .NET
PDF
Enterprise DevOps Series: Using VS Code & Zowe
PPTX
Testdroid:
PPTX
SharePoint 2013 App Provisioning Models
PPTX
Flutter for web
PPTX
Development mobile app cross device
PPTX
Cross platform-mobile-applications
PPT
Web Platform Installer
PPT
Web Platform Installer Announcement
PPTX
Cross platform mobile apps using rhomobile and jquery mobile
PPTX
Phonegap android angualr material design
Modernizing Web Apps with .NET 6.pptx
Modernizing Web Apps with .NET 6.pptx
Goodbye JavaScript Hello Blazor
Node.js Tools Ecosystem
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Everything about flutter web development
【BS1】What’s new in visual studio 2022 and c# 10
Native App + Wep App = ? (Hybrid Applications)
20201012 - Serverless Architecture Conference - Deploying serverless applicat...
Getting Started with .NET
Enterprise DevOps Series: Using VS Code & Zowe
Testdroid:
SharePoint 2013 App Provisioning Models
Flutter for web
Development mobile app cross device
Cross platform-mobile-applications
Web Platform Installer
Web Platform Installer Announcement
Cross platform mobile apps using rhomobile and jquery mobile
Phonegap android angualr material design
Ad

More from Ed Charbeneau (16)

PPTX
Writing JavaScript for C# Blazor.pptx
PPTX
Blazor Stability Testing Tools for Bullet Proof Applications
PPTX
Secrets of a Blazor Component Artisan (v2)
PPTX
Secrets of a Blazor Component Artisan
PPTX
Writing java script for Csharp's Blazor
PPTX
Razor into the Razor'verse
PPTX
Giving Clarity to LINQ Queries by Extending Expressions R2
PPTX
The future of .NET lightning talk
PPTX
Into the next dimension
PPTX
Giving Clarity to LINQ Queries by Extending Expressions
PPTX
What is new in Q2 2015
PPTX
TelerikNEXT What's new in UI for ASP.NET AJAX
PPTX
Journey to JavaScript (from C#)
PPTX
Refactoring css
PPTX
Don't be a stereotype: Rapid Prototype
PPTX
A crash course in responsive design
Writing JavaScript for C# Blazor.pptx
Blazor Stability Testing Tools for Bullet Proof Applications
Secrets of a Blazor Component Artisan (v2)
Secrets of a Blazor Component Artisan
Writing java script for Csharp's Blazor
Razor into the Razor'verse
Giving Clarity to LINQ Queries by Extending Expressions R2
The future of .NET lightning talk
Into the next dimension
Giving Clarity to LINQ Queries by Extending Expressions
What is new in Q2 2015
TelerikNEXT What's new in UI for ASP.NET AJAX
Journey to JavaScript (from C#)
Refactoring css
Don't be a stereotype: Rapid Prototype
A crash course in responsive design

Recently uploaded (20)

PDF
Spectral efficient network and resource selection model in 5G networks
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Approach and Philosophy of On baking technology
PPTX
Big Data Technologies - Introduction.pptx
PPT
Teaching material agriculture food technology
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Machine learning based COVID-19 study performance prediction
PDF
Review of recent advances in non-invasive hemoglobin estimation
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
PDF
Network Security Unit 5.pdf for BCA BBA.
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Electronic commerce courselecture one. Pdf
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
cuic standard and advanced reporting.pdf
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Spectral efficient network and resource selection model in 5G networks
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Unlocking AI with Model Context Protocol (MCP)
Approach and Philosophy of On baking technology
Big Data Technologies - Introduction.pptx
Teaching material agriculture food technology
MYSQL Presentation for SQL database connectivity
Machine learning based COVID-19 study performance prediction
Review of recent advances in non-invasive hemoglobin estimation
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
Network Security Unit 5.pdf for BCA BBA.
“AI and Expert System Decision Support & Business Intelligence Systems”
Electronic commerce courselecture one. Pdf
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
cuic standard and advanced reporting.pdf
Dropbox Q2 2025 Financial Results & Investor Presentation
Diabetes mellitus diagnosis method based random forest with bat algorithm
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Reach Out and Touch Someone: Haptics and Empathic Computing

Blazor Full-Stack

  • 2. Ed Charbeneau Author: Pr. Developer Advocate Progress Software, Telerik UI for Blazor “Blazor:A Beginner's Guide” (free) Тwitter: @EdCharbeneau Тwitch: Twitch.tv/EdCharbeneau
  • 3. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Today’s Agenda      
  • 4. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. ASP.NET vs. ASP.NET Core • • • • • • • • • • •
  • 5. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. ASP.NET Core in .NET 5 • • • • • •
  • 6. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Blazor in .NET 5.0 🔥 • • •
  • 7. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. .NET Schedule
  • 8. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Blazor in Detail
  • 9. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. • • • •
  • 10. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. What is Blazor
  • 11. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Just the FAQs What it IS • • • • • • • What it is NOT
  • 12. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Key Differences • • • • • •
  • 13. © 2019 Progress Software 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 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. What is WebAssembly(WASM)
  • 15. © 2020 Progress 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
  • 16. © 2020 Progress Software 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 Progress 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
  • 18. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. How Client-Side Works https://... DOM Engine mono.wasm .NET Runtime
  • 19. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. How Client-Side Works https://... DOM .NET Runtime .NET Application App.dll
  • 20. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. https... How Server-Side Works ASP.NET Core .NET Runtime SignalR DOM
  • 21. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Let’s Compare Client-Side • • • • • • • • • • • Server-Side
  • 22. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Telerik UI for Blazor Nativecomponents Basethemes JavaScriptpayload
  • 23. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Demos Components Telerik UIs Full Stack Q/A
  • 24. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Line of Business Demo
  • 25. Thank you! • Joe Mello, Account Executive [email protected] • Ed Charbeneau, Developer Advocate [email protected] • Maria Veledinova, Program Manager [email protected] • Marin Bratanov, Support Engineer [email protected]
  • 26. © 2020 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Extended Q/A Blazor Desktop & MAUI
  • 27. Hybrid apps Native desktop app 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
  • 32. Cross-platform, native UI Single project 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 components across 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 full stack 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 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Blazor Wasm (WebAssembly) • • • • • • • •
  • 36. © 2020 Progress Software 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.