Intro to SPA using JavaScript & ASP.NET


Published on

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Intro to SPA using JavaScript & ASP.NET

  1. 1. Intro to Single Page Applications Using JavaScript and ASP.NET Alan Hecht
  2. 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. 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. 4. Architectural Overview Browser - Web App HTML / CSS / JS Navigation / AJAX UI HTML / CSS / JS AJAX REST API - JSON Business Logic
  5. 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. 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
  7. 7. Async JavaScript Example
  8. 8. AJAX • Asynchronous JavaScript and XML (now use JSON instead of XML) • Browser makes an asynchronous HTTP request, callback function is called upon completion
  9. 9. REST •Representational State Transfer •Building your web API using HTTP instead of on top of HTTP (like SOAP)
  10. 10. REST •Four HTTP verbs used: GET, PUT, POST, and DELETE •Use URL path segments instead of query parameters or payload data
  11. 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. 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
  13. 13. JSON Example
  14. 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. 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
  16. 16. Client Side JavaScript MVC Frameworks Just pick one…
  17. 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. 18. 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
  19. 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:
  20. 20. • 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
  21. 21.
  22. 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. 23. Marionette.js • Built off of backbone.js • Reduces boilerplate code, especially in the views • Can be incorporated piecemeal
  24. 24. Backbone.js & Marionette.js Examples
  25. 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. 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
  27. 27. Ember.js Example
  28. 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. 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. 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)
  31. 31. Angular.js Example
  32. 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. 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. 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
  35. 35. Knockout.js – Example
  36. 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
  37. 37. Ext.js - Example
  38. 38. Dojo • Toolkit for building desktop-like applications • Extensive HTML widgets • Documentation not so great • First stable release back in 2007
  39. 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. 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. 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. 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. 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
  44. 44. ASP.NET Web API - Example
  45. 45. Issues
  46. 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. 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