Introducing reactive state management using Skclusive.Mobx.Observable for Blazor

TL;DR

MobX is ported in C# and can be used in Blazor to optimise the dependency tracking and rendering

What is Blazor?

Blazor is a new front-end framework created by Microsoft using C#. Unlike Silverlight (fan of it) which required browser plugin to run .NET code in browser, Blazor runs on top of WebAssembly which is a binary instruction format for a stack-based virtual machine.

WebAssembly is currently supported in all the major browsers Chrome, Edge, Firefox and Safari. Many high-level languages like C, C++, Rust programs can be compiled against WebAssembly and run in browser.

Steve Sanderson the creator of Blazor, compiled a flavour of .NET runtime (currently mono) to run onWebAssembly, hence enabling the possibility of running C# natively in browser on top of a .NET runtime using WebAssembly.

Steve is also the creator of Knockoutjs one of the popular javascript framework of it’s time. Two of the important features of Knockout is “dependency tracking” and “automatic UI refresh” when the dependency updates with the help of ko.observable().

Reactjs is the dominant javascript front-end-framework, which popularised the Component based UI composition with one way data-flow. React components are built using JSX (xml like structure with ifs and loops) to build virtul dom nodes which are rendered as html dom optimistically.

MobX is one of the popular state management library with reactive programming features. When react optimise the virtual dom to html dom, Mobx optimise the state change to re-rendering.

And Razor is a ASP.NET view technology to build view templates with ifs and loops. With that, Blazor is nothing but what if react like framework built for C#. The obvious question would arise be “Why?”. Beyond the answer “Why not?” Blazor has lot of advantages.

C# is great typed language with great tooling. Code sharing between client side and server side. Productivity via tooling. First class server rendering and lot more. though most of them may sound subjective, would be sharing my understanding/experience in future posts.

When i learnt about Blazor year back, my very first wish was what if MobX also available in C#.

When Blazor was evolving faster, few months later, i started porting MobX in C# myself. MobX was simple to understand and to translate in C#. The part i struggled was mobx-react like binding for Blazor. Left the experiment midway. I could have gone for little help though.

When the .NET Core 3.0 released and with better support for Blazor in Mac Visual Studio, i revisited the code and implemented the Blazor binding.

Following are the efforts:

  1. Skclusive.Mobx.Observable Mobx port in dotnet netstandard2.0
  2. Skclusive.Mobx.Component mobx-react port in dotnet netstandard2.0

Code is hosted in Github with MIT Licence.

A sample blazor app is hosted in github pages as below.

  1. Regular Counter is the one with default Blazor state management and rendering. When count property is updated by event handler, the default ComponentBase implementation calls the StateHasChanged and re renders.

2. Pure Counter extends PureComponentBase which does not execute StateHasChanged upon event execution. The component (event handler) is responsible to trigger re-rendering by invoking StateHasChanged.

3. Observable Counter extends PureComponentBase and uses ObservableValue to hold the count value. And the template wraps the Count value with “<Observable/>” component making that region is reactive. So when ever count value is changed the Observable component content is rendered automatically.

Highlighter is a util wrapper component which toggle the background transition when component is re-rendered. In case of Observable Counter except first rendering, highlighter does not get rendered on count change.

Observable Counter in action

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store