Intro to SPA using JavaScript & ASP.NET

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
Browser - Web App
HTML / CSS / JS
Navigation /
AJAX
UI
HTML / CSS / JS

AJAX

REST API - JSON

Business Logic

JavaScript in the Browser
• Single thread handles all events, UI and nonUI
• 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

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 users
HTTP GET /users/1
- get info for user id 1
HTTP POST /users
- create a new user
HTTP DELETE /users/1 - delete user id 1
HTTP PUT /users/1
- update user id 1

JSON
• JavaScript Object Notation

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

• Has replaced XML as a data format because
of simplicity

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/TheBigGlossa
ryOfOpenSourceJavaScriptAndWebFramewor
ksWithCoolNames.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-javascriptmvc-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

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.js
Examples

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 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 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

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

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

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

Intro to SPA using JavaScript & ASP.NET

Recommended

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to Intro to SPA using JavaScript & ASP.NET (20)

Recently uploaded (20)

Intro to SPA using JavaScript & ASP.NET