The following information is extracted from the book .NET MAUI Cross-Platform Application Development (Second Edition) by Roger Ye
Full stack development
Many people doubt whether it is good, or even possible, to set up a full stack team, but in fact, the earliest web development frameworks were full stack frameworks. If you had a chance to use Java/Thymeleaf or ASP.NET MVC, you will know that they are full stack frameworks. These frameworks use server-side rendering, so the implementation of the UI and business logic are all on the server side.
The separation of frontend and backend came with the emergence of SPAs. To move the UI to the client side, SPA frameworks, such as React, Angular, and Vue.js, are used to implement the client-side logic. Backend services are implemented using frameworks such as Java/Spring and ASP.NET Core.
SPA frameworks use client-side rendering (CSR), while Java/Thymeleaf and ASP.NET MVC use server-side rendering (SSR). Both CSR and SSR have their pros and cons. In modern application development, both CSR and SSR are used by frameworks, as in Next.js and Nuxt.js. In .NET 8, Microsoft introduced server-side Blazor component rendering, or Blazor United. With this feature, the boundary between frontend and backend in ASP.NET has blurred again.
In summary, we should choose technology stacks based on business requirements, so there is not a single, catch-all answer as to whether we should go with full stack development or not. For end users, SPAs are very similar to native applications, and some SPA frameworks have even evolved into cross-platform frameworks, such as React Native. With React and React Native, it is possible to have one team working on both frontend development and native application development. Furthermore, if a JavaScript-based backend framework is chosen, it is possible to set up one cross-platform full stack team to implement the entire solution.
Cross-platform technologies
Cross-platform frameworks are alternative solutions to native application development. Native application development refers to using the programming language and software development kit (SDK) provided by the operating system. In native application development, we use native development tools, such as Swift/UIKit for iOS, Java/Kotlin for Android, and C#/WinUI for Windows. Ideally, we should use the tools provided by the operating system vendor to develop applications for a given operating system. With native application development, we don’t have performance or compatibility issues in our apps. With cross-platform development frameworks, there will always be certain corner cases that cannot be resolved using cross-platform APIs alone. Regardless of whether you are a .NET MAUI, React Native, or Flutter developer, it is necessary to acquire a certain level of native programming knowledge to address these specific cases. For instance, I am currently waiting for the ZXing.Net.Maui project to be ready to support QR code functionality in my application.
However, we usually need to develop our application for multiple operating systems. Native application development incurs much higher costs than cross-platform frameworks. We must strike a balance between budget, time, and quality in a project. Again, we need to choose a solution based on the business requirements. This might mean we need to choose a cross-platform framework.
The most popular cross-platform frameworks on the market include Flutter, React Native, .NET MAUI/Xamarin, Ionic, and Apache Cordova.
.NET MAUI
.NET MAUI is a successor of Xamarin.Forms, which is a part of the larger Xamarin platform. Xamarin itself provides native UI controls as part of the .NET runtime environment on iOS, macOS, and Android. You can develop native applications using C# and Xamarin. On Windows, since .NET is the original framework, .NET is supported by default.
From .NET 6 or above, you have a full .NET runtime available on these four platforms. .NET MAUI is only one of the .NET cross-platform frameworks that uses Xamarin. There are other .NET cross-platform frameworks that use Xamarin, and some of them can support more operating systems than .NET MAUI, such as Uno Platform, Avalonia UI, and Blazor Hybrid.
Since Microsoft introduced the .NET platform, it has evolved from a proprietary software framework for Windows to a cross-platform and open-source platform.
There are many ways to look at the .NET technology stack. Basically, it contains the following components:
- Common infrastructure (compiler and tools suite)
- Base Class Library (BCL)
- Runtime (WinRT or Mono)
.NET MAUI architecture:
.NET MAUI Blazor Apps
Blazor, released in ASP.NET Core 3.0, is a framework for building interactive client-side web UIs with .NET. With .NET MAUI and Blazor, we can build cross-platform apps in the form of Blazor Hybrid apps. In this way, the boundary between native application and web application becomes blurred. .NET MAUI Blazor Hybrid apps enable Blazor components to be integrated with native platform features and UI controls. Blazor components have full access to the native capabilities of the device.
Blazor is a modern web framework developed by Microsoft, allowing developers to create interactive web applications using C# and Razor syntax rather than JavaScript. You might be familiar with JavaScript frameworks like React, Angular, and Vue, among others. Unlike most frontend frameworks, which rely on JavaScript, Blazor utilizes C# as an alternative.
Moreover, Blazor can be employed for developing Blazor Hybrid applications. In a Blazor Hybrid app, Razor components function natively on the device through an embedded Web View control, which enables the app to access device features, just like a native app would.
As mentioned above, Blazor is a framework designed to build web applications utilizing HTML, CSS, and C#. When developing web applications with Blazor in ASP.NET Core, you have two options to consider: Blazor Server and Blazor WebAssembly (Wasm). Furthermore, .NET MAUI enables the use of Blazor to create native applications, introducing a third variant – the Blazor Hybrid app.
In web application development, tasks typically involve creating a frontend UI and a backend service. Backend services can be accessed through RESTful APIs or remote procedure calls (RPCs). UI components, comprised of HTML, CSS, and JavaScript, are loaded in a browser and displayed as web pages. In the ASP.NET Core architecture, components related to user interaction can be rendered on the server. This hosting model is known as Blazor Server. Alternatively, we can execute most of the UI components within the browser, which is referred to as the Blazor Wasm hosting model.
In some instances, applications may require access to device-specific features, such as sensors or cameras; to accommodate these requirements, developers usually create native applications. However, Blazor offers an additional solution – the Blazor Hybrid app.
Blazor is a web framework designed for building web UI components, commonly referred to as Razor components, which can be hosted through various methods. These components can operate on the server side within ASP.NET Core (Blazor Server) or client side inside a web browser (Blazor Wasm).
Furthermore, Razor components can be implemented in native mobile and desktop applications by rendering them within an embedded Web View control (Blazor Hybrid). Despite the differences in hosting models, the process of building Razor components remains consistent. Consequently, the same Razor components can be utilized across all hosting models without any modification.
Blazor Wasm
Blazor Wasm is a hosting model that renders Razor components within a web browser.
In the browser, the startup page loads the .NET environment and Razor components. These Razor components are compiled to Wasm through a .NET Intermediate Language (IL) interpreter at runtime, which manages DOM changes. This process is commonly known as just-in-time (JIT) compilation. With JIT, the compilation takes place at runtime, which results in slower performance compared to ahead-of-time (AOT) compilation. Blazor Wasm apps can be compiled AOT to Wasm to improve runtime performance but at the expense of a much larger download size.
Server-Side Rendering (SSR)
Client-Side Rendering (CSR)
Blazor Hybrid
We can also utilize Blazor as the UI layer for desktop or mobile native frameworks, which are referred to as Blazor Hybrid applications. In such an app, Razor components are natively rendered on the device using an integrated WebView control. Wasm is not involved, so the application possesses the same capabilities as a native app.
The key components of Mobile Blazor Bindings are:
- .NET Runtime: Since .NET 5, we have a common BCL on all support platforms.
- Blazor: Blazor allows running .NET Standard compatible code in the browser using Wasm. It also provides a way to define UI components using Razor files (.razor).
- .NET MAUI: .NET MAUI is a framework for building native UIs for iOS, macOS, Android, and Windows from a single, shared code base.
- BlazorBindings.Maui: This is the NuGet package published by Oleksandr Liakhevych. This package provides the basic Blazor Bindings functionality.