Improve Blazor startup process UX!
Blazor is a powerful framework that allows developers to create a variety of applications using C#, HTML, and CSS 🔥
Some of the applications that can be created with Blazor include:
1- Server-side rendered (SSR) public websites, such as store websites that need to be pre-rendered and SEO friendly.
2- Single-page applications (SPA) such as admin panels.
3- Progressive web apps (PWA) that have the ability to work offline and other cool features.
4- Hybrid apps for Android, iOS, Windows, and macOS that have full access to the native features of the operating system.
The process of how the user sees the first page is different for each of these modes.
In SSR mode, due to pre-rendering, the user will see content immediately, but behind the scenes, the Blazor files are being downloaded (with an approximate size of 2 megabytes in a real-world web app) and Blazor is being initialized. This initialization step can be time-consuming on mid or low-end Android phones, and the site may not switch into interactive mode, such as not being able to open menus or select a date in date pickers. However, if the user visits the website again later, there is no more downloading, but initialization still occurs each time, which is not noticeable on Windows, iOS, and high-end Android phones, but can be visible on mid or low-end Android phones.
If you visit the website https://todo.bitplatform.dev/ for the first time, you will see the content of the site immediately, as it utilizes pre-rendering. A loading indicator will be displayed at the top of the page, indicating the progress of downloading the Blazor files, which may vary based on your internet speed.
However, even after the files have been fully downloaded, the loading indicator may remain for a brief period as the app is being initialized. On subsequent visits to the site, the loading indicator will only be displayed while the Blazor app is being initialized.
In contrast, when visiting a site in SPA mode for the first time, the screen will be white as there is no pre-rendering. The blazor.webassembly.js file must be downloaded and executed to begin the process of downloading the DLL files. Once the download is complete, the initialization process begins.
If you visit https://adminpanel.bitplatform.dev/ for the first time, you will see a loading indicator in the middle of the page until the blazor.webassembly.js is downloaded and executed. Then, a linear progress bar will be displayed, indicating the progress of downloading the DLL files. Once the download is complete, a loading indicator similar to the one previously described will be displayed until the app is initialized.
Additionally, both in SPA and SSR modes, lazy loading can be utilized to improve performance. If a page requires a file that has not yet been downloaded due to lazy loading, the same loading indicator will be displayed.
As you have noted, we prioritize providing clear and accurate progress updates to the end user during the page loading process. Our project templates and Bit BlazorUI components are designed for optimal performance to minimize loading times as much as possible.
In PWA mode, all assets such as png files of all pages are downloaded at the beginning of the app startup, in addition to DLLs, to ensure that the app can run successfully even without an internet connection. When visiting https://todo-app.bitplatform.dev/ for the first time, which is published as a PWA, you will see a loading indicator in the middle of the page until the blazor.webassembly.js is downloaded and executed, and the Service Worker behind the scenes of the PWA takes over the management of tasks. A linear progress bar will then appear, indicating the progress of downloading the files, followed by another loading indicator in the middle of the page, indicating that the Blazor app is being initialized.
On subsequent visits to the site, only the loading will be displayed during initialization.
To evaluate the first-time load UX, open each of these sites in incognito mode (or private tabs) of your browser.
In Hybrid mode, the application is downloaded from platforms such as Google Play, Apple Store, Microsoft Store, etc., and our code does not affect this aspect. However, when the application is opened, the initialization process of .NET MAUI and then Blazor Web View may take a significant amount of time. To mitigate this, a simple Splash Screen is displayed, followed by a common Loading indicator that is used for both initializations, in order to prevent the screen from flickering for the user. You can see this in the published Android application, which is available at https://install.appcenter.ms/orgs/bitfoundation/apps/todo/distribution_groups/tester
The #bitplatform project templates are available as open source on GitHub at https://github.com/bitfoundation/bitplatform/.
With these templates, you can create your own project and with a simple configuration, you can generate SSR, PWA, SPA and Hybrid output in one coding session. To take advantage of the latest improvements, be sure to install the latest pre-release version and create your ideal project with it.
If you have questions, please don’t hesitate to ask for our help.
You can also find more information about our templates at https://bitplatform.dev/todo-template/overview and https://bitplatform.dev/admin-panel/overview.
We wish you the best of luck with your project.
