www.it-ebooks.info Developing Backbone.js Applications Addy Osmani Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo www.it-ebooks.info Developing Backbone.js Applications by Addy Osmani Revision History for the : 2012-04-19 Early release revision 1 See http://oreilly.com/catalog/errata.csp?isbn=9781449328252 for release details. ISBN: 978-1-449-32825-2 1335306849 www.it-ebooks.info Table of Contents Prelude .................................................................... vii 1. Introduction ........................................................... 1 Fundamentals 2 MVC, MVP & Backbone.js 2 MVC 2 Smalltalk-80 MVC 2 MVC As We Know It 3 Models 4 Views 5 Controllers 8 Controllers in Spine.js vs Backbone.js 8 What does MVC give us? 10 Delving deeper 10 Summary 11 MVP 11 Models, Views & Presenters 11 MVP or MVC? 12 MVC, MVP and Backbone.js 13 Fast facts 15 Backbone.js 15 2. The Basics ............................................................ 17 What is Backbone? 17 Why should you consider using it? 17 The Basics 17 Models 18 Views 21 Creating new views 21 What is el? 22 Collections 23 iii www.it-ebooks.info Underscore utility functions 25 Routers 25 Backbone.history 27 Namespacing 27 What is namespacing? 28 Additional Tips 31 Automated Backbone Scaffolding 31 Is there a limit to the number of routers I should be using? 32 Is Backbone too small for my application’s needs? 32 3. RESTful Applications .................................................... 33 Building RESTful applications with Backbone 33 Stack 1: Building A Backbone App With Node.js, Express, Mongoose and MongoDB 33 Reviewing the stack 33 Practical 34 Practical Setup 40 Building Backbone.js Apps With Ruby, Sinatra, MongoDB and Haml 42 Introduction 42 What Is Sinatra? 42 Getting Started With Sinatra 43 Templating And HAML 45 MongoDB Ruby Driver 47 Getting started 47 Practical 48 Installing The Prerequisites 48 Tutorial 50 Conclusions 57 4. Advanced ............................................................. 59 Modular JavaScript 59 Organizing modules with RequireJS and AMD 59 Writing AMD modules with RequireJS 60 Keeping Your Templates External Using RequireJS And The Text Plugin 63 Optimizing Backbone apps for production with the RequireJS Optimizer 65 Practical: Building a modular Backbone app with AMD & RequireJS 67 Overview 67 Markup 68 Configuration options 69 Modularizing our models, views and collections 70 Decoupling Backbone with the Mediator and Facade patterns 75 Summary 75 Practical 76 iv | Table of Contents www.it-ebooks.info Paginating Backbone.js Requests & Collections 82 Paginator’s pieces 83 Downloads And Source Code 83 Live Examples 84 Paginator.requestPager 86 1. Create a new Paginated collection 86 2: Set the model and base URL for the collection as normal 86 3. Map the attributes supported by your API (URL) 87 4. Configure the default pagination, query and sort details for the pag- inator 87 5. Finally, configure Collection.parse() and we’re done 88 Convenience methods: 89 Paginator.clientPager 89 1. Create a new paginated collection with a model and URL 89 2. Map the attributes supported by your API (URL) 90 3. Configure how to paginate data at a UI-level 90 4. Configure the rest of the request parameter default values 90 5. Finally, configure Collection.parse() and we’re done 91 Convenience methods: 91 Views/Templates 91 Backbone & jQuery Mobile 94 Resolving the routing conflicts 94 Practical: A Backbone, RequireJS/AMD app with jQuery Mobile 95 Getting started 95 jQuery Mobile: Going beyond mobile application development 96 5. Unit Testing ........................................................... 99 Unit Testing Backbone Applications With Jasmine 99 Introduction 99 Jasmine 99 Suites, Specs & Spies 101 beforeEach and afterEach() 104 Shared scope 104 Getting setup 105 TDD With Backbone 105 Models 105 Collections 108 Views 110 Initial setup 111 View rendering 113 Rendering with a templating system 116 Conclusions 118 Exercise 118 Table of Contents | v www.it-ebooks.info Further reading 118 Unit Testing Backbone Applications With QUnit And SinonJS 119 Introduction 119 QUnit 119 Getting Setup 119 Assertions 120 Adding structure to assertions 124 Assertion examples 125 Fixtures 127 Asynchronous code 129 SinonJS 130 What is SinonJS? 130 Stubs and mocks 133 Practical 135 Models 135 Collections 137 Views 138 Events 139 App 141 Further Reading & Resources 142 6. Resources ........................................................... 143 7. Conclusions .......................................................... 145 vi | Table of Contents www.it-ebooks.info Prelude Welcome to my (in-progress) book about the Backbone.js framework for structuring JavaScript applications. It’s released under a Creative Commons Attribution-Non- Commercial-ShareAlike 3.0 Unported license meaning you can both grab a copy of the book for free or help to further improve it. I’m very pleased to announce that this book will be out in physical form in a few months time via O’Reilly Media. Readers will have the option of purchasing the latest version in either print or a number of digital formats then or can grab a recent version from this repository. Corrections to existing material are always welcome and I hope that together we can provide the community with an up-to-date resource that is of help. My extended thanks go out to Jeremy Ashkenas for creating Backbone.js and these members of the com- munity for their assistance tweaking this project. I hope you find this book helpful! vii www.it-ebooks.info www.it-ebooks.info CHAPTER 1 Introduction As JavaScript developers, we are at an interesting point in time where not only do we have mature solutions to help organize the JavaScript powering our applications based on a separation of concerns, but developers looking to build non-trivial projects are almost spoiled for choice for frameworks that can help structure their applications. Maturity in software (framework) development isn’t simply about how long a frame- work has been around. It’s about how solid the framework is and more importantly how well it’s evolved to fill its role. Has it become more effective at solving common problems? Does it continue to improve as developers build larger and more complex applications with it? In this book, I will be covering the popular Backbone.js, which I consider the best of the current family of JavaScript architectural frameworks. Topics will include MVC theory and how to build applications using Backbone’s mod- els, views, collections and routers. I’ll also be taking you through advanced topics like modular development with Backbone.js and AMD (via RequireJS), how to build ap- plications using modern software stacks (like Node and Express), how to solve the routing problems with Backbone and jQuery Mobile, tips about scaffolding tools, and a lot more. If this is your first time looking at Backbone.js and you’re still unsure whether or not to give it a try, why not take a look at how a Todo application can be implemented in Backbone and several other popular Javascript frameworks before reading further? The goal of this book is to create an authoritative and centralized repository of infor- mation that can help those developing real-world apps with Backbone. If you come across a section or topic which you think could be improved or expanded on, please feel free to submit a pull-request. It won’t take long and you’ll be helping other devel- opers avoid problems you’ve run into before. 1 www.it-ebooks.info Fundamentals In this section we are going to cover the context into which a framework like Back- bone.js fits. Let’s begin our journey into understanding Backbone better with a look at code architecture. MVC, MVP & Backbone.js Before exploring any JavaScript frameworks that assist in structuring applications, it can be useful to gain a basic understanding of architectural design patterns. Design patterns are proven solutions to common development problems and can suggest structural approaches to help guide developers in adding some organization to their applications. Patterns are useful because they’re a set of practices that build upon the collective experience of skilled developers who have repeatedly solved similar problems. Al- though developers 10 or 20 years ago may not have been using the same programming languages when implementing patterns in their projects, there are many lessons we can learn from their efforts. In this section, we’re going to review two popular patterns - MVC and MVP. We’ll be exploring in greater detail how Backbone.js implements these patterns shortly to better appreciate where it fits in. MVC MVC (Model-View-Controller) is an architectural design pattern that encourages im- proved application organization through a separation of concerns. It enforces the iso- lation of business data (Models) from user interfaces (Views), with a third component (Controllers) traditionally present to manage logic, user-input and the coordination of models and views. The pattern was originally designed by Trygve Reenskaug while working on Smalltalk-80 (1979), where it was initially called Model-View-Controller- Editor. MVC was described in depth in “Design Patterns: Elements of Reusable Object- Oriented Software” (The “GoF” or “Gang of Four” book) in 1994, which played a role in popularizing its use. Smalltalk-80 MVC It’s important to understand what the original MVC pattern was aiming to solve as it has changed quite heavily since the days of its origin. Back in the 70’s, graphical user- interfaces were far and few between. An approach known as Separated Presentation began to be used as a means to make a clear division between domain objects which modeled concepts in the real world (e.g a photo, a person) and the presentation objects which were rendered to the user’s screen. 2 | Chapter 1: Introduction www.it-ebooks.info The Smalltalk-80 implementation of MVC took this concept further and had an ob- jective of separating out the application logic from the user interface.