Building rich HTML 5 clients using REST services

HTML 5 and REST servicesBuilding Rich HTML & JavaScript Clientsusing REST servicesMaurice de Beijer

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

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

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

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

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 – ...

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.

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

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

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

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

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

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/

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

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

http://msmvps.com	1029
http://feeds.feedburner.com	38
http://html5support.nl	10
http://raidproof8.tawaba.com	9
http://localhost	3
http://cc.bingj.com	1
http://www.dataclips.com	1

Building rich HTML 5 clients using REST services

by Maurice Beijer on Oct 26, 2011

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 1,091

Statistics

Building rich HTML 5 clients using REST services Presentation Transcript