React + .NET Core + SignalR = Amazing!

Simple, lightweight, yet powerful way to build real-time React + C# .NET Core web apps.

Update: DotNetify-React released: Build Reactive MVVM Apps with React + SignalR .NET Core 2.1!

I am thrilled to announce the beta for the open source project I’ve been doing to integrate React with .NET Core. It’s called dotNetify-React, and it makes it super easy to connect your React app with a .NET Core back-end, which you all know, can run everywhere: Windows, Linux and Mac.

But not only that, your app will get real-time WebSockets capability for free!

This project uses SignalR to get React components connected to the back-end view models. It doesn’t use the MVC pattern, there’s no web API to write, and no AJAX request to make from the React side. At its most basic form, you only need to declare a single connect API inside the React component’s constructor, and it will automatically hydrate the initial state on connect.

Real-Time MVVM

When a real-time app requires a stateful model, this is where dotNetify shows its key strength. Those back-end view models, they’re not merely anemic objects, but can be used to host application logic that you would otherwise write in Javascipt on the client-side. It is a true MVVM in a sense that a view model represents an abstraction of a view, containing both data and behavior to fulfill a use case.

There is a slim controller on the back-end whose only job is to maintain view model instances while their associated views are up on the browser, and you can use your favorite IoC container (or fall back to ASP.NET Dependency Injection) to instantiate them. Combined with the ability to push data to the client in real-time, you have a real option to make your app very back-end driven and to keep your front-end thin and dumb.

If you think this is a throwback to the IBM dumb terminal era and couldn’t possibly be scalable, hey, it’s been done in modern times, by no less a company than Spotify!

Get Running in Minutes

I put in the project’s website some very simple steps on how to make a real-time “Hello World” app from scratch, using three different options: .NET Core CLI, Visual Studio 2017 + WebPack, or Facebook’s very own create-react-app with Node.js and .NET Core.

The latter excites me the most given that create-react-app is the official standard for creating new React app, boasting zero configurationbecause it just packs it all up for you in a very opinionated (but expert) manner. I like that the page reloads itself whenever a script file is updated, and there’s a way to add WebPack’s Hot Module Replacement feature so that the update will just re-render the component instead of full reload.

But what pleases me more is that we can do similar thing with .NET Core: any server-side file update will cause it to rebuild just by adding dotnet watch feature. Imagine the productivity boost we can get here: we can just skip the cycle of stopping, recompiling, rerunning and reloading the page whenever you do some code changes.

To learn more and see well-fleshed-out live demos, please visit the project’s website and its Github site.

My desire with this project is to get to a state that can support full-stack micro-service on .NET platform: the ability to have a complex web app composable of independent front+back-end modules that can be worked on and deployed by completely autonomous teams with very minimal downtime. Sounds like a tall order? Hopefully not, because that’s really the way I’d like to work in the future!