React Native + SignalR + .NET Core with dotNetify

Simple, lightweight, yet powerful way to build real-time React-based apps on cross-platform C#/.NET back-end.

DotNetify is a free, open source project that aims to facilitate real-time push model to React web apps that use .NET as their back-end. It is super easy to use, runs on WebSockets, works on browsers and Electron desktop apps, and now it supports React Native mobile apps!

Reactive MVVM

In dotNetify’s programming model, container components don’t explicitly fetch data themselves, but are reactive. They only dispatch actions to the back-end, and the back-end asynchronously responds by pushing data associated with the action back to that component (or could be to other components).

Why is this better, you ask? Like most of everything else, it depends on the use case. This model works well with complex apps that are doing significant data orchestration, filtering, transformation, and perhaps communication with other (micro)services. Rather than having this kind of logic on the front-end, let the back-end does this. That’s exactly what it’s for.

A container component is paired up with a back-end view model in an MVVM style. The view model instance follows the lifetime of the component, is responsible for providing data exactly in the shape that the component needs, and push it via WebSockets either as a reaction to the component’s own action or some other external events (e.g. data update from IoT sensors).

React Native + .NET Core Demo

React Native is a great way to build native mobile apps, and especially with create-react-native-app (CRNA) tool, even novice mobile developers can be productive very quickly. The ability to auto-update your code on save and see the change immediately, whether in an emulator or a real device, vastly improves developer’s experience.

I provided a simple github demo bootstrapped with CRNA to showcase some of the things you can do with dotNetify. You can either run the server code locally (written in .NET Core, so can run everywhere: Windows, Linux, macOS), or use the one hosted on dotNetify’s website.

Live Gauge

Demonstrates how to implement live data update. Starting with a simple API call in the component’s constructor to connect to the back-end view model, data will be periodically pushed right into the component’s state to trigger re-render:

dotnetify.react.connect("LiveGaugeVM", this);

Infinite Scrolling

Demonstrates on the basic level how to implement a list that keeps growing in number as user scrolls down. In contrast to common implementation of this feature, there is no code in the front-end that deals with query construction, pagination or data fetching. Those things are done on the back-end; the component only keeps a reference to which page it’s on, and asks for the next page when the end is reached. Keep your front-end thin and simple!

Token-Based Authentication

DotNetify has recent capability to write middlewares for its WebSockets communication, which really comes in handy for authentication. Instead of putting them in query strings, authentication tokens can be placed as part of the payload designated as “headers”, to be extracted out and validated by the middleware on the back-end:

dotnetify.react.connect("AFITop100ListVM", this, {headers: { Authorization: "Bearer " + token }});

Some Caveats

This project is right there on the bleeding edge, along with the technology it depends on. SignalR for .NET Core isn’t production-ready until .NET Core 2.1 is out.

While there are APIs you can use to handle connection state events and server exceptions, there’s more work to do to support offline-first apps. I don’t currently make this a priority, but please let me know your thoughts.

If you’re interested with this project and want to get the latest updates, please follow me on twitter @dotnetify. I would also really appreciate your questions or feedback which you can post on the project’s GitHub issues forum. Thank‘s!