If you don't mind, I'll start by clearing some of the wordings. REST is not a protocol in itself; it is just a way to use the HTTP protocol. The REST style is especially useful for the API, as I hope you will see. When the API matches this style, it is called "RESTful." If the API you are working with is not RESTful, you will have to make many changes to Backbone.sync to make it work. I hope so!:)
HTTP protocol
I like the examples, so here is the HTTP request to get the HTML for this page:
GET /questions/18504235/understand-backbone-js-rest-calls HTTP/1.1 Host: stackoverflow.com
[Optional] If you've ever played with a command line or terminal, try running the telnet stackoverflow.com 80 command and paste it above, then press Enter a couple of times. Voila! HTML is glory in all of this.
In this example ...
GET is a method ./questions/18504235/understand-backbone-js-rest-calls is the way to go .HTTP/1.1 is a protocol .Host: stackoverflow.com - example header .
Your browser does just about the same, just with lots of headers to get the HTML for this page. Cool, yeah?
Since you are working in an interface, you have probably seen the form tag many times. Here is an example of one of them:
<form action="/login" method="post"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="submit" name="submit" value="Log In" /> </form>
When you submit this form along with the relevant data, your browser sends a request that looks something like this:
POST /login HTTP/1.1 Host: stackoverflow.com username=testndtv&password=zachrabbitisawesome123&submit=Log%20In
There are three differences between the previous and the previous.
- Now
POST - the path is now
/login . - There is an extra line called the body .
While there are many other methods, those used in RESTful applications are POST , GET , PUT and DELETE . This tells the server what type of action it should take with the data, without having to have different paths for everything.
Back to the highway
So, hopefully now you will understand a little more about how HTTP works. But how does this relate to Backbone? Let's find out!
Here is a small piece of code that you can find in the Backbone app.
var BookModel = Backbone.Model.extend({ urlRoot: '/books' }); var BookCollection = Backbone.Collection.extend({ model: BookModel , url: '/books' });
Create (POST)
Since we use the RESTful API, all the information that the Base System should be associated with must create, read, update and delete all our book information! Let's start by creating a new book. The following code should be sufficient:
var brandNewBook = new BookModel({ title: '1984', author: 'George Orwel' }); brandNewBook.save();
The backbone understands that you are trying to create a new book and know from the information that it provided in order to make the following request:
POST /books HTTP/1.1 Host: example.com {"title":"1984","author":"George Orwel"}
Reading (GET)
See how easy it was? But we want to get this information at some point. Say we ran new BookCollection().fetch() . The highway understands that you are trying to read the collection books, and she will make the following request:
GET /books HTTP/1.1 Host: example.com
Bam. It's simple. But they say that we need information for only one book. Say book number 42. Say we ran new BookModel({ id: 42 }).fetch() . The backbone sees that you are trying to read a single book:
GET /books/42 HTTP/1.1 Host: example.com
Update (PUT)
Oh my gosh, I just realized that I mis-named Mr. Orwell. Easy to fix!
brandNewBook.set('author', 'George Orwell'); brandNewBook.save();
The backbone is smart enough to know that even though it is called brandNewBook , it is already saved. Therefore, he updates the book:
PUT /books/84 HTTP/1.1 Host: example.com {"title":"1984","author":"George Orwell"}
Delete (DELETE)
Finally, you understand that the government is monitoring all your steps, and you need to bury the fact that you read 1984. It may be too late, but it never bothers to try. Thus, you run brandNewBook.destroy() , and the Backbone becomes reasonable and you understand your danger, deleting the book with the following request:
DELETE /books/84 HTTP/1.1 Host: example.com
And he left.
Other useful little things
Although we talked a lot about what we send to the server, we should probably also see what we get. Back to our book collection. If you remember, we made a GET request to /books . Theoretically, we should return something like this:
[ {"id":42,"author":"Douglas Adams","title":"The Hitchhiker Guide to the Galaxy"} , {"id":3,"author":"JRR Tolkien","title":"The Lord of the Rings: The Fellowship of the Ring"} ]
Nothing wrong. And even better, Backbone knows how to handle this out of the box. But what if we change a little? Instead of id being an identification field, was it bookId ?
[ {"bookId":42,"author":"Douglas Adams","title":"The Hitchhiker Guide to the Galaxy"} , {"bookId":3,"author":"JRR Tolkien","title":"The Lord of the Rings: The Fellowship of the Ring"} ]
Backbone gets that each API is a little different and everything is fine. All you have to do is report this idAttribute , for example:
var BookModel = Backbone.Model.extend({ urlRoot: '/books' , idAttribute: 'bookId' });
You only need to add this information to the model, since the collection still validates the model. Thus, Backbone understands your API! Even if I don’t ...
The disadvantage of this is that you must remember to use bookId in some cases. For example, when we previously used new BookModel({ id: 42 }).fetch() to load data about one book, now we must use new BookModel({ bookId: 42 }).fetch() .
I hope you find this answer informative, and not too unbearably boring. I understand that for many, the HTTP protocol and RESTful architecture are not the most exciting topics, so I tried to tweak them a bit. I can regret that when I read it all at a later point, but it's 2AM here, so I'm going to go and introduce it anyway.