From the course: Creating .NET MAUI Applications with Blazor

UI alternatives - .NET MAUI Tutorial

From the course: Creating .NET MAUI Applications with Blazor

Start my 1-month free trial Buy for my team

UI alternatives

“

- [Instructor] In chapter one, we saw that out of the box, an HTML UI isn't a great mobile UI. It doesn't look native. The default Blazor Hybrid navigation doesn't match what we expect for a mobile app, and in general, we have to do a lot with the HTML to make a nice looking UI. This is once a problem for websites too. However, a large number of UI frameworks emerged to make developing professional looking websites much easier. This also happened for hybrid mobile applications like Cordova when they were new. Cordova is an HTML CSS and JavaScript technology stack, not blazors.net. If we look at this listing, the first three are some of the most popular hybrid mobile HTML frameworks for platforms like Cordova and Capacitor. They are Ionic, Onsen, and Framework 7. All of them support mobile UI styling for HTML hybrid applications, but none of them are Blazor specific. Several years ago, a proof of concept framework that combined Ionic and Blazor was created. It was called Bionic, but it is laying dormant for quite some time so it probably isn't a good choice for an active project. The last framework I listed is called Blazorize. This is an example of what is much more common for a Blazor UI framework. It supports Blazor server and web assembly but not Blazor Hybrid. As such, it is designed to handle desktop and browser UI patterns, not mobile. This is the problem we currently have. There are very few UI frameworks for Blazor and what ones there are are mostly focused on a UI that is appropriate for a website. This is fine if you're okay with a mobile app that looks and behaves like a website. However, even then, most of the current frameworks are focused on Blazor Server or Blazor Web Assembly. Neither will expect apps to have full access to a device underlying API and expect to run with all the restrictions of our browser security sandbox. If we want to use a mobile focused UI framework for HTML and CSS today, we have to look at one that is built for JavaScript instead of C#. They won't work with Blazor's dependency injection or navigation right out of the box. Additionally, hybrid applications have the potential to work completely offline. That means everything that is needed to run an app needs to be included in the app itself. If we want to use Framework seven, Onsen or Ionic with the possibility of being offline, we have to include those libraries in the application bundle. We can't have a script tag that points to an NPM package somewhere. For the purposes of our application, we want it to look and feel like a mobile application. For that, we are going to use the Ionic framework. That means we need to solve how to include the framework code in our package, handle navigation and dependency injection, and finally access non Blazor, Ionic components properties and methods from our C# Code.

Contents