Blazor vs Flutter: The Difference

What is Blazor?

Blazor is a Single Page Application development framework. The name Blazor is a combination/mutation of the words Browser and Razor (the .NET HTML view generating engine). The implication being that instead of having to execute Razor views on the server in order to present HTML to the browser, Blazor is capable of executing these views on the client.

Features of Blazor:

• Server-side rendering

• A component model for building composable UI

• Routing

• JavaScript interop

• Forms and validation

• Dependency injection

• Layouts

• Publishing and app size trimming

• Rich IntelliSense and tooling

• Live reloading in the browser during development

• Ability to run on older browsers via asm.js, a subset of JavaScript designed to allow software written in languages such as C to be run as web applications

Advantages of Blazor:

• Leverage existing C# skills for full stack development

• Better productivity due to code sharing between client and server applications

• Interoperability with Java Script

• Consistent programming framework across platforms and browsers

Limitations:

• Higher latency usually exists. Every user interaction involves a network hop.

• There's no offline support. If the client connection fails, the app stops working.

• Scaling apps with many users requires server resources to handle multiple client connections and client state.

• An ASP.NET Core server is required to serve the app. Serverless deployment scenarios aren't possible, such as serving the app from a Content Delivery Network (CDN).

What is Flutter?

Flutter – a simple and high performance framework based on Dart language, provides high performance by rendering the UI directly in the operating system’s canvas rather than through native framework.

Flutter also offers many ready to use widgets (UI) to create a modern application. These widgets are optimized for mobile environment and designing the application using widgets is as simple as designing HTML.

Features of Flutter

Flutter framework offers the following features to developers −

• Modern and reactive framework.

• Uses Dart programming language and it is very easy to learn.

• Fast development.

• Beautiful and fluid user interfaces.

• Huge widget catalog.

• Runs same UI for multiple platforms.

• High performance application.

Advantages of Flutter

Flutter comes with beautiful and customizable widgets for high performance and outstanding mobile application. It fulfills all the custom needs and requirements. Besides these, Flutter offers many more advantages as mentioned below −

• Dart has a large repository of software packages which lets you to extend the capabilities of your application.

• Developers need to write just a single code base for both applications (both Android and iOS platforms). Flutter may to be extended to other platform as well in the future.

• Flutter needs lesser testing. Because of its single code base, it is sufficient if we write automated tests once for both the platforms.

• Flutter’s simplicity makes it a good candidate for fast development. Its customization capability and extendibility makes it even more powerful.

• With Flutter, developers has full control over the widgets and its layout.

• Flutter offers great developer tools, with amazing hot reload.

Disadvantages of Flutter

Despite its many advantages, flutter has the following drawbacks in it −

• Since it is coded in Dart language, a developer needs to learn new language (though it is easy to learn).

• Modern framework tries to separate logic and UI as much as possible but, in Flutter, user interface and logic is intermixed. We can overcome this using smart coding and using high level module to separate user interface and logic.

• Flutter is yet another framework to create mobile application. Developers are having a hard time in choosing the right development tools in hugely populated segment.

Difference Between Flutter and Blazor

Language​

Both Blazor and Flutter utilize strongly typed languages which, in my opinion, is a huge reason to go with them over something that utilizes javascript. Sure, Typescript can be used to add a bit of structure, but it’s still not my favorite.

Flutter utilizes Dart, while Blazor sticks with C#. In terms of utilizing a single language to build an entire application, front end and back end, I think Blazor wins. At one point, there were some api frameworks and ORMs using dart, such as Aqueduct, but I believe development was stopped. If there’s one out there, though, let me know!

Documentation​

We all know that most of our time will be spent going through documentation, especially if we’re just starting out. Both Blazor and Flutter have well-written documentation and examples.

Blazor’s documentation is all on the official Microsoft docs site, but it’s mixed in with the rest of the .Net 6 docs. One thing I don’t like about the Blazor docs, is that I’ve found myself having trouble trying to find something again after having found it once before. That could just be an issue with me though.

Flutter’s documentation is all accessible from the main Flutter site. I think that Flutter’s docs (and site in general) is much nicer than what Blazor has, and I like that Flutter has both an easy to find cook book section showing examples of common tasks, as well as a showcase with apps that have been made with Flutter.

IDEs​

In terms of IDEs, I’ve used both VS Code as well as Android Studio for building a Flutter app. Both work really well, and I could make arguments for either.

When it comes to Blazor, however, the only real choice is Visual Studio. Rider may work, but I’ve never tried it. Also, if you’re wanting to utilize MAUI, the only option right now is Visual Studio 2022 Preview.

If you have a preference on IDEs, or have to use a specific OS, that could also play a role in whether you choose Flutter or Blazor. For Flutter, I’ve used Windows, Mac, and Linux, and the experience has been great for all of them.

Target Platforms​

In terms of target platforms, Flutter definitely wins. With Flutter, you can build and deploy to Android, iOS, web, Mac, Windows, and Linux. You can target the same platforms with Blazor, minus Linux. One other caviot is that in order to target web in addition to Android / iOS / Mac / Windows, you have to have at least two projects:

1. A Blazor Hybrid (MAUI) project to target Android / iOS / Mac / Windows

2. A Blazor app to target web

UI​

Flutter utilizes material design, and comes with a ton of nice looking widgets. Blazor, on the other hand, utilizes plain html/javascript/css for display and doesn’t have any out of the box components aside from what comes with the default app template.

In order to get up and running quickly, you’ll need to add an external component library such as MudBlazor, Blazorise, or FluentUI. Unfortunately, I was a bit dissapointed to find out that the FluentUI library for Blazor is not the equivilent of the FluentUI library for React, although both are managed by microsoft.

Authentication​

In terms of authentication, you can use a variety of options for both Flutter and Blazor. That being said, Flutter works quite well with Firebase, and Blazor integrates well with the Microsoft Identity Platform

The Difference:

Flutter	Blazor
In Flutter, if you are going to build an API or additional services, you will need a second language.	In Blazor, if you are going to build an API or additional services, you can continue using C# to build everything.
Flutter utilizes Dart	Blazor sticks to C#
Flutter's documentation is all accessible from the main Flutter site. Flutter docs are much nicer than Blazor's docs.	Blazor's documentation is all on official Microsoft Docs Site, but mixed with rest of the .NET 6 docs.
In terms of IDEs, we can use Windows, mac and Linux.	In terms of IDEs, the only choice is Visual Studio.
With flutter, you can build and deploy to Android, iOS, Web , Mac, Windows and Linux.	With Blazor, you can build and deploy to Android, iOS, Web, Mac and Windows .
Flutter utilizes material design and comes with widgets.	Blazor utilizes plain.html/javascript.css for display and doesn't have any out of the box components.
Flutter word well with Firebase	Blazor integrates well with Microsoft Identity Platform.

Resource: Medium (Kevin Williams)

The Tech Platform

www.thetechplatform.com