Selecting a Client Framework
Picking the right framework can be a challenge. Nearly all modern sites include jQuery and Bootstrap. ASP.NET sites also include .validate (among a few others). From there, you are left to review and pick which framework you might need for your given scenario. When picking a framework, we suggest you verify that the framework really solves your specific needs; pick one that has a large support base (and good documentation/samples).
The following is an overview of just some of the many client frameworks that have recently grown in popularity. We are certain that by the time you read this there will be more, and existing frameworks will be doing more.
Adding Client Library Support with Bower
Visual Studio 2015 and ASP.NET 5 include Bower by default for managing the many client-side JavaScript frameworks. This is similar to NuGet, but for JavaScript. We cover using Bower in Chapter 17 (subsection “Using Bower for Managing Client Framework Dependencies”).
AngularJS (angularjs.org)
This JavaScript framework allows you to write MVC inside the browser. It is similar to the MVC you might write on the server in an ASP.NET MVC application. However, it is all client-based and written as JavaScript. Of course, the client code can call back to the server to get and post data.
Google controls and supports Angular. However, Microsoft and Google have recently joined forces to bring the next version of AngularJS to market with TypeScript. (We introduce TypeScript later in this chapter.)
The AngularJS templates are included inside Visual Studio by default. These templates can be used for SPAs, WinJS store applications, and Cordova mobile solutions. We walk through an example of using this framework later in this chapter.
Bootstrap (getbootstrap.com)
Bootstrap combines CSS and JavaScript to allow you to create sites that are responsive to device size by default. Using Bootstrap correctly will ensure that your site works well on large screens down to small mobile devices such as phones.
Like jQuery, Bootstrap includes add-ins or derivatives. There are dozens of reusable components available to help with icons, controls, playing media, and more.
Bootstrap is included by default in many of the ASP.NET templates. We walk through an example of using this framework later in the chapter.
Knockout (knockoutjs.com)
This library uses the Model-View-ViewModel (MVVM) pattern inside the browser for creating models based on the given view (called a ViewModel) and then using declarative data binding to connect the ViewModel to the view. Knockout takes care of managing any dependencies. This way, if two or more items in your page are dependent on the same item in the ViewModel and an update occurs, all items automatically get the update.
Even more powerful, you can bind the ViewModel to any markup elements, including input tags. You can also write functions inside your ViewModel for handling various computed scenarios. You can then use the data binding features to bind these functions in your model to an element in your markup. We walk through an example of using this framework later in this chapter.
Sammy.js (sammyjs.org)
This is a small framework designed around making Representational State Transfer (REST)-based calls to the server (a route) using AJAX. Results (JSON or HTML) are then used to update the page.
Modernizer (modernizr.com)
A library that allows you to determine if a browser executing your code supports certain features of HTML, CSS, and JavaScript. It can be used to verify whether the executing browser supports your intent; if it doesn’t, you can write fallback code to handle a certain scenario differently.
jQuery UI (jqueryui.com)
This is another library from the jQuery foundation; it contains jQuery plug-ins for specific user interface features such as widgets (tabs, accordion, slider, data picker, autocomplete, and more), new effects such as color animation, and interactions such as drag, drop, resize, and sort.
jQuery.validate (jqueryvalidation.org)
This is used for client-side form validation. ASP.NET uses this framework to handle form field validation on the client. This is included by default in most ASP.NET project templates.
Respond.js (Download from GitHub.com)
This provides a responsive CSS framework for browsers that do not support CSS3.
Hammer.js (hammerjs.github.io)
This is a JavaScript library for working with touch gestures in the browser. Hammer.js is included with the ASP.NET 5 Web Site template by default.
Backbone.js (backbonejs.org)
This is a JavaScript library for building MVC applications in the browser. Like Knockout and AngularJS, you create JavaScript models, and Backbone.js provides assistance with binding the model and calling back to the server.
Breeze (getbreezenow.com)
This is a JavaScript library for managing your database entities in JavaScript. It allows you to use JavaScript to write data queries against your objects persisted on the server. Breeze handles database updates on the server and data binding on the client. It works with Knockout, Backbone, and AngularJS (among others).
Ember.js (emberjs.com)
This is a framework for building client-side MVC applications in JavaScript. Ember defines a specific, repeatable pattern for building highly interactive web applications. It is similar to AngularJS, Backbone.js, and others.
Views in Ember are written as templates (using Handlebars.js). Models represent your data and are loaded using REST and JSON. A controller is used to store application state about a given template. As a model is updated, the template knows about the update and is responsible for updating itself.
Chart.js (chartjs.org)
This is a library of responsive, interactive, HTML5-based graphical charts you use when displaying data in your application.
Less (lesscss.org)
Less is not a JavaScript library. Instead, Less extends the capabilities of the CSS language to allow variables, functions, and other techniques. Less is preprocessor in that a Less file is ultimately output to a standard .css file. See Chapter 17 for a small example.
Sass (sass-lang.com)
Sass is another CSS language extension (see “Less” in the previous paragraph). It, too, adds features to your CSS, such as variables. It also works as a preprocessor and ultimately spits out .css files based on your Sass files.
Node.js (nodejs.org)
This is a JavaScript library for doing real-time, nonblocking input/output (I/O) between a browser and a server. Node uses Transfer Control Protocol (TCP) sockets to communicate real time with a server across the Web.
SignalR (signalr.net)
SignalR is a JavaScript library for ASP.NET that enables real-time, socket-based web development (similar to Node.js). This includes doing chat, auctions, or any real-time transaction with the server.
CoffeeScript (coffeescript.org)
CoffeeScript is a version of the JavaScript language that attempts to simplify common JavaScript development techniques. It cuts down on the amount of code you need to write by adding support for simplified syntax. A CoffeeScript file is preprocessed as JavaScript before being output to the browser.
TypeScript (typescriptlang.org)
TypeScript is a superset of JavaScript that allows you to write JavaScript as strongly typed code (whereas JavaScript does not enforce type checking). Think of TypeScript as its own language that is compiled into JavaScript for production code.
The TypeScript language was created and is supported by Microsoft as an open source language product. Microsoft has therefore added support inside the Visual Studio tools. This means you get IntelliSense, compiler type checking, code-refactoring, code navigation, and more. TypeScript simplifies writing large JavaScript libraries.
You can learn more about TypeScript, download the language, and get the TypeScript Visual Studio tools from their website. In addition, you can peruse the TypeScript source or even contribute thoughts to the product if you like. The TypeScript website can be found at typescriptlang.org.