1 Evolution of Blazor in .NET 8 Exploring the Multi-Page Apps Implementation by Blazor!

2 Hello! I’m Jun-ichi Sakamoto S p e a k e r • Working at INFRAGISTICS • Microsoft MVP Award holder for over 10 years • Passionate about sharing Blazor knowledge • Living in Sapporo, Hokkaido, Japan • Working on presentation skills in English “Learn, Practice, Share.” @jsakamoto

3 BlazorWasmPreRendering.Build Blazing Story Blazor Gamepad Blazor i18n Text Find Razor Source File Awesome Blazor Browser My OSS products have been introduced in many technical sessions and channels ❤️

4 Hello!

5 Microsoft Build After Party 2023

6 Timeline May 16th May 23-25th Jun 22nd .NET 8 Preview 4 Microsoft Build 2023 Build After Party 2023 Wellington Jan 25th “.NET United” YouTube Video Nov ? .NET 8 Release

7 Exploring the Multi-Page Apps Implementation by Blazor!

8 Multi Page Application and Blazor

9 Multi-Page Application MVC Razor Pages Web Browser Web Application Server ASP.NET Core HTTP GET, POST, … > HTML REQUEST RESPONSE

10 MPAs scenario I m a g i n e Please imagine creating a website that is almost static, not so interactive, just have a simple form.

11 Blazor WebAssembly apps are large W e a k P o i n t s React Blazor 6.1M (2.77sec) 0.4M (0.25sec) Comparing the content size of the React app and the Blazor app. ▪ The Blazor app was generated from the default project template of the .NET 7 SDK. ▪ The React app was made to have the same looks and features as that Blazor app. (*When the download speed is 32Mbit/s)

12 Blazor Server apps are weak for unstable connections W e a k P o i n t s Blazor Server apps require a constant connection. ▪ The “Attempting to reconnect..." white wall will cover the entire browser window and block all user operations when the connection between the server and the browser is lost, even if it is temporary. ▪ It might be a problem if users access the site from an unstable internet connection area.

13 Blazor Server apps consume server resources W e a k P o i n t s Blazor server apps will keep memory usage to keep each app's state on the server side. ▪ Even if users have opened the site and have been left from the screen. ▪ It will be slightly, but it does.

14 Weak points of Blazor Fast Initial Loading Robust for Connection No Consuming Server Resources Blazor Server Blazor WebAssembly Blazor Server and WebAssembly are not so suitable for web apps that are almost static and not so interactive.

15 Multi Page Application architecture is still needed A S P . N E T C o r e M V C a n d R a z o r P a g e s Multi Page Application architectures, such as "ASP.NET Core MVC" or "Razor Pages", are not good at interactivity. But instead, it doesn't need to keep constant network connections, consume server resources, and load Mega bytes contents. It will work very fast, lightweight, and stable. MVC or Razor Pages Light weight Fast Stable

16 But… it will cause frustration for .NET Web app developers What should I do? ▪ Which technology should I use? ▪ Do we have to learn both Blazor and MVC? ▪ Our customer requests to improve the site we built on ASP.NET Core MVC to be more dynamic and interactive. What can I do?

17 Blazor on .NET 8

18 Happy News! .NET 8 will allow us to make MPAs by Blazor! N e x t g e n e r a t i o n It not only provides server-side rendering, but we can also handle form posting by Blazor way! You can still use the same code of the services or data access layers of ASP.NET Core MVC or Razor Pages app as you have done.

19 Demonstration

20 Conclusion

21 Every type of web apps can be written by Blazor! Blazor on .NET 8 Offline Supported PWA Rich Interactive & Fast Loading SPA Fast & Stable & Lightweight MPA

22 @jsakamoto Learn, Practice, Share. Thank you!