There are many software developers that have used ASP.NET Web Forms development framework for building solutions. In late 2014, we conducted a feasibility study for ASP.NET MVC5 framework by applying it in multiple small projects.

What is React.js? Many programmers have been pretty curious about this thing that we have been talking about. I’ll try to explain that exactly here.

ASP.NET MVC 5 BY SGAC

Many software developers have used ASP.NET Web Forms development framework for building solutions. In late 2014, we conducted a feasibility study for ASP.NET MVC5 framework by applying it in multiple small projects. The team analyzed MVC5’s benefits and disadvantages, and tried to understand it can be used to achieve core functionalities like localization, error handling and database. The projects went live, and the trial proved to be highly successful.

WHAT IS MVC?

MVC separates code into 3 distinct layers: Model, View, and Controller. The Model contains objects and database calls, the View contains presentation and the Controller links both of them together.

WHY MVC?

MVC offers several advantages:
1. Separation of concerns: Separate logic and presentation
2. Built-in features: Solve long-standing issues like CSRF, routing, etc.
3. Easier to test: Able to write unit and integration tests
4. Modular: Allow for reusable code

Witnessing the maturity and stability of ASP.NET MVC5 in 2015, we decided to apply MVC for multiple new projects this year. The initial development speed was slow due to the steep learning curve. But driven by a keen interest to master the framework, we did extensive research and pair programming to improve. Through proactive discussions and small coding workshops, we constantly looked for better ways to code and form new coding conventions. Keeping in mind the tight schedule, we worked hard to strike a balance between code quality and delivering potentially shippable products at the end of sprints. Slowly, the development speed picked up and reached a sustainable pace after everyone was familiar with coding in MVC5.

REACT.JS

What is React.js? Many programmers have been pretty curious about this thing we developers have been talking about. I’ll try to explain that exactly here.

WHAT IS REACT.JS?

React.js is a framework built by Facebook to build responsive and component-based front-end applications. There are many MVC-like JavaScript frameworks out there like Angular, Ember and Backbone to name a few, but the difference with React is that they focus on speed and reusability.

WHY REACT.JS?

Traditionally, most front-end applications were built with templates where each component would have a fixed template and data would be populated into that template and rendered into the DOM. Since the template itself is highly customized to the component, there is very little reuse going on.

In React however, the view or the HTML page is built like a tree with parent and child components where the child component is agnostic about who its parent is. This allows for high reuse in terms of a component. A simple example would be a table with a running number and checkbox on the left. We’ve all seen this component in most report pages. Wouldn’t it be great if we can implement this once and reuse across all the different pages? With React, this is now possible. Let’s say you have created this component TableWithCheckbox, you can move it around everywhere and it would behave the exact way in all the pages.

PERFORMANCE

React was also developed with performance in mind. Like us, Facebook also quickly realized that DOM updates are slow. If a lot of data changes inside a module and you manually update every single one of them by touching the DOM, you’ll then see slow page rendering. We solve this problem by rendering only once using inner HTML. We are lucky that Facebook decided to develop React to solve this problem! Now, imagine our front-end site. The amount of data during peak periods is huge! You might think this is grossly inefficient, which is partly true. We are depending on the browser to be more efficient when we render the whole display with only a small change.

But the more efficient way to solve this problem would be to keep track of the data in each row/cell in the whole table. Every time you render, only find out those cells which have changed and render that. This means you only touch the DOM where you have it. This might sound simple but keeping track of around 1000 elements in a page is an insane task. But that is exactly what React does. Because React does the job for us, we can actually focus on building great apps without being bothered about performance issues.

Around last year this time, Facebook also open sourced React, enabling everyone to read the code and see what other amazing stuff can be done in JavaScript.