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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,948
On Slideshare
6,948
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 7. Async JavaScript Example
  • 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. REST •Representational State Transfer •Building your web API using HTTP instead of on top of HTTP (like SOAP)
  • 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
  • 13. JSON Example
  • 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
  • 16. Client Side JavaScript MVC Frameworks Just pick one…
  • 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
  • 21. TodoMVC.com
  • 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
  • 24. Backbone.js & Marionette.js Examples
  • 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
  • 27. Ember.js Example
  • 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)
  • 31. Angular.js Example
  • 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
  • 35. Knockout.js – Example
  • 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. Ext.js - Example
  • 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
  • 44. ASP.NET Web API - Example
  • 45. Issues
  • 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