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 this magazine from here [PDF] or Subscribe to this magazine for FREE and download all previous and current 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.
Let’s find out!
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.
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.
This is particularly true in context of Single-Page applications (SPAs) and MVC based applications.
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.
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.
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:
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!).
To learn how to use AngularJS in ASP.NET MVC applications, check this tutorial.
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:
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 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:
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 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
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.
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 (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.
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.
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.
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.
The factors considered for comparison are:
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.
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.
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.
This article was technically reviewed by Suprotim Agarwal and Benjamin Jakobus.