DotNetCurry Logo

JavaScript Frameworks for ASP.NET MVC Developers

Posted by: Rahul Sahasrabuddhe , on 4/10/2017, in Category HTML5 & JavaScript
Views: 24740
Abstract: The past few years have seen a meteoric rise in SPA and MVC applications. You cannot go more than a few sentences discussing SPA without stumbling upon a JavaScript framework. This article will serve as an introduction to new as well as established JavaScript frameworks, and will help you make better decisions when you shop for a JS framework to compliment your ASP.NET MVC apps.

In today’s “app” world, what really matters beyond frameworks, languages, platforms and technologies, is customer experience.

Customer Experience is the sum-totality of how customers engage with your company and brand, not just in a snapshot in time, but throughout the entire arc of being a customer (Src: bit.ly/dnc-cx)

With users having shorter attention span than a goldfish, your application should be able to engage with them, within no time.

It is not about focus anymore; it is about fixation.

This article is published from the DNC Magazine for Developers and Architects. Download or Subscribe to this Free magazine [PDF] to access all previous, current and upcoming editions.

Once users access your app – be it web/mobile, or consumer oriented/enterprise-class; they should “stay” onto your application irrespective of all other distractions.

The user interface or in MVC parlance – the View, plays a key role in designing applications that provide superlative customer experiences.

This is where choosing the right JavaScript Framework becomes a vital decision.

As MVC developers, you would accept nothing less than a flexible, modular, fast and rich JavaScript framework that can produce excellent quality user experiences that are user-friendly, scalable and maintainable too.

User experience should not be dependent on JavaScript. However JavaScript can serve to facilitate and enhance that experience.

The market is abuzz with plenty of JavaScript Frameworks and libraries with a new addition to it every fortnight. Which one fits your need?

Let’s find out!

JavaScript Frameworks - A quick primer

A JavaScript Framework is basically a set of functionalities provided by the creator of the framework to be used/re-used and in some cases, refactored as well. A framework is built by keeping specific design goals in mind.

Here are some examples of JavaScript Frameworks and libraries that are built around specific design objectives:

1) Angular: a framework used for building complex UI applications.

2) React.JS: focuses mainly on the “V” (View) part of the Model-View-Controller (MVC) architecture. At times React js is used in conjunction with Angular JS.

3) Backbone.js: Gives structure to web applications. Specifically built for teams with less common use-cases.

4) Ember.js: Developer-centric convention-driven framework. Embraces the MV* structure and is targeted towards developers who have a MVC programming background in any Object Oriented language

5) Polymer.js: Based around leveraging web components. Uses polyfills until web components are implemented across all browsers.

6) D3.js: mainly focuses on the visualization aspects of data and is used when you want to render charts and graphs in web applications.

You can also have a complete stack built on JavaScript now – also referred to as the MEAN stack (Except M which refers to MongoDB, rest others – (E)xpress.js, (A)ngular.js and (N)ode.js are JavaScript based).

If you are new to MEAN, check out how to use Node.js, Express and MongoDB (MEAN stack) in an ASP.NET MVC application over here bit.ly/dnc-mean.

Why JavaScript Frameworks?

JavaScript Frameworks have become a quintessential ingredient of web application development these days.

This is particularly true in context of Single-Page applications (SPAs) and MVC based applications.

Besides speeding up the development significantly, here are some key factors that make JavaScript Frameworks a “must-have” component in any web application development strategy:

1) JavaScript frameworks usually come bundled with a lot of features like templates, data-binding, routing etc. out-of-the-box that expedites the development process and thus reduce the time to market.

2) JavaScript frameworks have come into vogue mainly due to the MV* (MVC or MVVM) pattern being used in modern web apps consistently. They provide a well-defined structure to the code.

3) They operate on client/browser side and can provide some great functionalities like instant data validations etc. for which there are no server trips needed.

4) A typical web application (and that too if it is consumer facing) ought to have a rich and at the same time, a simplistic user interface. JavaScript framework allows you to do that in combination with CSS. While CSS provides excellent UI capabilities, JavaScript provides an efficient means of manipulating those capabilities.

JavaScript frameworks are helping older web apps which use heavy server-side rendering, transition to a more fluid modern UX, where a lot of action happens on the client-side without constant page reloads.

JavaScript Libraries – Framework vs Library

A library is a collection of code to perform common tasks.

A framework differs from a standard library as the framework provides all of the underlying infrastructure and a collection of design patterns and best practices necessary to solve a complete task.

If the library is a tool box, framework would be the workshop.

It would be fair to say that we can focus more on the usefulness and relevance of a library or framework for a specific problem to be solved.

Frameworks come in handier when the task is usually complex in nature.

In context of this article, we will focus on JavaScript frameworks that are commonly used for ASP.NET MVC based application development.

There are quite a few JavaScript Frameworks focusing on Mobile development aspect (and hence are termed usually as mobile frameworks). We would not be focusing on them for now.

Let’s Shop JavaScript

A quick disclaimer – what holds true while shopping for a smartphone or car, is going to hold true while choosing a JavaScript framework too.

At the end, it is a matter of personal taste & various other factors. A JavaScript framework you choose for a specific requirement may or may not fit another project requirement.

We’ll follow a methodology where we will analyze the frameworks with the following parameters – a brief history of the framework and its current status, key features, and some examples where they are used commercially.

At the end, we will have a comprehensive comparison of these frameworks using various parameters.

We’ll focus on the following five frameworks and libraries for this comparison – Angular JS/2.0, Backbone, Ember, React and Vue, as they are the most frequently used frameworks with ASP.NET MVC.

Let's look at how these are stacked against each other when it comes to their usage.

The following infographic would help us do that:

js-framework-usage

Figure 1: JavaScript frameworks Usage

Angular JS

Angular is the most-popular, most-used and most-discussed JavaScript Framework in context of web applications, and that too ASP.NET MVC applications.

Angular was developed by Google and was first released in 2009 under the MIT license. Since inception, it has been used widely for UI-centric web application development.

Some key features of Angular JS 1.x are:

1) Mainly UI-centric and hence focuses more on extending HTML features which makes it a right fit for web applications following MVC based architecture

2) Modular in nature

3) DOM based structure allows easy manipulation of data

4) Two-way data binding: This means that changes made to the view are instantly available to the model and vice-versa

5) Uses dependency injection to manage the dependencies of the functions used in code

6) Programmers that have coded in C# or Java (basically OOPs-based languages) find it relatively easy to work with Angular JS because of the structured approach followed.

You can find a pretty comprehensive Angular JS tutorial here and for MVC developers looking to integrate AngularJS, check out bit.ly/dnc-angular-mvc.

Interestingly, while Angular JS 1.x has been extensively used, Google has been working on Angular 2.0 (note that “JS” is now dropped from the name) since around 2014.

Here are some key differences:

1) First and foremost, Angular 2.0 is NOT an upgrade of Angular JS 1.x.

2) Angular 2.0 is written in TypeScript and meets ES6 specifications. And that is why JS is dropped from the name – a small but not-to-miss detail.

3) Angular JS 1.x was not really built with mobile app form factor in mind. Angular JS 2.0 has mobile app support as one of the key design goals from the very beginning.

4) Angular 2.0 is more component-based by design as against Angular JS 1.x which is more controller-driven.

5) Angular 2.0 has better performance than Angular JS 1.x. This link provides more details. This is achieved by having some architectural tweaks while rendering HTML on server.

There are quite a few syntactical changes between Angular JS 1.x and 2.0 but we wouldn’t go that deep right now. You can find ample blogs and articles explaining those. Please head over to www.dotnetcurry.com/tutorials/angularjs which has plenty of Angular tutorials.

Typically Angular JS 1.x or Angular 2.0 are used when we need to handle complex web UI requirements. Builtwithangular2.com has loads of example sites that are built using Angular 2.

In addition to it, some commercial websites built using Angular JS that need a noteworthy mention are Weather.com, Upwork.com, freelancer.com, Netflix.com and the list is long.

Interestingly, Angular 4 is already out (yes, you read it right. There is no version 3!).

Learn how to use AngularJS in ASP.NET MVC applications.

Backbone.JS

Backbone was released in 2010 and is a fully-featured, yet a lightweight JavaScript framework.

It is also relatively easy to learn as compared to other frameworks.

If you are looking for a basic framework and you would like to add more stuff on top of it, then Backbone is the framework to use.

If you are new to Backbone js, here’s a good tutorial introducing Backbone bit.ly/dnc-backbone.

Here are some key features of Backbone.JS:

1) A light-weight JavaScript best suited for SPAs (Single Pages Apps)

2) It is primarily built on the MVP pattern

3) Extensive documentation making it quick and easy to learn

4) Controllers are optional in Backbone. You have Views and Models and then you have event-driven communication happening between those.

5) Events are built on top of regular DOM and they do the job of connecting models and views together.

6) Models can be easily tied to REST-ful APIs

Typically if you have a web app with most of its UI remaining the same, but only certain UI elements change based on user interactions, then Backbone.js could be the right choice. This holds true usually for SPAs, and hence Backbone.js works very well for SPAs especially when you are manipulating the DOM on a regular basis.

In an ASP.NET project, Backbone in addition to providing features like two-way data-binding, client-side routing etc., can be used to enforce structure in your SPA and to create a more modular and resuable front end. ASP.NET can complement this SPA setup by providing by a back-end service using (ASP.NET Web API) and providing a host of HTTP features like caching, versioning, streaming amongst others.

Some web apps that are built on Backbone.js are as follows - Pinterest, Foursquare, Walmart, Delicious and USA Today.

Ember.JS

Ember.JS was initially released in 2011.

It has gained popularity since then as it brings the best features of two popular JS libraries into one viz. two-way data binding (Angular JS) and server-side rendering of DOM (React.JS).

Following are some features of Ember.JS:

1) Ember provides a lot of features out-of-the-box. If you want more flexibility, you shouldn’t consider this framework. However, if you want to focus more on the core development of UI/features and let JavaScript do the basic stuff, then Ember is the right choice to go with.

2) In Ember, objects can bind properties to each other. So a change in property of one object, can result in an appropriate update in the bound object details.

3) Similar to React.JS, it also provides nested views to handle complex UI.

4) You have the ability to use templates in Ember.js that would make the code more modular and easier to maintain.

5) It comes equipped with lot of tools including CLI (command line interface). This would help you add various components easily into your code.

Search the internet for examples on how developer are using Ember-Cli with ASP.NET MVC and Web API.

Some examples of apps built using Ember.js are - Groupon, Vine and Apple music desktop application.

React.JS

React JS is a library, not a framework.

React is focused mainly on the visual aspects of the application. It is a new frontend framework from Facebook that makes it easy to develop the V in MVC.

This means you can use ReactJS similar to an Angular directive to render items and keep track of their state.

If you are new to React JS, Ravi Kiran has a more detailed tutorial on it at http://www.dotnetcurry.com/reactjs/1353/react-js-tutorial

ReactJS.NET is a .NET specific JavaScript version of React.JS and can be used with ASP.NET MVC 4 or 5 and even ASP.NET Core MVC.

Facebook and Instagram use React js very effectively. Both are UI centric applications and that is their key USP. React JS can be a good choice when you are going to develop a dynamic consumer-facing, UI-centric application that rerenders frequently. Using React JS to develop some business applications that need simple templating might not be a very good idea.

Although React js has helped shape the future of JavaScript, just remember there is a time and place for every technology.

There is a time and place for great technology.

Here are some key features of React.JS:

1) It uses virtual DOM for all UI components. Essentially it creates another DOM in memory on the server-side. When user interacts with the web application, it tracks the changes in virtual DOM. Then, it does a “diff” of both DOMs and patches the browser DOM with the changes. This ensures that there is no re-rendering of DOM required.

2) React can run on the server (using Node js) and on the client. So you can build your MVC application using React instead of Razor to render a component on the server. The same piece of code can double as a client-rendering code too.

3) Nested views and loops are used often in React.JS for handling complex UI.

4) React can also work with any front-end framework you are working on. So if need be, you can smoothly replace any feature with React. For eg: switch ng-repeat with React code to gain its fast view rendering power.

In addition to Facebook and Instagram, Airbnb, Khan Academy, New York Times, WhatsApp web & Netflix are some of the companies that are using React.

Vue.JS

Vue.JS (pronounced as “view”) is a simple yet powerful library to build interactive web interfaces.

Vue.js works in tandem with ASP.NET MVC and allows you to keep your webapp untouched, while at the same time adding flairs of Vue in your views, wherever needed.

If you are new to Vue, here’s a good Vue.js tutorial bit.ly/dnc-vuejs.

Following are some key highlights of Vue js:

1) It is relative easy to learn. The documentation is comprehensive enough and that is the only place where you need to look for help (as against forums etc.). If you have worked on Angular 1.x, you would find Vue.JS easier to adapt to.

2) It follows a declarative rendering approach when it comes to coding in Vue.JS.

3) Vue.js can be used for server-side rendering.

4) Provides the benefits of reactive data binding and reusable composable view components with ease of use.

5) Vue allows you to bind data models with your presentation layer. These models are not special in any way, they are simple JavaScript objects. You also do not need any special syntax, install any dependency or register event objects to work with these models.

6) There is no concept of virtual DOM in Vue. In Vue.JS, you can directly manipulate the DOM.

7) Templates and components are the building blocks that you can rely upon to build your web applications.

To see how Vue compares with other frameworks like React, Angular, Ember etc. check this link: vuejs.org/v2/guide/comparison.html.

Some Noteworthy JavaScript Framework mentions

Given that we have a new JavaScript framework popping up every now and then, it is nearly impossible to cover them all. While I have focused on some of the most popular and relevant JavaScript frameworks used with ASP.NET MVC today, here are some noteworthy mentions:

1) Knockout.JS: Released in 2010 under the MIT license, it follows the MVVM design philosophy. Although it appears to have lost popularity in recent times to Angular and React, you can always read about using Knockout with MVC and decide for yourself. Here’s a handy tutorial - bit.ly/dnc-knockoutjs.

2) Aurelia.JS: It was released in January 2015. So it is relatively new. However it has ample community support already. It is a modular library and hence you can use specific independent libraries it provides, as per your needs.

3) Bootstrap: Bootstrap was developed by Twitter and is now made available as an open source offering. While it is certainly a JavaScript Framework that focuses on providing usual UI features, it is usually not regarded as a reliable & structured JavaScript Framework by the developer fraternity. It is typically associated mainly to UI design aspects more than the other “framework” aspects like modularity of design, best practices, and architectural robustness etc.

Check out  a good Bootstrap v4 tutorial by Benjamin at http://www.dotnetcurry.com/javascript/1327/bootstrap-4-new-features.

Some noteworthy commercial JavaScript frameworks for you to consider for your MVC apps would be KendoUI from Telerik, Wijmo from GrapeCity and IgniteUI from Infragistics.

Special JavaScript Libraries for Your Special Needs

In the plethora of JavaScript Frameworks available, most of them focus on the UI aspect. However, there are some specific offerings that focus on a specific aspect of functional requirements. Here are some examples:

1) Node.js: This is a server-side JavaScript framework that you can use in conjunction with other client-side (read UI-specific) frameworks. This is a key component of MEAN stack that is gaining a lot of popularity when building entire apps on JavaScript-based stack. Check out some Node.js tutorials at dotnetcurry.com/tutorials/nodejs.

2) D3.js: fully focused on chart related visualizations. This library comes with quite a lot of components that help you create cool charts. Check a tutorial on D3.js and ASP.NET Web API over here bit.ly/dnc-d3js.

3) Babylon.js: If you want to build some cool 3D games on browser, then you should use Babylon.JS.

JavaScript Frameworks - The Comparo

Let us compare various JavaScript Frameworks to understand its pros and cons. This is not an exhaustive list of parameters, but it will serve as a good guiding reference.

The factors considered for comparison are:

1) Learning curve: A JavaScript framework that is easier to learn would help in reducing your development time.

2) Community support and documentation: Long term support and active communities are vital for adoption. Good documentation is a cherry on the cake.

3) Mobile-enablement: Any web development eventually needs or leads to having a mobile (either hybrid or native) presence. So it should take minimal effort to mobile-enable your site.

4) Efficient DOM manipulation: A framework that excels in this would imply that it would perform well.

5) JS Size: In today’s world, if your UI takes time to load, it immediately leads to poor UX, which eventually leads to a loss in business. You most certainly do not want your JavaScript to be the reason for it. Hence JavaScript size is an important aspect to consider. There are ways and means to mini-fy the script to reduce size. Also, the complexity of UI designed would play a part too. So although I have listed it here, you cannot compare the frameworks one-on-one just based on this parameter as there are quite a few other factors to consider too.

Certain factors that I have purposely not considered for this comparison:

1) Performance: This is subjective as it depends on the way a particular Framework is used, how complex the web UI is and so on. In general, all frameworks are more or less at par when it comes to performance, with few performing exceedingly well in some parameters. At the end, performance also depends on how we as developers or architects use them effectively. Just refer to stefankrause.net/wp/?p=392 which does a good job in benchmarking different JS frameworks.

2) Reusable components: With each framework being used so extensively, chances are very high that you would find reusable components for almost all of them without too much of a trouble. So this may not become a deciding factor. The same argument holds true for features like UI binding and as well as Routing.

comparing-js-frameworks

Figure 2: Comparing JavaScript frameworks

Conclusion:

We are spoilt for choices when it comes to JavaScript frameworks.

The comparison above clearly shows that these JavaScript frameworks and libraries are neck-to-neck when compared on key factors. In addition to this, there is a constant effort by the owners of these frameworks to optimize these frameworks, adopt the goodness of other frameworks to theirs, or release revamped versions of existing frameworks.

While we have so many choices at our disposal, we wouldn’t go entirely wrong if we choose any of the mainstream, widely used JavaScript frameworks.

What really matters is to have a good, thorough understanding of the business problem in hand, and then apply your known technical knowledge about frameworks to choose the apt one.

What also matters is your understanding of core JavaScript, which affects your judgment while picking a framework for your next project.

Happy shopping!

This article was technically reviewed by Suprotim Agarwal and Benjamin Jakobus.

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+
Further Reading - Articles You May Like!
Author
Rahul Sahasrabuddhe has been working on Microsoft Technologies since last 17 years and leads Microsoft Technology Practice at a leading software company in Pune. He has been instrumental in setting up competencies around Azure, SharePoint and various other Microsoft Technologies. Being an avid reader, he likes to keep himself abreast with cutting edge technology changes & advances.


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!