Modernizing Web Apps with .NET 6.pptx
Download as PPTX, PDF0 likes74 views
This document provides an overview of ASP.NET Core and Blazor frameworks. It discusses the differences between ASP.NET and ASP.NET Core, benefits of ASP.NET Core like cross-platform support and modern frontend frameworks. It also summarizes Razor Pages, MVC, and Blazor - the different UI frameworks in ASP.NET Core. Blazor allows building client-side web apps using C# and runs using WebAssembly or as server-rendered apps. The document demonstrates how Blazor works and compares client-side versus server-side Blazor. It also includes a demo of building hybrid mobile/desktop apps with Blazor and .NET Multi-platform App UI.
Modernizing Web Apps with .NET 6.pptx
- 1. Ed Charbeneau Modernizing Web Applications with .NET 6
- 2. 2 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. ASP.NET vs. ASP.NET Core Full-Framework ASP.NET Core • Windows only • Matured • Supported .NET v. 4.6.2 – 4.8+ • Cross Platform & OSS • Performant • Dependency Injection built-in • Configuration improvements • Improved Middleware Pipeline • Modern Front-End Frameworks • Rapid Release Cycle
- 3. 3 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. ASP.NET Core benefits: • A unified story for building web UI and web APIs. • Architected for testability. • Razor Pages makes coding page- focused scenarios easier and more productive. • Blazor lets you use C# in the browser alongside JavaScript. Share server- side and client-side app logic all written with .NET.
- 4. 4 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. ASP.NET Core benefits: (cont.) • Ability to develop and run on Windows, macOS, and Linux. • Open-source and community- focused. • Integration of modern, client-side frameworks and development workflows. • Support for hosting Remote Procedure Call (RPC) services using gRPC.
- 5. 5 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. ASP.NET MVC -> ASP.NET Core MVC • .NET Upgrade Assistant ⚠️ • Expect Breaking Changes ⚠️ • App Startup ⚠️ • App Settings ⚠️ • Static File hosting ⚠️ • Dependency Injection ⚠️ • Routing ⚠️
- 6. 6 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. ASP.NET MVC -> ASP.NET Core MVC • HtmlHelpers are generally unchanged ✅ • HTML ✅ • CSS ✅ • JavaScript ✅
- 7. 7 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. ASP.NET vs. ASP.NET Core: UI Full-Framework ASP.NET Core • WebForms • MVC 5.2 • MVC • Razor Pages • Blazor
- 8. 8 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. MVC (Model-View-Controller) • Clear separation of responsibilities • Testable • Flexible • Server Rendered views, JavaScript for interactivity
- 9. 9 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. MVC (Model-View-Controller) • Razor lets you render a page/component using C# • @ syntax • Rendered on the server • Client-side logic is JavaScript (typically jQuery) • Html Helpers / TagHelpers / Razor Components
- 10. 10 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Razor Pages • ASP.NET without the fuss of MVC • Feature focused • MVVM like • Server Rendered views, JavaScript for interactivity
- 11. 11 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Razor Pages • Razor lets you render a page/component using C# • @ syntax • Rendered on the server • Client-side logic is JavaScript (typically jQuery) • Html Helpers / TagHelpers / Razor Components
- 12. 12 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Blazor Wasm (WebAssembly) • .NET in the Browser • Web Standards • Rendered Client-Side • Single Page Application (SPA) • Much like Angular/React but using C# • Low Learning Curve for .NET Developers • Great transition from WebForms or Silverlight
- 13. 13 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Blazor Server • Same framework as Blazor Wasm ( minus WebAssembly ) • Rendered Server-Side, instead of Client • .NET on the server, thin client on the browser • Great for LOB apps
- 14. 14 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Blazor • Razor Components / RenderTree • @ syntax • Rendered on the client • UI logic is C# instead of JS
- 15. 15 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. ASP.NET in .NET Core: Component Models Framework Component Models MVC HtmlHelpers, TagHelpers, Razor Components* Razor Pages HtmlHelpers, TagHelpers, Razor Components* Blazor Razor Components *Requires Blazor dependencies
- 16. Blazor Deep Dive
- 17. 17 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Blazor is a new .NET web framework using C# and HTML that runs in the browser. What is Blazor Browser + Razor = Blazor
- 18. 18 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Just the FAQs What it IS What it is NOT • Client-side C# • Web Standard Technologies • WebAssembly • .NET Standard • A Plugin • ASP.NET WebForms • Trans-piled JavaScript
- 19. 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
- 20. 20 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. blazorREPL.Telerik.com • Write / Run / Share / Embed • Live in the browser • No install • No account required • Completely FREE
- 21. 21 © 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
- 22. 22 © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. HowClient-SideWorks https://... Engine Compiler Byte Code DOM Parser Foo.js
- 23. 23 © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. HowClient-SideWorks https://... DOM Engine Parser Compiler Byte Code Foo.wasm Parser Compiler
- 24. 24 © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. HowClient-SideWorks https://... DOM Engine mono.wasm .NET Runtime
- 25. 25 © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. HowClient-SideWorks https://... DOM .NET Runtime .NET Application App.dll
- 26. 26 © 2020 ProgressSoftware Corporation and/or its subsidiaries or affiliates. All rights reserved. https... HowServer-SideWorks ASP.NET Core .NET Runtime SignalR Blazor.server.js DOM
- 27. 27 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Let’s Compare Client-Side Server-Side • Low-no server overhead • RESTful • Offline & PWA capable • Larger payload size • Disconnected Environment • Performance • Tiny Payload Size • Less Abstraction • Pre-Rendering • Connection Required • Server Resources
- 28. Blazor Demo
- 29. 29 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. Hybrid apps with .NET & Blazor Native desktop app Web view Native mobile app Web view .NET .NET Blazor Blazor
- 30. 30 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 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
- 31. 31 © 2022 Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved. 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 7+) 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
Editor's Notes
- #9: This delineation of responsibilities helps you scale the application in terms of complexity because it's easier to code, debug, and test something (model, view, or controller) that has a single job.
- #20: 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
- #22: 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.
- #23: In a typical application JavaScript is downloaded by the browser It is then parsed, compiled, and turned into byte code before it can execute.
- #24: 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.
- #25: Microsoft has taken the .NET runtime and compiled as web assembly. This makes it possible to run .NET code directly in the browser.
- #26: 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.
- #27: If we choose to host Blazor on the server