Intro to Single Page Applications Using

JavaScript and ASP.NET

Alan Hecht

What is a Single Page Application?

• The web equivalent of a desktop application

• The application is written with HTML, CSS, and JavaScript

• Unlike regular web sites, no page loads take place after initialization.

Characteristics of a SPA

• Launched from a single HTML page or view

• The page is fairly interactive, like a desktop application

• Portions of the page (sometimes very large portions) rendered client side by JavaScript

Architectural Overview

REST API - JSON

Business Logic

Browser - Web App HTML / CSS / JS

UIHTML / CSS / JS

AJAXNavigation /AJAX

JavaScript in the Browser

• Single thread handles all events, UI and non-UI

• Synchronous events stop all further processing until done, which locks the UI

• Asynchronous events are queued until callback function is called. Other events handled in the meantime

Asynchronous JavaScript

• Code is non-blocking. Callbacks aren’t invoked until code is done executing and the thread is waiting for events to execute.

• Good analogy is the front window at the doctor’s office

• Good for I/O intensive applications but not CPU intensive applications

Async JavaScript Example

AJAX

• Asynchronous JavaScript and XML (now use JSON instead of XML)

• Browser makes an asynchronous HTTP request, callback function is called upon completion

REST

•Representational State Transfer

•Building your web API using HTTP instead of on top of HTTP (like SOAP)

REST

•Four HTTP verbs used: GET, PUT, POST, and DELETE

•Use URL path segments instead of query parameters or payload data

REST Example

HTTP GET /users - get a list of usersHTTP GET /users/1 - get info for user id 1HTTP POST /users - create a new userHTTP DELETE /users/1 - delete user id 1HTTP PUT /users/1 - update user id 1

JSON

• JavaScript Object Notation

• Collection of key-value pairs and lists of key-value pairs

• Has replaced XML as a data format because of simplicity

JSON Example

Structuring JavaScript Code

• For non-trivial, interactive web apps, you’ll want to use a framework which at least has the concept of models and views along with how they get updated

• A JavaScript framework architected with MVC, MVVM, MVP, or MV-Whatever helps structure the UI (will be using MVC as a ‘shorthand’ here)

What about jQuery?

• jQuery is great but alone doesn’t scale well for more complicated apps

• For larger apps, you would likely wind up with data scattered about the DOM in ‘data-’ attributes and view logic tied to a particular HTML layout

Client Side JavaScript MVC Frameworks

Just pick one…

JavaScript Framework Philosophy

• Have lots of specialized frameworks that do one thing well, mix and match as needed (you’ll see this in Node.js)

• But most of us are just trying to solve a business problem and don’t wish to engage in endless research

• Nobody has won the client side JS MVC framework battle the way jQuery won with DOM manipulation & CSS selectors

Scott Hanselman’s JavaScript Glossary

• Great overview important and innovative client side JavaScript frameworks: http://www.hanselman.com/blog/TheBigGlossaryOfOpenSourceJavaScriptAndWebFrameworksWithCoolNames.aspx

• Includes open source ASP.NET server side libraries that are innovative

JS MVC Frameworks - How to Decide

• At the end of 2013, the most popular as measured by Stack Overflow activity are: Backbone.js, Ember.js, Angular,js, Knockout.js, Dojo, and Ext.js

• Best article I’ve seen which compares and evaluates JavaScript MVC frameworks while not making a recommendation is: http://www.funnyant.com/choosing-javascript-mvc-framework/

TodoMVC.com

• Sample Todo application written in each and every JavaScript Model/View/* framework

• Gives a sense of how much structure and boilerplate code is needed to create a web app with a given framework

TodoMVC.com

Backbone.js

•Contains the minimal set of models, collections, views, and URL functionality needed to build a web application

•Good for experienced JavaScript developers

Marionette.js

• Built off of backbone.js

• Reduces boilerplate code, especially in the views

• Can be incorporated piecemeal

Backbone.js & Marionette.jsExamples

Backbone.js Routing

•Anything in a URL after the ‘#’ is for client side navigation representing a ‘view’. Classic example is AJAX pagination.

•With a small, trivial application, a ‘switch’ statement will likely work.

•For a more substantial application, something more formal which handles client side URL routes is usually needed

Ember.js

• Framework with an opinionated way of building web applications

• Modeled after the Cocoa framework in iOS development and Ruby on Rails to a lesser extent

• Designed for building desktop-like web applications

Ember.js Example

Ember.js Templates

• Client-side view templating which contains expressions that can be replaced with values

• Templates can reside in separate files that are loaded and compiled.

Ember.js & Discourse

• Discourse is a large, open source, forum web application which uses Ember.js

• Looks like a good non-trivial example of how to use Ember.js

• Server side is Ruby on Rails, but just go to the app/assets/javascripts directory and you’ll be all set.

Angular.js

• Toolset for building the framework for web applications

• What HTML would look like if it were designed for building web applications

• Designed with testing in mind (dependency injection and plays well with testing tools)

Angular.js Example

Angular.js Directives

• Allow you to create custom HTML attributes, elements, or classes

• The Angular compiler traverses the DOM on the client looking for pre-built or new directives.

Angular.js Services

• Functions that carry out specific tasks. Angular includes built-in services but custom ones can be created

• Services added via dependency injection

Knockout.js

• Based on Model-View-ViewModel architecture just like WPF & Silverlight

• Focuses on UI data binding

• For apps bigger than a few pages, likely need other components like client-side routing

Knockout.js – Example

Ext.js

• Framework for building desktop-like applications

• Works better for internal applications because it’s so heavyweight

• Steep learning curve

• First stable release back in 2007

Ext.js - Example

Dojo

• Toolkit for building desktop-like applications

• Extensive HTML widgets

• Documentation not so great

• First stable release back in 2007

What about jQuery?

• Ember.js depends on jQuery

• Angular.js can use jQuery or include its own slimmed down version of it

• Backbone.js, Knockout.js, Ext.js work with jQuery

Building a REST API

• Best options are ASP.NET Web API or WCF REST

• Could use ASP.NET MVC or even an asmx web service if on Web Forms

• The API can be (and often is) used native mobile applications as well.

ASP.NET Web API

• Designed to build APIs, not web sites

• Unlike ASP.NET MVC, controllers return data and not views

• Content type (i.e. JSON or XML) is negotiated, not specified, via HTTP ‘Accept’ header

ASP.NET Web API - Controllers

• Controllers derive from “ApiController” instead of “Controller” like they do in ASP.NET MVC

• HTTP methods bound to controller methods by start of method (“Get”, “Post”, “Put”, etc.) or with an attribute ([HttpGet], [HttpPost], [HttpPut], etc.)

ASP.NET Web API - Routing

• By default, the route is “api/{controller}/{id}”, and “api” is used to avoid collisions with ASP.NET MVC routing

ASP.NET Web API - Example

Issues

Back Button

• Back button only works if the URL changes

• Ember.js, angular.js, and backbone.js have some built in support

• Can use HTML5 History API with knockout.js

What about SEO?

• Web crawlers at the end of 2013 don’t handle JavaScript

• Content to the right of ‘#’ in the URL isn’t sent to the server, Google converts #! to an ‘_escaped_fragment_’ Huh?!?!

• Experimental work with using Node.js to render the page on the server