Backbone.js and CakePHP

Question

I'm interested in implementing Backbone.js for some of the more repetitive in-page CRUD structures in our application (which is built on the CakePHP framework). I've been trying to get a hold on Backbone while figuring out how it would work in conjunction with Cake, and I"m a bit lost when it comes to separating the duties of the two sides.

Am I trying to jimmy something into my site that doesn't need to be there? Is there precedence for this kind of stack structure? I'm all ears at this point.

Answer 1

I'm actually working through the same situation right now (though with Python/Flask, but the same concepts should apply to any serverside language). Here is how the workflow for a page goes in my application. Just a note that I do NOT follow the single page application format; in my app, each major page is a full reload.

1. User requests a page, say a list of companies, /companies/listing/
2. Server does the routing, loading the correct controller
3. Controller loads first X companies from DB
4. Companies are encoded as JSON
5. Other meta data is loaded (such as total number of companies) and turned into JSON
6. The list page template is loaded and the JSON popped into a <script> tag within the template. Note here I do not fill in the listing table or anything along those lines, I let Backbone do all of that. I fill in the JSON here so the client doesn't have to make a second request for the initial set of companies
7. The list page is sent to the client. The server is done for now
8. The client has all the data it needs to start, so I take the JSON and pass it to my Backbone.View for the listing page
9. The view creates a collection for the models and manages a set of sub-views that represent the entries in the list
10. Any other processing/view creation happens such as the creation of pages, prev/next buttons, etc.
11. If the user clicks to the next page of companies, I fire an AJAX query to the server (/companies/listing/page/1 or something) which returns a new JSON string with a new set of models
12. Send the new set of models to my Backbone.View which refreshes everything

So really, the server is used for nothing but the actual loading of data, and the initial send of the template. I like this because it'll allow me to easily hook up new frontends (say, an iPad app or something).

For a form, in really broad strokes, I do something like this:

1. User requests form, /companies/edit/1
2. Server does permissions checking, loads entry, sends template/JSON to client. Server does not fill out the form with the data
3. Client uses JSON to fill out the form
4. Client modifies form, hits submit
5. All of their changes are applied to the model, the model is turned into JSON and sent to the server using AJAX
6. Server does validation and either sends error messages (in JSON) to client or updates the database and sends a success message

So, again, those are really broad strokes on how I've done it. In general, I use the server to grab data from the database, do server side validation (can't trust the client heh), and update the database.

If you have some specific questions, I'd be happy to try to share what I've learned so far.