REST and AJAX Reconciled

Slide 1: REST and AJAX reconciled Lars Trieloff at AJAX World East 2008

Slide 2: What is REST?

Slide 3: What is REST? • Buzzword

Slide 4: What is REST? • Buzzword • Alternative to SOAP

Slide 5: What is REST? • Buzzword • Alternative to SOAP • Representational State Transfer

Slide 6: What is REST? • Buzzword • Alternative to SOAP • Representational State Transfer • Architecture of the World Wide Web

Slide 7: What is REST? • Buzzword • Alternative to SOAP • Representational State Transfer • Architecture of the World Wide Web • Architecture for Scalable Network Applications

Slide 8: How do we start? • Introduction • Core Concepts • REST Clients • AJAX REST Clients • REST Frameworks • REST Frameworks for AJAX

Slide 9: Things are Resources Resource Resources can be items of information (a blog entry) or or informational descriptions of real things (a blog author)

Slide 10: Resources have URIs Resource URI Uniform Resource Identifier are unique ids for resources, just like ISBN for a book or a driver’s license for a person

Slide 11: Resources have Representations Representation Resource Representation URI Representations can have different formats (HTML, XML, JSON) or show different aspects of a resource.

Slide 12: Representations have URLs URL URL Representation Resource Representation URI Uniform Resource Locators describe how to get to a representation of a resource, they include protocol, hostname, path and extra information

Slide 13: Clients interact via Verbs GET URL POST PUT URL DELETE Representation Resource Representation URI Uniform Resource Locators describe how to get to a representation of a resource, they include protocol, hostname, path and extra information

Slide 14: GET is for reading GET Representation Representation Resource Resource Before After GET is a “safe” method. There are no side-effects, and the requested resource stays unmodified.

Slide 15: PUT is for replacing PUT Representation Representation Resource Resource Before After PUT is a “idempotent” method. Issuing the same PUT request multiple times yields the same result.

Slide 16: DELETE is for deleting DELETE Representation Resource Before After DELETE is also “idempotent”. Deleting a resource twice yields the same result - the resource is gone.

Slide 17: POST is for action POST Representation Representation Representation Resource Resource Resource Before After POST is neither safe nor idempotent. It is used for updating, creating and executing resources.

Slide 18: So what? • There are unlimited resources • Every resource can be addressed • There are only four verbs • Resources have an uniform interface This makes it easy to write clients for existing REST applications and makes it easy to expose a RESTful interface to an application.

Slide 19: How do we go on? • Introduction • Core Concepts • REST Clients • AJAX REST Clients • REST Frameworks • REST Frameworks for AJAX

Slide 20: What are REST Clients • Libwww • Microsoft Internet Explorer • Apache Commons HTTPClient • Mozilla Firefox • Python httplib • Apple Safari • Ruby Net::HTTP • Opera

Slide 21: HTTP Client Libraries + Full HTTP Support + Desktop Applications +Server-side mashups - Not in the web browser

Slide 22: Web Browsers as HTTP Clients + No client needed +Everywhere installed - Weak HTTP Support - Web Forms 1.0 - Browser Bugs

Slide 23: Web Forms 1.0 <form action=\"/blog\" method=\"POST\" > enctype=\"application/x-www-form-urlencoded\" label> <label for=\"title\">Title</ > <input type=\"text\" name=\"title\" <label for=\"text\">Entry</label> <textarea name=\"text\"> </textarea> <input type=\"submit\"> </form>

Slide 24: Web Forms 1.0 w do I e But ho chang <foally icrmction=g/bt og\" dynam ioan (tar\" e l the act me) hofdthPe ST\"ication/x-www-form-urlencoded\"> t =\" O rcee coype=\"appl resou n t? foabm for=\"title\">Title</label> <l r el > <input type=\"text\" name=\"title\" <label for=\"text\">Entry</label> <textarea name=\"text\"> </textarea> <input type=\"submit\"> </form>

Slide 25: Web Forms 1.0 Why w do I e But ho chang and P do only <foally work OST m GET icrmction=g/bt og\" dynam ioan (tar\" e l and P ethods DELET the act me) hofdthPe ST\"ication/x-www-formEuarencoUeda>nd t =\" O oype=\"appl T\" sourcee ct ignore - rle d re n d? fo rm? \"title\">Title</label> <label for= > <input type=\"text\" name=\"title\" <label for=\"text\">Entry</label> <textarea name=\"text\"> </textarea> <input type=\"submit\"> </form>

Slide 26: Web Forms 1.0 Why w do I e But ho chang and P do only <foally work OST m GET icrmction=g/bt og\" dynam ioan (tar\" e l and P ethods DELET the act me) hofdthPe ST\"ication/x-www-formEuarencoUeda>nd t =\" O oype=\"appl T\" sourcee ct ignore - rle d re n d? fo rm? \"title\">Title</label> <label for= > type=\"text\" name=\"title\" <input <label How do I specify a for=\"text\">Entry</label> different <textarea name=\"text\"> </textarea> encoding, for <input type=\"submit\"> </form> example XML or JSON?

Slide 27: Solutions: • Changing the action dynamically: URI Templates • Other Methods than POST and GET: Web Forms 2.0 • More advanced encodings: Web Forms 2.0 http://bitworking.org/projects/URI-Templates/ http://www.whatwg.org/specs/web-forms/current-work/

Slide 28: Solution for now: making browsers better HTTP clients using AJAX

Slide 29: Where are we now? • Introduction • Core Concepts • REST Clients • AJAX REST Clients • REST Frameworks • REST Frameworks for AJAX

Slide 30: With AJAX we can • get data-only (JSON) representations of web pages in the background • Overload Web Forms 1.0 behavior, and make them 2.0 • issue data-only (JSON) HTTP requests to these very resources

Slide 31: Getting alternate Representations <head> tle> <title>REST and AJAX</ti =\"text/json\"> <link rel=\"alterna te\" href=\"this.json\" type cript\"> <script type=\"text/javas function initRest() { TagName(\"link\"); var links = document.getElementsBy ntries\"); var entries = do cument.getElementById(\"e for (link in links) { nate\") { if (links[link].rel==\"alter list of entries //pull data and populate entries with a } } } </script> </head> \"> <body onload=\"initRest() <ul id=\"entries\"> </ul> </body>

Slide 32: Overloading Forms \" <form a ction=\"/blog method=\"PUT\" enctype= \"text/json\" urn false;\"> orm(this);ret ons ubmit=\"RESTF Title</title> <label for=\"title\"> it le</label> <label f or=\"title\">T n ame=\"title\"> <input type=\"text\" > > Entry</label <labe l for=\"text\" <textarea name=\"text\"> </textarea> <input typ e=\"submit\"> </form>

Slide 33: Data-only requests function RESTForm(fo rm) { var json = \"{\" + \"title: \" + form.tit le.value +\", \" + \"text: \" + form.text .value + \"}\"; var xmlhttp = (windo w.XMLHttpRequest) ? new XMLHttpRequest() : ActiveXObject(\"Micro soft.XMLHTTP\"); xmlhttp.open(form.me thod, form.action); xmlhttp.send(json); }

Slide 34: Planning RESTful AJAX applications 1. Define the domain model 2. Define Resources, Resource Types and URIs 3. Define Representations for Resources 4. Define POST behavior

Slide 35: Watch out! common pitfalls and how to cope with them • Problem: Some browsers do not support PUT or DELETE requests, even as XHR • Solution: Wrap your PUT or DELETE Request in a POST request and add the X- HTTP-Method-Override Header

Slide 36: Watch out! common pitfalls and how to cope with them • Problem: Some browsers do not handle 301 or 302 response codes for redirects properly • Solution: Define a format for redirection messages that wraps headers such as Location and Status codes in JSON

Slide 37: What is next? • Introduction • Core Concepts • REST Clients • AJAX REST Clients • REST Frameworks • REST Frameworks for AJAX

Slide 38: Framework Checklist frameworks can help getting the job done • Resource-based approach? • having something like /action/view/1 is a warning sign • Acknowledges existence of Representations? • you need multiple representations • Solid engineering, community, support? • without, you can do it on your own

Slide 39: Framework Examples frameworks that can help getting the job done • Apache Cocoon • based on XML pipelines, URL patterns, selectors • RESTlet • Like Servlets for REST. Good for existing models • Apache Sling • based on JCR, a database for resources, with server- side scripting support

Slide 40: How do we go on? • Introduction • Core Concepts • REST Clients • AJAX REST Clients • REST Frameworks • REST Frameworks for AJAX

Slide 41: Sling with µjax • Exposes the complete JCR repository (Resource Database) as JSON tree • API for reading, creating, writing, deleting and moving Resources • Stand-alone Javascript library, plays nicely with your framework • Extra: Dojo Toolkit Integration

Slide 42: µjax Core Principles I browser & ujax.js reading: json & resource GET’s writing: form-POST & GET s s J2EE Web Server 3 2 Browser I 2 UjaxServlet.java translating requests to JCR calls 3 JCR Compliant Content Repository

Slide 43: µjax Core Principles I browser & ujax.js reading: json & resource GET’s writing: form-POST & GET s s J2EE Web Server 3 2 Browser I very simple js A 2 UjaxServlet.java translating requests read content, FoPI to to JCR calls r to write contenms t 3 JCR Compliant Content Repository

Slide 44: µjax Core Principles I browser & ujax.js reading: json & resource GET’s writing: form-POST & GET s s J2EE Web Server 3 2 handles all the h particularly se eavy lifting, curity Browser I 16 t ons very simple js A 2 UjaxServlet.java translating requests read content, FoPI to to JCR calls r to write contenms t 3 JCR Compliant Content Repository

Slide 45: Never leave without screenshots resource or http://l iented urls integration dojo widget ocalhost :7402/my data/ent ries.lis t.html

Slide 46: Never leave without screenshots dojo widget integration

Slide 47: What we heard today • Introduction • Core Concepts • REST Clients • AJAX REST Clients • REST Frameworks • REST Frameworks for AJAX

Slide 48: Thank you very much lars.trieloff@day.com For more information, see my weblog at http://weblogs.goshaky.com/weblog/lars