Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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 ❤️

Slide 4

Slide 4 text

4 Hello!

Slide 5

Slide 5 text

5 Microsoft Build After Party 2023

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 Exploring the Multi-Page Apps Implementation by Blazor!

Slide 8

Slide 8 text

8 Multi Page Application and Blazor

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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)

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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?

Slide 17

Slide 17 text

17 Blazor on .NET 8

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

19 Demonstration

Slide 20

Slide 20 text

20 Conclusion

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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