Unblocking The Main Thread Solving ANRs and Frozen Frames
Intro to SPA using JavaScript & ASP.NET
1. Intro to Single Page
Applications Using
JavaScript and ASP.NET
Alan Hecht
2. 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.
3. 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
4. Architectural Overview
Browser - Web App
HTML / CSS / JS
Navigation /
AJAX
UI
HTML / CSS / JS
AJAX
REST API - JSON
Business Logic
5. 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
6. 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
8. AJAX
• Asynchronous JavaScript and XML (now use
JSON instead of XML)
• Browser makes an asynchronous HTTP
request, callback function is called upon
completion
10. REST
•Four HTTP verbs used: GET, PUT, POST, and
DELETE
•Use URL path segments instead of query
parameters or payload data
11. 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
12. JSON
• JavaScript Object Notation
• Collection of key-value pairs and lists of keyvalue pairs
• Has replaced XML as a data format because
of simplicity
14. 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)
15. 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
17. 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
18. 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
19. 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/
20. 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
22. Backbone.js
•Contains the minimal set of models, collections,
views, and URL functionality needed to build a
web application
•Good for experienced JavaScript developers
23. Marionette.js
• Built off of backbone.js
• Reduces boilerplate code, especially in the
views
• Can be incorporated piecemeal
25. 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
26. 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
28. 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.
29. 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.
30. 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)
32. 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.
33. 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
34. 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
36. 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
38. Dojo
• Toolkit for building desktop-like applications
• Extensive HTML widgets
• Documentation not so great
• First stable release back in 2007
39. 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
40. 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.
41. 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
42. 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.)
43. 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
46. 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
47. 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