Sample App With ASP.NET Web API and ReactJS

We have just started a sample app for demonstrate building apps with ReactJS and ASP.NET Web API.  An early version of the app can available on github at https://github.com/shijuvar/react-aspnet . Please note that the ReactJS version of the app is not a final version, but it is an early version which will continuously refactor with a proper Flux architecture. The RESTful API written with ASP.NET Web API 2.

Why ReactJS 

We have been using MVC for building web apps and REST services for long time. At server-side, MVC is really good choice for building web apps. At one day, someone else has started to use MVC for building client-side apps too and provided a MVC framework for front-end apps. Then everyone followed that convention for solving all kinds of problems in client-side apps. IMHO, using MVC for client-side apps is really bad idea and I believe that MVC doesn't scale at larger cleint-side apps. The real beauty of ReactJS is that it is keeping away from existing conventions and patterns and trying to bring some practical solutions for solving the problem around building larger front-end apps which can be easily scale-up with recommended architecture practices such as Flux.

React is a JavaScript library developed by Facebook and Instagram team, for building user interfaces. The entire front-end of Instagram web site and some parts of the Facebook web site built with ReactJS. Interestingly, you can use ReactJS with other front-end frameworks such as AngularJS and EmberJS. You can use ReactJS as the view part along with MVC frameworks.  But, in practice, I don't recommend to use ReactJS with traditional MVC frameworks. ReactJS introduces Virtual DOM, which is awesome part of the ReactJS library and it enables high performance for the rendering of UI. ReactJS provides better performance for the UI rendering than MVC frameworks such as AngularJS and EmberJS. You can build re-usable UI components with the Virtual DOM abstraction and later we can compose these components on the actual DOM. For scaling front-end apps, we can use Flux architecture which is basically set of architecture practices, that provides data flows in a single direction. I have evaluated BackboneJS, EmberJS, AngularJS and React and highly recommend React for building user interfaces.   

Source Code

The source code is avaialble in github at https://github.com/shijuvar/react-aspnet

6 Comments

  • Have you seen my ReactJS.NET project (http://reactjs.net/)? I haven't really thought about how Flux architecture will fit into it yet but it does currently implement server-side component rendering and JSX compilation. I'd love to get your feedback and any ideas on making it better :)

  • How is this different than an MVVM take using knockoutjs?

  • @James - React is completely different from all MV* frameworks. React is all about building highly loosely-coupled UI components and composing these components for building the app. The most powerful and unique feature of React is its Virtual DOM which is an abstraction for building the actual UI on the browser. Since React provides an abstraction for building UI components using its Virtual, you can leverage React components on other places. For an example, you can use React for server-side rendering and can use to drive native iOS views via an Objective-C bridge. React.NET provides some integration for ASP.NET apps.

  • Hi Shiju,

    Thanks for posting this. Just a quick note. The file bundle.js which is referenced in the index.html is missing.


    Zen

  • Thank You ASP.NET apps.

  • To all .net + react experts:

    react + flux + .net information is virtually non-existent.

    I have learned react. I have looked at www.reactjs.net which provides a great tutorial to mesh it with .net. Now, however, I'm looking into Flux and find a dearth of info with respect to .net usage.

    The Flux pattern is recommended for larger apps ... but this lack of community support for Flux + .net is an impediment for the potential for react to be used on a larger scale for .net developers ...

    Hopefully, as some time passes, we'll find a way to implement the Flux architecture on the .net platform.

Add a Comment

As it will appear on the website

Not displayed

Your website