Advantages of using React as view layer in ASP.NET MVC applications

Javascript frameworks like AngularJs and React are great for building building SPA (single page applications). However, problem with those client frameworks is that content is rendered on the client. And rendering on the client affects SEO (search engine optimization) which as a result affects conversions. Everyone wants better conversion so using React as view layer of your new web app dispite all it’s benefits will not probably be the best solution. Or it would be?

Before answering that question let’s see first benefit of using ReactJS in the web app:

React Performance

Most people take for granted that ReactJS is always faster than Angular.js or any other framework. Truth is that ReactJS is very performant out of the box and that is easier to write more performant applications then in other frameworks. One of the reason for that is that is much easier to reason about your app. You can still write apps that are teribbly slow in React so you will have to use your head here also. What makes ReactJS different from other frameworks is the concept of the Virtual DOM. Virtual DOM is basically in memory representation of the DOM in form of a javascript object. When something on the page changes React computes the difference between current DOM and DOM that has changed. So, instead of re-rendering whole page React will only re-render required changes. Some articles say: “This is because DOM is so slow.”. Truth is that DOM is fast. However, what is slow is all the layout browsers have to do whenever the DOM changes. What takes time is recalculation of the CSS and repainting the web pages. Virtual DOM tries to minimize that, and also tries to batch all DOM changes. Here is one example of what can be done efficiently, and what would be otherwise – using some other framework, much harder to achieve: infinite scroll I made (like on Facebook or LinkedIn feed pages).

Less code, less bugs with isomorfic javascript

What isomorfic javascipt means is that javascript can be rendered on both client and server. This is huge thing. Imagine your typical ASP.NET (MVC or WebForm), php, Ruby or any other web application. It usually has some content that is rendered on the server, but also has some content that is rendered on the client. Data for content that is rendered on the client is fetched from web service that returns JSON. Often contents rendered on client and on the server are completely the same. Let’s see few examples and everything will be clear to you if not already. Let’s imagine some webpage that has paginated content. First page is rendered on the server (because we want to be indexable by Google). However, when we go to second page, third or any other page data is fetched from web service and some javascript templating engine is used to render HTML. (like JsRender, Handlebars, Mustache). Javascript templating engines are great thing. You don’t need to use jquery to update DOM nodes with data, you don’t have to do string concatanation to build html (like this varhtml=<div>+data.Name+</div> ). If your designer doesn’t see benefits of using templating engine, he or she probably has never seen any larger project built without templating engines. However, what is still downside here is that results in code duplication. We have to write all those HTML in ASP.NET MVC view , and again in javascript templating engine. Would it be nice if we could write some HTML code, and render it on server for SEO porpuses and again reuse all that code on the client. Well, with React it is possible.

There are lot more examples, like list of comments on some page. You want only few comments to be visible when user loads a page. However, when users clicks “Load more”, we want additional comments to load. Using this approach your project will have much less HTML code. There will be less bugs and it will be much much easier to maintain.

SEO

In my experience SEO and performance don’t go hand in hand. I don’t meen that performance is not important for SEO, it’s the opposite. Website speed is one of the ranking factors. What I mean is that, for example, if we want make something faster (or at least make perception of faster) we would try to fetch some content asynchronously which will probably result in content that is not indexable by Google. To resolve that you would probably need to render content on the server and that means writing HTML code in some server side framework like ASP.NET MVC. As a result, your project will probably end up in code duplication because some of your content will probably needed to be rendered on the client.

Portability

It is not common that you are building your application in ASP.NET and now you want to work inside some php framework, or node.js. Still, if you have large React app and you want it for some reason to run on node.js with your app built in React.js you can do that. I will not explain here how React works but if you know at least bare minimum you will know that React component needs data to be passed through props. React doesn’t mather if that data is fetched from ASP.NET Web Api, it is javascript object, or is it some node’s flash message.

Let’s see in my example what I mean. This is all the code in my ASP.NET MVC controller I need to render this page. You can see that all thing I have to do is basically fetch data from web service ( _accommodationRepo.AccommodationGetList ) and then pass all that data to the MVC view.

Html.React helper comes from ReactJS.net Nuget package. It’s only porpuse is to render React component on the server. In this example with call @Html.React("Components.ResultsDetailsSinglePage",new{}) I am rendering ResultsDetailsSinglePage component and passing data to the component. ResultsDetailsSinglePagewill receive that data as props.

To sum up, by using React.js as view layer we can have all these benefits:

React’s fast rendering – performance (ofcourse you will have to make you backend performant also, React can’t solve all your problems)

SEO (React can be rendered on the server so SEO doesn’t have to suffer)

Easier maintainance of the web page because of less code (Your designer can now have much more time building new projects instead of maintaining old ones)

Portability(you built some stuff in React, for example some rent a car page but now you want all that stuff inside your project which is unfortunattely built on top of completely other technology -like php- with React this is also possible)

In future articles I will go into more tehnical details about building isomorfic arhitecture for ASP.NET MVC using React. This was just high level overview of the reasons for chooseing this architecture in my latest projects.