DotNetify-React Released: Build Reactive MVVM Apps with React + SignalR .NET Core 2.1

After more than a year in beta, I’m thrilled to announce and ready to be used on web apps with back-ends targeting .NET Core 2.1. dotNetify-React is finally released (v3.0) DotNetify is a simple, lightweight, yet powerful way to build real-time web applications. It leverages the SignalR to enable WebSocket-based web development using reactive MVVM paradigm . Originally created to work with KnockoutJS, it now can be used with both React and . technology on the back-end React Native My previous articles have touched the topics of reactive and back-end MVVM; why I think they’re ideal for development of web apps, especially complex ones that involve real-time data orchestration and visualization. programming Let’s take a peek at what else is new since then. Improved Reactive Programming DotNetify adds first-class support for “functional reactive programming”, in the form of reactive view model properties. Created either statically or at run-time, they are observables that can be immediately hooked to Rx APIs from the namespace. System.Reactive.Linq Two additional APIs are provided to simplify it even further: and . They take care the unsubscription for you on dispose, and make your code more fluent. For example, here’s a simple code to push server’s clock to the client browser in real-time: SubscribeTo SubscribedBy The property subscribes to an Rx observable that emits a value every second, and transforms it to the current time. In turn it’s being subscribed by the property, which pushes the value to the client every time it updates. Clock Update Clock This style of programming is highly expressive, concise, and with other benefits as well: separation is maintained between the data publishers (observables) and the subscribers (observers), no need to expose view model state as public properties, explicit subscriptions clearly show dependencies and side-effects, making things easy to reason about, and arguably its greatest benefit: the ability for an observer to subscribe to multiple asynchronous data streams and manipulate them declaratively through a powerful set of Rx LINQ functions that can transform, combine, filter and create derivative stream. SignalR Client Management While the SignalR for .NET Core breaks compatibility with the older .NET Framework version, DotNetify supports both, and provides an easy way to switch between them. By default it’s configured to talk to a .NET Core back-end, but can be changed with these two lines of code: There are more things you can configure, i.e. how many retry attempts on connection lost, interval between retries, connection state change callback, and cross-domain support. Middleware/Filter Pipeline DotNetify allows you to write custom middlewares and filters — the ability to intercept and transform WebSocket request payloads before coming to the view models, along with the outgoing responses. Thrown exceptions can be intercepted too, and there’s a default behavior to send exception messages to the client, so you can see them on the browser’s console logs. Token Based Authentication There’s an out-of-the-box support for JWT authentication. The client has this mechanism to pass the token on the initial connection: Once the back-end is configured through a built-in middleware to extract and authenticate the token, you can use view model attributes to restrict access based on claims or roles: Dependency Injection DotNetify integrates with ASP.NET Core DI service, which means you can use the built-in container, or your favorite IoC library to instantiate the view models and their dependencies. The default scoped lifetime only makes sense in the context of HTTP requests, so dotNetify overrides it by making the lifetime scoped to persistent WebSocket connection. React SPA Template Late last year I published a dotnet template to quickly create a React SPA ASP.NET Core + WebPack project, and . This template features real-time dashboard demo in Material UI theme, and has been updated to reflect this release. wrote about it here What About Angular or Vue? Although the current focus is on making dotNetify works well with React, it doesn’t take much to make dotNetify also works with Angular or Vue. Here’s a sample for Angular: There are some community efforts for Vue as well; . you can check it out in the Github issue forum here What To Expect Next More exciting stuff is in the pipeline. In a few weeks, will make its debut and hopefully you will find it immensely useful! It’s a set of back-end ready, customizable React components to let you build professional-looking web apps, even if you only have little front-end experience. Everything is done declaratively and with minimal Javascript. So, stay tuned! dotNetify-Elements Update: dotNetify-Elements is out! View documentation and live demo here .