Authored by S. Ravi, Technology Advisor

Almost all browser-based apps today are coded in JavaScript (or similar languages that transpile to it). So, when an architect or developer making decisions on developing new full stack web application, they need to review a sea of options such as

 

• Which backend language to use,
• Which tools have support for those languages,
• Which SPA (Single Page Application) framework to use in frontend Angular/Vue/React etc.

My recent presentation at Tech Bhubaneshwar was targeted to answer these very points, at the same time addressing ambiguities that exist around these questions.

The confusion in selecting frontend UI framework is due to many problems with JavaScript (JS) based SPA frameworks including:

• JS is not widely accepted because it's a dynamically typed language
• Less integration and feels more like stitching.
• Issues with browser support
• Moves too fast, with many choices for framework which is intimidating

Also, SPA’s are more expensive to maintain because:

• Both front-end and back-end teams need to be maintained
• Training to become a full stack developer and mastering both front-end and backend technologies is difficult
• Use of a different language than JS on the backend
• Duplicate business logic (validation) or just have server
• Lacks IDE/compiler help between backend models + front end making AJAX calls
• Using another tool (GraphQL, TypeScript/C# syncer, etc.)

Introducing Blazor:  Steve Sanderson from Microsoft team who has also created Popular JavaScript framework (e.g. Knockout JS), visualized the tremendous possibilities of WebAssembly, a binary instruction format for a stack-based virtual machine, and designed a framework to output C# code in WebAssembly. That framework is called Blazor. The official definition of Blazor: "Blazor is a free and open-source web framework that enables developers to create web apps using C# and HTML" and has come a long way from its initial experimental days.

Blazor framework has component-based architecture:

• Blazor Server: These apps are hosted on an ASP.NET Core server in ASP.NET Razor format. Remote clients act as a thin client, meaning that the bulk of the processing load is on the server. A client's web browser downloads a small page and updates its UI over a SignalR connection. Blazor Server was released as a part of .NET Core 3.
• Blazor WebAssembly: Single-page apps are downloaded to the client's web browser before running. The size of the download is larger than that of Blazor Server; depends on the app, and the processing is entirely done on the client hardware. This app type enjoys rapid response time, and as the name implies it is written in WebAssembly, as opposed to JavaScript. A beta version of this framework has been made available, with general availability scheduled for May 2020.

Why would you be interested in this?

• C# is a fantastic language not that JavaScript isn’t…but statically typed languages are winning (like TypeScript, Flow, Reason, etc.) as mentioned in NPM (Node Package Manager) survey 46% of respondents said they are using TypeScript for creating packages.
• NET Core performance is ranked #7 on TechEmpower Framework Benchmarks It's 8x faster than Node, 1.5x faster than Netty (Java), 47x faster than Django (Python), 7x faster than Kotlin, etc.
• Share logic with existing .NET backend such as Validation logic and Models from Server when retrieving from the Client
• Consolidate frontend and backend teams under one language

Currently Blazor supports so many features mentioned in below Image:

You should use Blazor Server when:

• Creating a thin client application
• Using proprietary code which you don’t want to share with anyone
• Want to use full .Net Core runtime
• Microsoft Support

You should use Blazor Wasm when:

• Giving offline support to user or create a PWA (progressive Web App)
• Want a Zero Latency UI

The Microsoft team is currently working on .NET 5 and has plans to release Blazor WebAssembly in May 2020. Steve Sanderson team is working on framework to Desktop and Native mobile applications using Blazor.

More on Blazor,

Official Blazor Documentation:

https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=visual-studio

Curated resources maintained by Blazor community:

https://github.com/AdrienTorris/awesome-blazor

https://github.com/StevenTCramer/awesome-blazor