• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building rich HTML 5 clients using REST services
 

Building rich HTML 5 clients using REST services

on

  • 25,746 views

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

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.

Statistics

Views

Total Views
25,746
Views on SlideShare
24,560
Embed Views
1,186

Actions

Likes
6
Downloads
108
Comments
1

9 Embeds 1,186

http://msmvps.com 1102
http://feeds.feedburner.com 38
http://html5support.nl 21
http://raidproof8.tawaba.com 18
http://localhost 3
http://cc.bingj.com 1
http://www.dataclips.com 1
http://com-lab.biz 1
http://www.html5support.nl 1
More...

Accessibility

Categories

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.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • To further simply RESTful API consumption with jQuery try this plugin: https://github.com/jpillora/jquery.rest#basic-usage
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Building rich HTML 5 clients using REST services Building rich HTML 5 clients using REST services Presentation Transcript

    • 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