Intro to SPA using JavaScript & ASP.NET
Upcoming SlideShare
Loading in...5

Intro to SPA using JavaScript & ASP.NET






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Intro to SPA using JavaScript & ASP.NET Intro to SPA using JavaScript & ASP.NET Presentation Transcript

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