Pete Forde Partner, Unspace Interactive Toronto, ON

Size: px

Start display at page:

Download "Pete Forde Partner, Unspace Interactive Toronto, ON"

June Ryan
5 years ago
Views:

1 Building Rich JavaScript Database Applications with Jester QuickTime and a TIFF (Uncompressed) decompressor are needed to see this picture. Pete Forde Partner, Unspace Interactive Toronto, ON What is it? REST, in JavaScript. Jester is a JavaScript implementation of REST, modeled after ActiveResource. You can use it to read, create, and save your application s data in your browser-side code. Who made it? Eric Mill, an improv comedian who works at ThoughtBot in Boston. Where do I get it? Why do I care? I believe that Jester is a breakthrough technology that could facilitate a whole new style of development that would be familiar to anyone who has ever worked in a form-driven IDE such as Visual Basic or Access. That s a big claim. I came to TAE to implore the early adopters to experiment with Jester, and discuss it in their blogs. When you stop to realize that you can manipulate a fully associated object or an array of them in the client, you will start to see that a whole class of applications is suddenly easy to visualize and build.

2 Until recently, VB was the most popular development product in history. Jester has a business case that the current excitement around client side persistent applications in AIR, Silverlight and Slingshot lacks. Syntax All examples below are taken from inside the JavaScript console of Firebug, the best JavaScript development tool you could possibly have. First, declare a model in Jester by calling model on Base: >>> Base.model("User") >>> User This creates a global variable called User. It assumes that the URL prefix it uses to base its HTTP requests from is the current domain and port, and assumes user and users as single and plural forms to make these URLs. There s no people/person intelligence here, so make sure to override these defaults if you need to, like so: >>> Base.model("Child", " "child", "children") >>> Child Object _name=child _singular=child _plural=children If you want to capture the model created in a local variable, or simply prefer more traditional JavaScript syntax, you can do: >>> var Child = new Base("Child", " " "children") >>> Child Object _name=child _singular=child _plural=children Find will retrieve a particular instance of your model. Attributes are autoconverted to integer or boolean types if that s what they are on the server side. The GET line is not a return value, just Firebug s report of activity, but relevant to understanding what s happening. >>> eric = User.find() GET >>> eric.attributes ["active", " ", "id", "name"] >>> eric.id

3 0 >>> eric.name "Eric Mill" >>> eric.active Create takes a hash of attribute values. After calling create, the model will fetch its new ID from the return headers. 0 >>> floyd = User.create({name: "Floyd Wright", "tfwright@thoughtbot.com"}) POST >>> floyd.id >>> User.find().name GET "Floyd Wright" Updating is as simple as changing one of the properties and calling save. 0 >>> eric = User.find() GET >>> eric. "emill@thoughtbot.com" >>> eric. = "sandybeach@wintermute.com" "sandybeach@wintermute.com" >>> eric.save() POST >>> User.find(eric.id). GET "sandybeach@wintermute.com" Sadly, there s one area where Jester s syntax can t match ActiveResource s perfectly. The method new has been renamed to build, due to new being an illegal method name in JavaScript up to.. Hopefully this can be updated as the browser landscape evolves. Build was chosen because it is similarly used in ActiveRecord to replace new on an association array, where new cannot be used. >>> chad = User.build({ "cpytel@thoughtbot.com", name: "Ch Pytel"})

4 0 >>> chad.new_record() >>> chad.save() POST >>> chad.id >>> chad.new_record() false Error validations are supported. If a model fails to save, save returns false, and the model s errors property is set with an array of the error messages returned. 0 0 >>> jared = User.build({name: "", ""}) >>> jared.save() POST false >>> jared.errors ["Name can't be blank", " can't be blank"] >>> jared.valid() false >>> jared.name = "Jared Carroll" "Jared Carroll" >>> jared. = "emill@thoughtbot.com" "emill@thoughtbot.com" >>> jared.save() POST false >>> jared.errors [" has already been taken"] >>> jared. = "jcarroll@thoughtbot.com" "jcarroll@thoughtbot.com" >>> jared.save() POST Lastly, associations are also supported. If the association data is included in the XML, they ll be loaded into the returned model as Jester models of their own, using the same assumptions on naming and URL prefix described above.

5 They re full models, so you can edit and save them as you would the parent. Has_many relationships come back as simple arrays, has_one relationships as a property. In this example, User has_many :posts, and Post belongs_to :user. 0 0 >>> eric = User.find() GET >>> eric.posts [Object _name=post _singular=post _plural=posts, Object name=po >>> eric.posts.first().body "Today I passed the bar exam. Tomorrow, I make Nancy my wife." >>> eric.posts.first().body = "Today I *almost* passed the bar e day." "Today I *almost* passed the bar exam. The ring waits one more d >>> eric.posts.first().save() POST >>> post = Post.find() GET Object _name=post _singular=post _plural=posts >>> post.body "Today I *almost* passed the bar exam. The ring waits one more d >>> post.user >>> post.user.name "Eric Mill" Using Jester Jester deps on two libraries: Prototype, which comes with Rails and most people are familiar with, and ObjTree, a nice DOM parsing engine for JavaScript. Both of these are packaged along with Jester in its SVN repository, so you don t have to hunt for them yourself. Just make sure you re including all three in your test file. <script type="text/javascript" src="/javascripts/prototype.js"></script> <script type="text/javascript" src="/javascripts/objtree.js"></script> <script type="text/javascript" src="/javascripts/jester.js"></script> JavaScript in the browser is limited to requests with in only the same domain as

6 the script is running in, so without iframe hackery, Jester is probably only useful for writing client code in your own apps, to talk to itself. We re investigating whether Jester can use this hackery to make cross-domain requests, but it s not clear if this will be feasible. There are also some basic unit tests included inside Jester s repository, which run using JsUnit. To run them yourself, from Jester s repository open the file test/jsunit/testrunner.html in your browser, and choose test/jester_test.html as the test file. The Server Side These examples are talking with a Rails application whose controllers were generated with./script generate scaffold_resource in other words, the ideal RESTful controllers. It s very easy to make your controller RESTful. Here s the source for the User controller I m using. The lines that deal with returning HTML have been removed, and I have added (:include => :posts) as an argument to to_xml in two places, so associations are included (it s that easy!). class UsersController < ApplicationController # GET /users.xml def = User.find(:all) format.xml { rer :xml => :p }

7 # GET /users/.xml def = User.find(params[:id]) format.xml { rer :xml => :po # POST /users.xml def = User.new(params[:user]) format.xml { head :created, :location => user_url(@use else format.xml { rer :xml } # PUT /users/.xml def = User.find(params[:id]) format.xml { head :ok } else format.xml { rer :xml } # DELETE /users/.xml def = format.xml { head :ok } An example of the XML produced here, of a User with one Post, at /users/.xml: <user> <active type="boolean"></active>

8 <id type="integer"></id> <name>chad Pytel</name> <posts> <post> <title>life as a Jester</title> <body>it's not as hard as Master said it would be. Today I made 00 dollars.</body> <created-at type="datetime">00-0-0t0:0:- 0:00</created-at> <id type="integer"></id> <user-id type="integer"></user-id> </post> </posts> </user>

Pete Forde Partner, Unspace Interactive Toronto, ON January 9, 2007

TIFF (Uncompressed) decompressor are needed to see this picture. QuickTime and a TIFF (Uncompressed) decompressor are needed to see this picture. Pete Forde Partner, Unspace Interactive Toronto, ON January