Thursday, February 26, 2015

React JS in ASP.NET MVC part 1—why Isomorphic JavaScript?

The conflict of rich web application and search engine optimization

Be it Gmail, Facebook or Github, we have come to expect interactivity without having to wait for a full page reload. Specifically, these web applications are single-page applications (SPA), where new content arising from interactions are sent and retrieved via AJAX.
There are many frameworks to make developing SPA easier. AngularJS, EmberJS and KnockoutJS comes to mind. However, these traditional frameworks only address one part of the equation—the browser side. The server side spits out the HTML template and data separately, causing search engines not to be able to index the page properly, for the HTML template contains no information worthy of mention in a search query. There is thus the need for additional effort to develop a classic version of the SPA in order to optimize for search engine.
Can we cut the additional effort and run our browser side SPA code on the server side too? That would generate the classic version straight away!

React comes to the rescue

React does exactly that!
React, Meteor and several other Isomorphic JavaScript frameworks arise to make it easy to have rich single-page applications, while generating SEO friendly pages. What’s more, the initial blank or placeholder page that appears before data is loaded is gone, since the template with data is already rendered at the server side.
With some additional care to place HTML forms and submit buttons and intercepting them to do AJAX, the rich web application can still function even with JavaScript turn off. Talk about progressive enhancement and graceful degradation!

In part 2, set up the React libraries