book review backbone marionette

Sat, Jan 18, 2014

To set the scene for this review, I must explain something. I’m a middleware developer in the main, although I like to code side projects for iOS and Android but for the most part, I work with backend data and systems. Plumbing applications together with COM, REST, SOAP and all that jazz. ERB templates in Rails are fine but the client side of things has largely been a ‘here be dragons’ type of thing.

All that HTML/CSS/Javascript malarkey, browser (in)compatibility and getting data in and out of the server. It’s always been a bit of a mystery and every time I’ve looked into it, it’s been a maelstrom of opinions, spaghetti code and framework overload.

Protocols, domain models on the wire, obscure APIs from the land of integration. Not a problem but I’ve always admired elegant browser based apps and wondered how on earth do they do that? Wondered that is, until now.

With a requirement to add a user interface to a Blackboard integration project I’m working on I decided to take the plunge and learn a client side framework and it turned out that the Backbone/Marionette combo was the cleanest and it seemed to fit well with my Spring MVC experience and my GOTO publisher, The Pragmatic Bookshelf had just the book. Backbone Marionette by David Sulc. Also available direct from Leanpub here.

The book is quite simply, superb. Assuming no knowledge of anything to do with the client side (hoorah!) it takes you from first principles to a working, structured, Javascript Single Page Application and not a line of spaghetti code anywhere.

You’ll learn how to apply MVC in the browser. How to update page parts independently using triggers and events that bubble up from views to controllers and round by models. How to create dialogs and manage the URL and I was delighted David dealt with my bugbear, the brittle browser app where you can’t bookmark anything. In this book you’ll learn to encode state in the URL so anything can be bookmarked using proper REST URLs and the Back button will be your friend. Unlike some apps I’ve had to work with where using the Back button resulted in a mess that only closing the browser could save you from.

I found the approach to the topic well paced and David took the approach of a sculptor. Each chapter starts with building in a blob of functionality, a concrete block of code if you will and then proceeds by iterating over it, cleaning it up, making it more efficient, explaining things along the way. So what you get is a solid understanding of the new functionality, for example triggers and events and once you’ve got your head round that, you see how to apply best practices to the design.

So rather than overwhelm you with design first, you get the raw input and the process of applying that design, which is really good for understanding what’s going on. It really is like watching a sculptor at work. Starting from a concrete block, literally and watching a form emerge that you recognise and then marvelling as it’s slowly worked into the finished design. A really nice way of doing things.

I liked the way Twitter Bootstrap was used too. I looked at this once and ran a mile. Thousands of options but David uses only those that matter and it helps greatly to demystify the CSS side of things. Same thing for JQuery. It’s used in context and explained simply and easily.

Normally when I’m following along with code in a book, I’ll diverge, even if it’s just to use a different domain model. I find it helps expand the learning possibilities. So I followed along but applied the techniques to the project I’m working on, which involved course creation in Blackboard, so once I’d got my head round the contacts app in the first few chapters I stopped at the local storage chapter.

At that point I had a review of what was going on and refactored the whole lot to use courses instead of contacts. I also decided to skip the local storage chapter as I wanted to see how to interact with a server to work with the model. So I took an hour out and knocked up a Spring application with a simple course model and bunged it in Tomcat. I then modified the client code to use the correct urls for fetching/saving and at that point a very large light went on!

I was now a client side developer. I couldn’t believe what was happening. Thanks to this book I’d reached the stage of not only understanding a large (for me) Javascript app but was refactoring and adding new functionality. The backend was simples. It’s what I do. Backends and integration but I was getting far enough into the book that I’d found a real problem. Well it seemed a pretty big problem to me anyway. It wasn’t to do with the book. It was Backbone’s documentation.

According to the docs, if a model says its isNew() is true then Backbone will issue a POST request to the server to create a new model object. This isn’t strictly correct. If the form data sent to the server contains anything that Backbone thinks is an ‘id’ attribute, it will issue a PUT request instead, even if isNew() is true. This happens even if you use ‘idAttribute’ in the model. At this point I fell off my chair at the depth I was digging. This client side stuff was really, really, no I mean REALLY interesting!

Another issue I had was not allowing the client to edit a Course code attribute as these are set by the user once and can never change. So that led me down more intellectual alleyways until I found a solution. Of course, none of this is in the book. It’s just what the book allowed me to do. It gave me the knowledge and confidence to tackle some simple design on my own.

After skipping the local storage chapter I continued but with my own courses application which made me think that bit deeper about how events were bubbling around but the clear descriptions in the book made that easy.

Sub applications, dialogs, event refactoring, all explained brilliantly. I was really enjoying this book. And then I reached the end.

At that point I tidied up what I had and put it on github in case anyone reading this would like a server side REST service to use with their models. You can get it here.

Since then, I’ve reviewed the code just to solidify my understanding of the wiring between models, views and controllers as it’s very different from a traditional server side MVC framework like Spring.

And the good news is, I’ve just bought David’s follow on book, Structuring Backbone Code with RequireJS and Marionette Modules which will let me refactor into a production ready client side application. Happy Days!

Back in my commercial programming days, I went on lots of courses and they always asked you at the end whether the course would help you in your day to day work. Largely they were of some help but with David’s book I can wholeheartedly say it was an immense help. Pitched at the perfect level it took a grisly middleware digital plumber out of his binary cave and into the vast open plains of the client landscape. I thoroughly enjoyed it!

comments powered by Disqus