In his previous webinar Maurice de Beijer demonstrated how to get started with REST services and how to use the WCF Web API to build one. But a REST service is only as useful as its clients. In this webinar Maurice will show how to use HTML5 and JavaScript to build a client for a REST service. He will demonstrate some of the problems you can expect to run into when using the browser as the client platform. And of course he will show how to solve these challenges.

1. HTML 5 and REST services
Building Rich HTML & JavaScript Clients
using REST services
Maurice de Beijer

2. Objectives
• Why build HTML client applications
• What did we cover in part 1?
– What are REST services
– The WCF Web API framework
• Using a rich .NET client
• Requesting resources in the proper format
• Loading data from the service
• Caching
• JavaScript Templates
• HTTP Methods
• Authentication

3. Why build HTML client applications
• People are using multiple different devices
– Desktop computers
– Tablets
– Smart phones
• Companies are changing
– Bring your own device is the new mantra
• Different manufacturers use different technologies
– But HTML is supported by all of them

4. What are REST services
• Representational State Transfer
• Roy Thomas Fielding
• All about resources
– CRUD style actions
• Embraces HTTP
– URLS
– MIME Media Types
– HTTP Methods
– Caching
– Security
• Enables very scalable services
– Build around the technology that powers the Internet

5. The WCF Web API framework
• On CodePlex
– http://wcf.codeplex.com/wikipage?title=WCF%20HTTP
• Use NuGet from within Visual Studio 2010
– http://nuget.org/
• Current version 0.5
• Much better than the original WCF support for REST
– But doesn’t replace it

6. Using a rich .NET client is easy
• Use the HttpClient
– Part of the WCF Web API framework
• Or use any other standard HTTP client
– The WebClient
– The HttpWebRequest
• Other environments have similar types
– HttpURLConnection in Java
– NSURLConnection in Objective C
– fopen in PHP
– urllib in Python
– ...

7. Requesting resources in the proper format
• HTTP/REST use the Accept header to specify the mime
type
• We can return the book resource as an image
– Done with a custom MediaTypeFormatter
• Some browsers prefer PNG in an <img> tag
– But will accept any image
– Use the AddMediaRangeMapping() extension method.
• Some browser will accept anything in an <img> tag
– Use the query string to specify the type.
– Use the AddQueryStringMapping() extension method.

8. Loading data from the service
• JSON is the data format of choice
– JavaScript Object Notation
• Use the XMLHTTPRequest object
– jQuery makes this very easy
• jQuery.getJSON()
– Load JSON data using an asynchronous HTTP GET request
• jQuery.ajax()
– Perform an asynchronous HTTP (Ajax) request
– Uses an options object that configure the Ajax request

9. Caching
• Caching can make a service much more scalable
– REST services can use the standard HTTP caching infrastructure
• Some browsers cache results by default
– Use $.ajax() with {cache: false}
– Even better is to control caching.
• set the response.Headers.CacheControl

10. JavaScript Templates
• Creating HTML elements in JavaScript can be tedious
• Templates can make a rich UI much easier
• JavaScript Micro-Templating
– By John Resig, the inventor of jQuery
• Underscore library template
– _.template()
• jQuery UI is working on a jQuery standard plugin

11. HTTP Methods
• GET and POST are no problem
• PUT and DELETE are not supported in most browsers
– When used as a <form> method
– Not part of the HTML specifications
– Works fine with $.ajax() with type: ‘put’
• Sometimes firewalls also block PUT and DELETE
– Use HTTP Method tunneling
– Pus the method in the X-HTTP-Method-Override HTTP header
– Use the HttpMethodTunnelChannel from WCF Web API Contrib

12. Authentication
• Lots of different options
– OAuth
– Basic authentication
– Intergrated autentication
• Return a 401 – Unauthorized
– When a client needs to provide credentials
• The FormsAuthenticationModule intercepts the 401
– The browser receives a 307 - Redirect to the login page
– See: Prevent Forms Authentication Login Page Redirect When You
Don’t Want It by Phil Haack

13. Useful resources 1
• jQuery
http://jquery.com/
• jQuery UI
http://jqueryui.com/
• JavaScript Micro-Templating
http://ejohn.org/blog/javascript-micro-templating/
• Underscore.js
http://documentcloud.github.com/underscore/
• Modernizr
http://www.modernizr.com/

14. Useful resources 2
• Essential Windows Communication Foundation 4 Training
– http://www.develop.com/training-course/windows-
communication-foundation-wcf
• Hypertext Transfer Protocol -- HTTP/1.1
– http://tools.ietf.org/html/rfc2616
• The Atom Syndication Format
– http://tools.ietf.org/html/rfc4287
• The Atom Publishing Protocol
– http://tools.ietf.org/html/rfc5023
• Open Data Protocol (OData)
– http://www.odata.org
• WCF Web API Contrib
– http://webapicontrib.codeplex.com
• Fiddler
– http://www.fiddler2.com

15. Summary
• HTML/JavaScript clients are important
– You can no longer depend on Windows as the client
• The browsers isn’t as smart as you would expect
– Accepts anything as the source in an image element
– Form elements only support GET and POST
– Caching of requests depends on the browsers
• Sometimes ASP.NET isn’t as smart as we would like
– Changes a 401 – Unauthorized to a 307 – Redirect
• jQuery and jQuery UI are extremely useful
– Don’t forget about Underscore.js and Modernizr