Building React Web Apps on .NET Core

I am happy to announce that dotNetify-React has gone beta. This is a free, open source project that makes it super easy to integrate your React front-end app with a .NET Core back-end, which can run anywhere: Windows, Linux, and Mac. And it also gives your app real-time capability for free!

React + .NET Core

React is a web library that has gone on to be massively popular, thanks to its formidable backer, Facebook, but also because it does a lot of things really well in terms of performance, scalability and, very importantly, new developer on-boarding.

React has a very different development paradigm: it uses JavaScript to construct HTML, instead of HTML templating with inline JavaScript or directives that we've grown used to. My initial knee-jerk reaction wasn't really positive, but in time I learned it is actually quite powerful, especially due to technical decisions the React team made to make it naturally component-oriented, with unidirectional data flow and simple state management.

Since React is essentially a view library and not trying to be an all-encompassing framework, it provides a .NET developer like me the opportunity to build a cross-platform .NET web app development model that's both interactive, performant, real-time, and back-end driven.

While .NET Core is still maturing, the team has been doing a great job with it. ASP.NET Core's performance is off-the-charts, tooling like Visual Studio Code is impressive, and better integration with non-Microsoft technologies like Docker and NodeJS makes it exceptionally forward-looking and a boon for .NET developers.

Combining React with .NET Core is a promising proposition due to its potential for a very modular, component-based approach to web application development as we will explore below.

Back-End View Model

Why back-end driven? Modern web development always steers you to develop a thick client app with JavaScript and restrict your back-end to only serving data to stateless APIs. While definitely solving the problems of the past, it's not without drawbacks. One of them is language choice, of which you really have none. Not that JavaScript has not made significant headway with its language features, but in my subjective experience, C# and .NET still offers the best development experience, and even more with .NET Core.

The other drawback is the amount of code your users have to download to their devices because you have to write on the client-side the app logic that deals with state management and data-driven operations, rather than just plain UI presentation logic. In a fairly complex web app, it's easy to get the client-side bloated with non-UI concerns and increasingly difficult to maintain.

But doing back-end driven web app is a tough sell, when the prevailing perception is that it's a thing of the past, couldn't possibly be highly interactive, performant or scalable. No, everything has to go stateless in the back-end, they say, or you wouldn't be able to scale! Yet, company at a scale like Spotify is doing exactly that - today. (I followed up with the engineer in this article who confirmed that their new architecture has no scalability issue).

What I'm aiming for dotNetify-React is to give a very real option to develop modern web apps that are back-end driven, so that you can keep your front-end thin and dumb. But not only that, it has to be dead-simple to use and gives a sense of stability in the ever-changing web development landscape.

DotNetify-React

The project's strategy is to set its foot deep in the MVVM pattern that enforces clear separation of concerns between the views on the front-end and the view models on the back-end.

The view model in MVVM is not merely anemic data transfer object, but represents an abstraction of the view, serving not only data but also hosting application logic to fulfill a use case. It gets the data from the lower service layer using dependency injection (in dotNetify, you can use your favorite IoC container or fall back to ASP.NET Core Dependency Injection).

When view models handling data-driven operations, the views can just concern themselves with UI-specific operations and usability optimization. When you have the option to manage your app states on the back-end instead of solely of the front-end, it will translate to reduced efforts on the front-end and a very manageable app.

One vital ingredient to make this work is to have real-time, 2-way communication between a view on the client-side and its view model on the server. This is solved by using SignalR abstraction of the WebSockets technology. The abstraction is robust even in a poor network connection, and future SignalR .NET Core release promises to be even more powerful.

In its most basic form, you can use dotNetify-React to hydrate (populate) the initial state of a React component. For example, this is a simple React HelloWorld component:

import React from 'react';
import dotnetify from 'dotnetify';

export default class HelloWorld extends React.Component {
    constructor(props) {
        super(props);

        dotnetify.react.connect("HelloWorld", this);
        this.state = { Greetings: "", ServerTime: "" };
    }

    render() {
        return (
            <div>
                {this.state.Greetings}<br />
                Server time is: {this.state.ServerTime}
            </div>
        );
    }
}

In the React's constructor, just add a single connect API to a view model name written in plain C#. On the back-end, the view model is written like this:

public class HelloWorld : BaseVM
{
   private Timer _timer;
   public string Greetings => "Hello World!";
   public DateTime ServerTime => DateTime.Now;

   public HelloWorld()
   {
      _timer = new Timer(state =>
      {
         Changed(nameof(ServerTime));
         PushUpdates();
      }, null, 0, 1000); // every 1000 ms.
   }
   public override void Dispose() => _timer.Dispose();
} 

On app start, not only the "Hello World!" text gets sent to the React view, but using Changed and PushUpdates API, you can actually get data pushed to the browser in real-time. Notice that there's no AJAX request and no RESTful Web API to write. The communication infrastructure is abstracted by dotNetify so you can focus more on your application logic.

Now that you've seen this, you've seen most of dotNetify's APIs! Learning curve is miniscule when you only have a handful of APIs to memorize.

Up and Running in Minutes

I have created very easy steps for a real-time "Hello World" app on the project's website so people can try it and get up and running right away. You have three options: try it with .NET Core CLI (good if you want to try it in Linux or Mac), Visual Studio 2017 + WebPack, or Facebook's own create-react-app + NodeJS + .NET Core.

Using create-react-app for new React projects has a distinct advantage in that it packs up all useful web libraries and configures them for you, most notably the WebPack feature that makes your browser automatically reload when the front-end files like JSX files change. We can also do similar thing for the C# files by using the .NET Core feature called "dotnet watch". This is great to improve productivity since we can skip the cycle of stopping, recompiling, rerunning and reloading everytime changes are made.

For more details, tutorials, and live demos, please visit the project's website at http://dotnetify.net/react.
The Github page for the main source code is at https://github.com/dsuryd/dotnetify.