Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Adding formatting tweaks.

  • Loading branch information...
commit 48dbc295ab06d2220701cff63e38db1048a046e6 1 parent 12d38a8
Addy Osmani authored August 29, 2012
BIN  backbone-fundamentals.epub
Binary file not shown
48  backbone-fundamentals.rtf
@@ -195,7 +195,7 @@ Unit Testing Backbone Applications With QUnit And SinonJS
195 195
 Resources
196 196
 }}}
197 197
 \sa180\par}
198  
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Introduction\par}
  198
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs36 Introduction\par}
199 199
 {\pard \ql \f0 \sa180 \li0 \fi0 When writing a Web application from scratch, it\u8217's easy to feel like we can get by simply by relying on a DOM manipulation library (like jQuery) and a handful of utility plugins. The problem with this is that it doesn\u8217't take long to get lost in a nested pile of jQuery callbacks and DOM elements without any real structure in place for our applications.\par}
200 200
 {\pard \ql \f0 \sa180 \li0 \fi0 In short, we\u8217're stuck with spaghetti code. Fortunately there are modern JavaScript frameworks that can assist with bringing structure and organization to our projects, improving how easily maintainable they are in the long-run.\par}
201 201
 {\pard \ql \f0 \sa180 \li0 \fi0 \b \fs28 What Is MVC, Or Rather MV*?\par}
@@ -232,7 +232,7 @@ Resources
232 232
 {\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab Provide DOM, model and collection synchronization\sa180\par}
233 233
 {\pard \ql \f0 \sa180 \li0 \fi0 The goal of this book is to create an authoritative and centralized repository of information 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\u8217't take long and you\u8217'll be helping other developers avoid problems you\u8217've run into before.\par}
234 234
 {\pard \ql \f0 \sa180 \li0 \fi0 Topics will include MVC theory and how to build applications using Backbone\u8217's models, views, collections and routers. I\u8217'll also be taking you through advanced topics like modular development with Backbone.js and AMD (via Require.js), how to build applications 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.\par}
235  
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Fundamentals\par}
  235
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs36 Fundamentals\par}
236 236
 {\pard \ql \f0 \sa180 \li0 \fi0 In this section, we\u8217're going to explore how frameworks like Backbone.js fit in the world of JavaScript application architecture. Clasically, developers creating desktop and server-class applications have had a wealth of design patterns available for them to lean on, but it\u8217's only been in the past few years that such patterns have come to client-side development.\par}
237 237
 {\pard \ql \f0 \sa180 \li0 \fi0 Before exploring any JavaScript frameworks that assist in structuring applications, it can be useful to gain a basic understanding of architectural design patterns.\par}
238 238
 {\pard \ql \f0 \sa180 \li0 \fi0 \b \fs28 MVC, MVP & Backbone.js\par}
@@ -543,7 +543,7 @@ this
543 543
 }}}
544 544
  which can help\line \par}
545 545
 {\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab Clear and flexible conventions for structuring applications. Backbone doesn\u8217't force usage of all of its components and can work with only those needed.\sa180\par}
546  
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 ##The Internals\par}
  546
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs36 The Internals\par}
547 547
 {\pard \ql \f0 \sa180 \li0 \fi0 In this section, you\u8217'll learn the essentials of Backbone\u8217's models, views, collections and routers, as well as about using namespacing to organize your code. This isn\u8217't meant as a replacement for the official documentation, but it will help you understand many of the core concepts behind Backbone before you start building applications with it.\par}
548 548
 {\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab Models\par}
549 549
 {\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab Collections\par}
@@ -1270,15 +1270,15 @@ galleryApp.model.special.Admin = Backbone.Model.extend(\{\});\par}
1270 1270
 {\pard \ql \f0 \sa180 \li0 \fi0 Reviewing the namespace patterns above, the option that I prefer when writing Backbone applications is nested object namespacing with the object literal pattern.\par}
1271 1271
 {\pard \ql \f0 \sa180 \li0 \fi0 Single global variables may work fine for applications that are relatively trivial. However, larger codebases requiring both namespaces and deep sub-namespaces require a succinct solution that\u8217's both readable and scalable. I feel this pattern achieves both of these objectives and is a good choice for most Backbone development.\par}
1272 1272
 {\pard \ql \f0 \sa180 \li0 \fi0 \b \fs36 Practical: Todos - Your First Backbone.js App\par}
1273  
-{\pard \ql \f0 \sa180 \li0 \fi0 Building a Todo List application is a great way to learn about Backbone, and Backbone\u8217's conventions. It\u8217's a simple enough app, but contains enough interesting problems to be useful, such as binding, persisting model data, routing and template rendering.\par}
  1273
+{\pard \ql \f0 \sa180 \li0 \fi0 Now that we\u8217've journeyed through the fundamentals, let\u8217's move on to writing our first Backbone.js app - a Todo List application. Building a Todo List is a great way to learn about Backbone\u8217's conventions. It\u8217's a simple enough app, but contains enough interesting problems to be useful, such as binding, persisting model data, routing and template rendering.\par}
1274 1274
 {\pard \ql \f0 \sa180 \li0 \fi0 For this chapter, we\u8217're going to learn how to create the Backbone.js Todo app listed on {\field{\*\fldinst{HYPERLINK "http://todomvc.com"}}{\fldrslt{\ul
1275 1275
 TodoMVC.com
1276 1276
 }}}
1277 1277
 .\par}
1278 1278
 {\pard \ql \f0 \sa0 \li0 \fi0 \par}
1279  
-{\pard \ql \f0 \sa180 \li0 \fi0 So let\u8217's think about what we need from a high level architectural standpoint.\par}
1280  
-{\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab A Todo model to describe individual todo items\par}
1281  
-{\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab A TodoList collection to store and persist todos\par}
  1279
+{\pard \ql \f0 \sa180 \li0 \fi0 Let\u8217's think about what we need from a high level architectural standpoint.\par}
  1280
+{\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab A {\f1 Todo} model to describe individual todo items\par}
  1281
+{\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab A {\f1 TodoList} collection to store and persist todos\par}
1282 1282
 {\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab A way of creating todos\par}
1283 1283
 {\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab Listing todos\par}
1284 1284
 {\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab Editing existing todos\par}
@@ -1308,9 +1308,6 @@ Backbone LocalStorage adapter
1308 1308
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\line
1309 1309
   <title>Backbone.js \u8226? TodoMVC</title>\line
1310 1310
   <link rel="stylesheet" href="../../assets/base.css">\line
1311  
-  <!--[if IE]>\line
1312  
-  <script src="../../assets/ie.js"></script>\line
1313  
-  <![endif]-->\line
1314 1311
 </head>\line
1315 1312
 <body>\line
1316 1313
   <script src="../../assets/base.js"></script>\line
@@ -1328,7 +1325,7 @@ Backbone LocalStorage adapter
1328 1325
 </html>\par}
1329 1326
 {\pard \ql \f0 \sa180 \li0 \fi0 To help demonstrate how the various parts of our application can be split up, individual concerns are cleanly organized into folders representing our models, views, collections and routers. An app.js file is used to kick everything off.\par}
1330 1327
 {\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Application HTML\par}
1331  
-{\pard \ql \f0 \sa180 \li0 \fi0 Now let\u8217's take a look at our application\u8217's static HTML. We\u8217're going to need an {\f1 <input>} for creating new todos a {\f1 <ul id="todo-list" />} for listing the actual todos, and a section containing some operations, such as clearing completed todos.\par}
  1328
+{\pard \ql \f0 \sa180 \li0 \fi0 Now let\u8217's take a look at our application\u8217's static HTML. We\u8217're going to need an {\f1 <input>} for creating new todos, a {\f1 <ul id="todo-list" />} for listing the actual todos, and a section containing some operations, such as clearing completed todos.\par}
1332 1329
 {\pard \ql \f0 \sa180 \li0 \fi0 \f1   <section id="todoapp">\line
1333 1330
     <header id="header">\line
1334 1331
       <h1>todos</h1>\line
@@ -1349,7 +1346,7 @@ Backbone LocalStorage adapter
1349 1346
 {\pard \ql \f0 \sa180 \li0 \fi0 We\u8217'll be populating our todo-list and adding a statistics section with details about what items are left to be completed later on.\par}
1350 1347
 {\pard \ql \f0 \sa180 \li0 \fi0 So far so good. Now in order to tie this into our Backbone Todo app, we\u8217're going to have to go back to the fundamentals - a Todo model.\par}
1351 1348
 {\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Todo model\par}
1352  
-{\pard \ql \f0 \sa180 \li0 \fi0 The Todo model is remarkably straightforward. Firstly a todo has two attributes, a {\f1 title} and a {\f1 completed} status that indicates whether it\u8217's been completed. These attributes are passed as defaults, as you can see in the example below:\par}
  1349
+{\pard \ql \f0 \sa180 \li0 \fi0 The {\f1 Todo} model is remarkably straightforward. Firstly a todo has two attributes, a {\f1 title} and a {\f1 completed} status that indicates whether it\u8217's been completed. These attributes are passed as defaults, as you can see in the example below:\par}
1353 1350
 {\pard \ql \f0 \sa180 \li0 \fi0 \f1 \line
1354 1351
 var app = app || \{\};\line
1355 1352
 \line
@@ -1376,7 +1373,7 @@ var app = app || \{\};\line
1376 1373
   \});\par}
1377 1374
 {\pard \ql \f0 \sa180 \li0 \fi0 We also have a {\f1 toggle()} function which allows to set whether a Todo item has been completed.\par}
1378 1375
 {\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Todo collection\par}
1379  
-{\pard \ql \f0 \sa180 \li0 \fi0 Next we have our Todo collection used to group our models. The collection is being extended by localStorage which automatically persists Todo records to HTML5 Local Storage via the Backbone LocalStorage adapter, so they\u8217're saved between page requests.\par}
  1376
+{\pard \ql \f0 \sa180 \li0 \fi0 Next we have our {\f1 TodoList} collection used to group our models. The collection is being extended by localStorage which automatically persists Todo records to HTML5 Local Storage via the Backbone LocalStorage adapter, so they\u8217're saved between page requests.\par}
1380 1377
 {\pard \ql \f0 \sa180 \li0 \fi0 We\u8217've then got some static methods, {\f1 completed()} and {\f1 remaining()}, which return an array of unfinished and finished todos respectively.\par}
1381 1378
 {\pard \ql \f0 \sa180 \li0 \fi0 Finally we have a {\f1 nextOrder()} function, that keeps our Todo items in sequential order as well as a {\f1 comparator()} used to sort items by their insertion order.\par}
1382 1379
 {\pard \ql \f0 \sa180 \li0 \fi0 \f1 \line
@@ -1495,9 +1492,10 @@ var app = app || \{\};\line
1495 1492
   \});\par}
1496 1493
 {\pard \ql \f0 \sa180 \li0 \fi0 You can see we\u8217've got a couple of things going on, an el (element), a {\f1 statsTemplate}, a constructor function and several view specific methods. On the left of the el: key is a DOM element selector for the element with ID {\f1 todoapp}. The value of this is just a string and Backbone will create a reference pointing to any element matching the selector #todoapp, where here it will be the {\f1 <section id=\u8221"todoapp />} element, defined in the HTML section earlier.\par}
1497 1494
 {\pard \ql \f0 \sa180 \li0 \fi0 In a nutshell this means we can now refer to this.el in our controller, which points to the {\f1 <section class="todoapp" />} element. As you can see, we\u8217're referring to el in the {\f1 addOne()} function, appending an element to the list.\par}
1498  
-{\pard \ql \f0 \sa180 \li0 \fi0 Now let\u8217's take a look at the constructor function. It\u8217's binding to several events on the Todo model, such as add, reset and all. Since we\u8217're delegating handling of updates and deletes to the TodoView view, we don\u8217't need to to worry about that here. The two pieces of logic are:\par}
1499  
-{\pard \ql \f0 \sa180 \li0 \fi0 When a new todo is created, the add event will be fired, calling {\f1 addOne()} which instantiates the {\f1 TodoView} view, rendering it and appending the resultant element to our todo list\par}
1500  
-{\pard \ql \f0 \sa180 \li0 \fi0 When a reset event is called (i.e.\u160?the todos have been loaded from Local Storage), {\f1 addAll()} will be called. This function iterates over all the todos, passing them to {\f1 addOne()}.\par}
  1495
+{\pard \ql \f0 \sa180 \li0 \fi0 Now let\u8217's take a look at the constructor function. It\u8217's binding to several events on the Todo model, such as add, reset and all. Since we\u8217're delegating handling of updates and deletes to the {\f1 TodoView} view, we don\u8217't need to to worry about that here. The two pieces of logic are:\par}
  1496
+{\pard \ql \f0 \sa180 \li360 \fi-360 \bullet \tx360\tab When a new todo is created, the {\f1 add} event will be fired, calling {\f1 addAll()}. This iterates over all of the Todos currently in our collection and fires {\f1 addOne()} for each item.\par}
  1497
+{\pard \ql \f0 \sa180 \li360 \fi-360 \bullet \tx360\tab {\f1 addOne()} instantiates the TodoView view, rendering it and appending the resultant element to our Todo list.\par}
  1498
+{\pard \ql \f0 \sa180 \li360 \fi-360 \bullet \tx360\tab When a {\f1 reset} event is called (i.e.\u160?we wish to update the collection in bulk such as when the Todos have been loaded from Local Storage), {\f1 addAll()} is similarly called again.\sa180\par}
1501 1499
 {\pard \ql \f0 \sa180 \li0 \fi0 We can then add in the logic for creating new todos, editing them and filtering them based on whether they are complete.\par}
1502 1500
 {\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab events: We define an events hash containing declarative callbacks for our DOM events.\par}
1503 1501
 {\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab {\f1 createOnEnter()}: When a user hits return inside the {\f1 <input/>} field, this creates a new Todo item and resets the main {\f1 <input/>} field value to prepare it for the next entry.\par}
@@ -2419,7 +2417,7 @@ Brunch
2419 2417
 .\par}
2420 2418
 {\pard \ql \f0 \sa180 \li0 \fi0 Brunch works very well with Backbone, Underscore, jQuery and CoffeeScript and is even used by companies such as Red Bull and Jim Beam. You may have to update any third party dependencies (e.g.\u160?latest jQuery or Zepto) when using it, but other than that it should be fairly stable to use right out of the box.\par}
2421 2419
 {\pard \ql \f0 \sa180 \li0 \fi0 Brunch can be installed via the nodejs package manager and is easy to get started with. If you happen to use Vim or Textmate as your editor of choice, you\u8217'll be happy to know that there are Brunch bundles available for both.\par}
2422  
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Common Problems & Solutions\par}
  2420
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs36 Common Problems & Solutions\par}
2423 2421
 {\pard \ql \f0 \sa180 \li0 \fi0 In this section, we will review a number of common problems developers often experience once they\u8217've started to work on relatively non-trivial projects using Backbone.js, as well as present potential solutions.\par}
2424 2422
 {\pard \ql \f0 \sa180 \li0 \fi0 Perhaps the most frequent of these questions surround how to do more with Views. If you are interested in discovering how to work with nested Views, learn about view disposal and inheritance, this section will hopefully have you covered.\par}
2425 2423
 {\pard \ql \f0 \sa180 \li0 \fi0 \b \fs24 Nesting: What is the best approach for rendering and appending Sub-Views in Backbone.js?\par}
@@ -2774,7 +2772,7 @@ Marionette
2774 2772
 {\pard \ql \f0 \sa180 \li0 \fi0 \b \fs24 Is Backbone too simple for my needs?\par}
2775 2773
 {\pard \ql \f0 \sa180 \li0 \fi0 Backbone can be used for building both trivial and complex applications as demonstrated by the many examples Ashkenas has been referencing in the Backbone documentation. As with any MVC framework however, it\u8217's important to dedicate time towards planning out what models and views your application really needs. Diving straight into development without doing this can result in either spaghetti code or a large refactor later on and it\u8217's best to avoid this where possible.\par}
2776 2774
 {\pard \ql \f0 \sa180 \li0 \fi0 At the end of the day, the key to building large applications is not to build large applications in the first place. If you find that Backbone doesn\u8217't cut it for your requirements (which is unlikely for many many use-cases), I strongly recommend checking out AngularJS, Ember.js, Spine.js or CanJS as they offer a little more than Backbone out of the box. Dojo and Dojo Mobile may also be of interest as these have also been used to build significantly complex apps by other developers.\par}
2777  
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 # RESTful Applications\par}
  2775
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs36 RESTful Applications\par}
2778 2776
 {\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Building RESTful applications with Backbone\par}
2779 2777
 {\pard \ql \f0 \sa180 \li0 \fi0 In this section of the book, we\u8217're going to take a look at developing RESTful applications using Backbone.js and modern technology stacks. When the data for your back-end is exposed through a purely RESTful API, tasks such as retrieving (GET), creating (POST), updating (PUT) and deleting (DELETE) models are made easy through Backbone\u8217's Model API. This API is so intuitive in fact that switching from storing records in a local data-store (e.g localStorage) to a database/noSQL data-store is a lot simpler than you may think.\par}
2780 2778
 {\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Stack 1: Building A Backbone App With Node.js, Express, Mongoose and MongoDB\par}
@@ -3645,8 +3643,8 @@ end\par}
3645 3643
 {\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Conclusions\par}
3646 3644
 {\pard \ql \f0 \sa180 \li0 \fi0 In this chapter, we looked at creating a Backbone application backed by an API powered by Ruby, Sinatra, Haml, MongoDB and the MongoDB driver. I personally found developing APIs with Sinatra a relatively painless experience and one which I felt was on-par with the effort required for the Node/Express implementation of the same application.\par}
3647 3645
 {\pard \ql \f0 \sa180 \li0 \fi0 This section is by no means the most comprehensive guide on building complex apps using all of the items in this particular stack. I do however hope it was an introduction sufficient enough to help you decide on what stack to try out for your next project.\par}
3648  
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 # Advanced\par}
3649  
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Modular JavaScript\par}
  3646
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs36 Modular Development\par}
  3647
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Introduction\par}
3650 3648
 {\pard \ql \f0 \sa180 \li0 \fi0 When we say an application is modular, we generally mean it\u8217's composed of a set of highly decoupled, distinct pieces of functionality stored in modules. As you probably know, loose coupling facilitates easier maintainability of apps by removing dependencies where possible. When this is implemented efficiently, its quite easy to see how changes to one part of a system may affect another.\par}
3651 3649
 {\pard \ql \f0 \sa180 \li0 \fi0 Unlike some more traditional programming languages however, the current iteration of JavaScript (ECMA-262) doesn\u8217't provide developers with the means to import such modules of code in a clean, organized manner. It\u8217's one of the concerns with specifications that haven\u8217't required great thought until more recent years where the need for more organized JavaScript applications became apparent.\par}
3652 3650
 {\pard \ql \f0 \sa180 \li0 \fi0 Instead, developers at present are left to fall back on variations of the module or object literal patterns. With many of these, module scripts are strung together in the DOM with namespaces being described by a single global object where it\u8217's still possible to incur naming collisions in your architecture. There\u8217's also no clean way to handle dependency management without some manual effort or third party tools.\par}
@@ -5044,8 +5042,8 @@ Backbone fundamentals
5044 5042
 {\pard \ql \f0 \sa180 \li0 \fi0 If you open up Flickly in a desktop browser, you\u8217'll get an image search UI that\u8217's modeled on Google.com, however, review the components (buttons, text inputs, tabs) on the page for a moment. The desktop UI doesn\u8217't look anything like a mobile application yet I\u8217'm still using jQM for theming mobile components; the tabs, date-picker, sliders - everything in the desktop UI is re-using what jQM would be providing users on mobile devices. Thanks to some media queries, the desktop UI can make optimal use of whitespace, expanding component blocks out and providing alternative layouts whilst still making use of jQM as a component framework.\par}
5045 5043
 {\pard \ql \f0 \sa180 \li0 \fi0 The benefit of this is that I don\u8217't need to go pulling in jQuery UI separately to be able to take advantage of these features. Thanks to the recent ThemeRoller my components can look pretty much exactly how I would like them to and users of the app can get a jQM UI for lower-resolutions and a jQM-ish UI for everything else.\par}
5046 5044
 {\pard \ql \f0 \sa180 \li0 \fi0 The takeaway here is just to remember that if you\u8217're not (already) going through the hassle of conditional script/style loading based on screen-resolution (using matchMedia.js etc), there are simpler approaches that can be taken to cross-device component theming.\par}
5047  
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Unit Testing\par}
5048  
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs36 Unit Testing Backbone Applications With Jasmine\par}
  5045
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs36 Unit Testing\par}
  5046
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Unit Testing Backbone Applications With Jasmine\par}
5049 5047
 {\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Introduction\par}
5050 5048
 {\pard \ql \f0 \sa180 \li0 \fi0 One definition of unit testing is the process of taking the smallest piece of testable code in an application, isolating it from the remainder of your codebase and determining if it behaves exactly as expected. In this section, we\u8217'll be taking a look at how to unit test Backbone applications using a popular JavaScript testing framework called {\field{\*\fldinst{HYPERLINK "http://pivotal.github.com/jasmine/"}}{\fldrslt{\ul
5051 5049
 Jasmine
@@ -5699,7 +5697,7 @@ Jasmine + Backbone Revisited
5699 5697
 Backbone, PhantomJS and Jasmine
5700 5698
 }}}
5701 5699
 \sa180\par}
5702  
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs36 Unit Testing Backbone Applications With QUnit And SinonJS\par}
  5700
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Unit Testing Backbone Applications With QUnit And SinonJS\par}
5703 5701
 {\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Introduction\par}
5704 5702
 {\pard \ql \f0 \sa180 \li0 \fi0 QUnit is a powerful JavaScript test suite written by jQuery team member {\field{\*\fldinst{HYPERLINK "http://bassistance.de/"}}{\fldrslt{\ul
5705 5703
 J\u246?rn Zaefferer
@@ -6560,7 +6558,7 @@ Another QUnit/Backbone.js demo project
6560 6558
 SinonJS helpers for Backbone
6561 6559
 }}}
6562 6560
 }\sa180\par}
6563  
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Resources\par}
  6561
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs36 Resources\par}
6564 6562
 {\pard \ql \f0 \sa180 \li0 \fi0 Whilst what we get with Backbone out of the box can be terribly useful, there are some equally beneficial add-ons that can help simplify our development process. These include:\par}
6565 6563
 {\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab {\field{\*\fldinst{HYPERLINK "https://github.com/derickbailey/backbone.marionette"}}{\fldrslt{\ul
6566 6564
 Backbone Marionette
@@ -6591,7 +6589,7 @@ Backbone Validations - HTML5 inspired validations
6591 6589
 }}}
6592 6590
 \sa180\par}
6593 6591
 {\pard \ql \f0 \sa180 \li0 \fi0 In time, there will be tutorials in the book covering some of these resources but until then, please feel free to check them out.\par}
6594  
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Conclusions\par}
  6592
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs36 Conclusions\par}
6595 6593
 {\pard \ql \f0 \sa180 \li0 \fi0 That\u8217's it for \u8216'Developing Backbone.js Applications\u8217'. I hope you found this book both useful, enlightening and a good start for your journey into exploring Backbone.js.\par}
6596 6594
 {\pard \ql \f0 \sa180 \li0 \fi0 If there are other topics or areas of this book you feel could be expanded further, please feel free to let me know, or better yet, send a pull request upstream. I\u8217'm always interested in making this title as comprehensive as possible.\par}
6597 6595
 {\pard \ql \f0 \sa180 \li0 \fi0 Until next time, the very best of luck with the rest of your journey!\par}
54  index.html
@@ -145,7 +145,7 @@ <h2 id="table-of-contents">Table Of Contents</h2>
145 145
 </ul></li>
146 146
 <li><h4><a href="#resources">Resources</a></h4></li>
147 147
 </ul>
148  
-<h2 id="introduction"><a name="introduction">Introduction</a></h2>
  148
+<h1 id="introduction"><a name="introduction">Introduction</a></h1>
149 149
 <p>When writing a Web application from scratch, it’s easy to feel like we can get by simply by relying on a DOM manipulation library (like jQuery) and a handful of utility plugins. The problem with this is that it doesn’t take long to get lost in a nested pile of jQuery callbacks and DOM elements without any real structure in place for our applications.</p>
150 150
 <p>In short, we’re stuck with spaghetti code. Fortunately there are modern JavaScript frameworks that can assist with bringing structure and organization to our projects, improving how easily maintainable they are in the long-run.</p>
151 151
 <h3 id="what-is-mvc-or-rather-mv">What Is MVC, Or Rather MV*?</h3>
@@ -186,7 +186,7 @@ <h3 id="why-should-you-consider-using-backbone.js">Why should you consider using
186 186
 </ul>
187 187
 <p>The goal of this book is to create an authoritative and centralized repository of information 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 developers avoid problems you've run into before.</p>
188 188
 <p>Topics will include MVC theory and how to build applications using Backbone's models, views, collections and routers. I'll also be taking you through advanced topics like modular development with Backbone.js and AMD (via Require.js), how to build applications 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.</p>
189  
-<h2 id="fundamentals"><a name="fundamentals">Fundamentals</a></h2>
  189
+<h1 id="fundamentals"><a name="fundamentals">Fundamentals</a></h1>
190 190
 <p>In this section, we're going to explore how frameworks like Backbone.js fit in the world of JavaScript application architecture. Clasically, developers creating desktop and server-class applications have had a wealth of design patterns available for them to lean on, but it's only been in the past few years that such patterns have come to client-side development.</p>
191 191
 <p>Before exploring any JavaScript frameworks that assist in structuring applications, it can be useful to gain a basic understanding of architectural design patterns.</p>
192 192
 <h3 id="mvc-mvp-backbone.js"><a name="mvc-mvp">MVC, MVP &amp; Backbone.js</a></h3>
@@ -460,7 +460,7 @@ <h3 id="backbone.js">Backbone.js</h3>
460 460
 <li>Doesn't support deeply nested models, though there are Backbone plugins such as <a href="https://github.com/PaulUithol/Backbone-relational">this</a> which can help<br /></li>
461 461
 <li>Clear and flexible conventions for structuring applications. Backbone doesn't force usage of all of its components and can work with only those needed.</li>
462 462
 </ul>
463  
-<h2 id="the-internals">##<a name="theinternals">The Internals</a></h2>
  463
+<h1 id="the-internals"><a name="theinternals">The Internals</a></h1>
464 464
 <p>In this section, you'll learn the essentials of Backbone's models, views, collections and routers, as well as about using namespacing to organize your code. This isn't meant as a replacement for the official documentation, but it will help you understand many of the core concepts behind Backbone before you start building applications with it.</p>
465 465
 <ul>
466 466
 <li>Models</li>
@@ -1178,13 +1178,13 @@ <h4 id="what-is-namespacing">What is namespacing?</h4>
1178 1178
 <p>Reviewing the namespace patterns above, the option that I prefer when writing Backbone applications is nested object namespacing with the object literal pattern.</p>
1179 1179
 <p>Single global variables may work fine for applications that are relatively trivial. However, larger codebases requiring both namespaces and deep sub-namespaces require a succinct solution that's both readable and scalable. I feel this pattern achieves both of these objectives and is a good choice for most Backbone development.</p>
1180 1180
 <h1 id="practical-todos---your-first-backbone.js-app"><a name="practicaltodos">Practical: Todos - Your First Backbone.js App</a></h1>
1181  
-<p>Building a Todo List application is a great way to learn about Backbone, and Backbone’s conventions. It's a simple enough app, but contains enough interesting problems to be useful, such as binding, persisting model data, routing and template rendering.</p>
  1181
+<p>Now that we've journeyed through the fundamentals, let's move on to writing our first Backbone.js app - a Todo List application. Building a Todo List is a great way to learn about Backbone’s conventions. It's a simple enough app, but contains enough interesting problems to be useful, such as binding, persisting model data, routing and template rendering.</p>
1182 1182
 <p>For this chapter, we’re going to learn how to create the Backbone.js Todo app listed on <a href="http://todomvc.com">TodoMVC.com</a>.</p>
1183 1183
 <img src="img/todoapp.png" width="700px"/>
1184  
-<p>So let's think about what we need from a high level architectural standpoint.</p>
  1184
+<p>Let's think about what we need from a high level architectural standpoint.</p>
1185 1185
 <ul>
1186  
-<li>A Todo model to describe individual todo items</li>
1187  
-<li>A TodoList collection to store and persist todos</li>
  1186
+<li>A <code>Todo</code> model to describe individual todo items</li>
  1187
+<li>A <code>TodoList</code> collection to store and persist todos</li>
1188 1188
 <li>A way of creating todos</li>
1189 1189
 <li>Listing todos</li>
1190 1190
 <li>Editing existing todos</li>
@@ -1203,9 +1203,6 @@ <h2 id="index">Index</h2>
1203 1203
   &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;
1204 1204
   &lt;title&gt;Backbone.js • TodoMVC&lt;/title&gt;
1205 1205
   &lt;link rel=&quot;stylesheet&quot; href=&quot;../../assets/base.css&quot;&gt;
1206  
-  &lt;!--[if IE]&gt;
1207  
-  &lt;script src=&quot;../../assets/ie.js&quot;&gt;&lt;/script&gt;
1208  
-  &lt;![endif]--&gt;
1209 1206
 &lt;/head&gt;
1210 1207
 &lt;body&gt;
1211 1208
   &lt;script src=&quot;../../assets/base.js&quot;&gt;&lt;/script&gt;
@@ -1224,7 +1221,7 @@ <h2 id="index">Index</h2>
1224 1221
 </code></pre>
1225 1222
 <p>To help demonstrate how the various parts of our application can be split up, individual concerns are cleanly organized into folders representing our models, views, collections and routers. An app.js file is used to kick everything off.</p>
1226 1223
 <h2 id="application-html">Application HTML</h2>
1227  
-<p>Now let's take a look at our application's static HTML. We're going to need an <code>&lt;input&gt;</code> for creating new todos a <code>&lt;ul id=&quot;todo-list&quot; /&gt;</code> for listing the actual todos, and a section containing some operations, such as clearing completed todos.</p>
  1224
+<p>Now let's take a look at our application's static HTML. We're going to need an <code>&lt;input&gt;</code> for creating new todos, a <code>&lt;ul id=&quot;todo-list&quot; /&gt;</code> for listing the actual todos, and a section containing some operations, such as clearing completed todos.</p>
1228 1225
 <pre><code>  &lt;section id=&quot;todoapp&quot;&gt;
1229 1226
     &lt;header id=&quot;header&quot;&gt;
1230 1227
       &lt;h1&gt;todos&lt;/h1&gt;
@@ -1245,7 +1242,7 @@ <h2 id="application-html">Application HTML</h2>
1245 1242
 <p>We’ll be populating our todo-list and adding a statistics section with details about what items are left to be completed later on.</p>
1246 1243
 <p>So far so good. Now in order to tie this into our Backbone Todo app, we're going to have to go back to the fundamentals - a Todo model.</p>
1247 1244
 <h2 id="todo-model">Todo model</h2>
1248  
-<p>The Todo model is remarkably straightforward. Firstly a todo has two attributes, a <code>title</code> and a <code>completed</code> status that indicates whether it's been completed. These attributes are passed as defaults, as you can see in the example below:</p>
  1245
+<p>The <code>Todo</code> model is remarkably straightforward. Firstly a todo has two attributes, a <code>title</code> and a <code>completed</code> status that indicates whether it's been completed. These attributes are passed as defaults, as you can see in the example below:</p>
1249 1246
 <pre class="sourceCode javascript"><code class="sourceCode javascript">
1250 1247
 <span class="kw">var</span> app = app || {};
1251 1248
 
@@ -1272,7 +1269,7 @@ <h2 id="todo-model">Todo model</h2>
1272 1269
   });</code></pre>
1273 1270
 <p>We also have a <code>toggle()</code> function which allows to set whether a Todo item has been completed.</p>
1274 1271
 <h2 id="todo-collection">Todo collection</h2>
1275  
-<p>Next we have our Todo collection used to group our models. The collection is being extended by localStorage which automatically persists Todo records to HTML5 Local Storage via the Backbone LocalStorage adapter, so they're saved between page requests.</p>
  1272
+<p>Next we have our <code>TodoList</code> collection used to group our models. The collection is being extended by localStorage which automatically persists Todo records to HTML5 Local Storage via the Backbone LocalStorage adapter, so they're saved between page requests.</p>
1276 1273
 <p>We've then got some static methods, <code>completed()</code> and <code>remaining()</code>, which return an array of unfinished and finished todos respectively.</p>
1277 1274
 <p>Finally we have a <code>nextOrder()</code> function, that keeps our Todo items in sequential order as well as a <code>comparator()</code> used to sort items by their insertion order.</p>
1278 1275
 <pre class="sourceCode javascript"><code class="sourceCode javascript">
@@ -1391,9 +1388,12 @@ <h2 id="application-view">Application View</h2>
1391 1388
   });</code></pre>
1392 1389
 <p>You can see we've got a couple of things going on, an el (element), a <code>statsTemplate</code>, a constructor function and several view specific methods. On the left of the el: key is a DOM element selector for the element with ID <code>todoapp</code>. The value of this is just a string and Backbone will create a reference pointing to any element matching the selector #todoapp, where here it will be the <code>&lt;section id=”todoapp /&gt;</code> element, defined in the HTML section earlier.</p>
1393 1390
 <p>In a nutshell this means we can now refer to this.el in our controller, which points to the <code>&lt;section class=&quot;todoapp&quot; /&gt;</code> element. As you can see, we're referring to el in the <code>addOne()</code> function, appending an element to the list.</p>
1394  
-<p>Now let's take a look at the constructor function. It's binding to several events on the Todo model, such as add, reset and all. Since we're delegating handling of updates and deletes to the TodoView view, we don't need to to worry about that here. The two pieces of logic are:</p>
1395  
-<p>When a new todo is created, the add event will be fired, calling <code>addOne()</code> which instantiates the <code>TodoView</code> view, rendering it and appending the resultant element to our todo list</p>
1396  
-<p>When a reset event is called (i.e. the todos have been loaded from Local Storage), <code>addAll()</code> will be called. This function iterates over all the todos, passing them to <code>addOne()</code>.</p>
  1391
+<p>Now let's take a look at the constructor function. It's binding to several events on the Todo model, such as add, reset and all. Since we're delegating handling of updates and deletes to the <code>TodoView</code> view, we don't need to to worry about that here. The two pieces of logic are:</p>
  1392
+<ul>
  1393
+<li><p>When a new todo is created, the <code>add</code> event will be fired, calling <code>addAll()</code>. This iterates over all of the Todos currently in our collection and fires <code>addOne()</code> for each item.</p></li>
  1394
+<li><p><code>addOne()</code> instantiates the TodoView view, rendering it and appending the resultant element to our Todo list.</p></li>
  1395
+<li><p>When a <code>reset</code> event is called (i.e. we wish to update the collection in bulk such as when the Todos have been loaded from Local Storage), <code>addAll()</code> is similarly called again.</p></li>
  1396
+</ul>
1397 1397
 <p>We can then add in the logic for creating new todos, editing them and filtering them based on whether they are complete.</p>
1398 1398
 <ul>
1399 1399
 <li>events: We define an events hash containing declarative callbacks for our DOM events.</li>
@@ -2258,7 +2258,7 @@ <h2 id="related-tools-projects">Related Tools &amp; Projects</h2>
2258 2258
 <p>As we've seen, scaffolding tools can assist in expediting how quickly you can begin a new application by creating the basic files required for a project automatically. If you appreciate such tools, I'm happy to also recommend checking out <a href="http://yeoman.io">Yeoman</a> (one of my upcoming projects) and <a href="https://github.com/brunch/brunch">Brunch</a>.</p>
2259 2259
 <p>Brunch works very well with Backbone, Underscore, jQuery and CoffeeScript and is even used by companies such as Red Bull and Jim Beam. You may have to update any third party dependencies (e.g. latest jQuery or Zepto) when using it, but other than that it should be fairly stable to use right out of the box.</p>
2260 2260
 <p>Brunch can be installed via the nodejs package manager and is easy to get started with. If you happen to use Vim or Textmate as your editor of choice, you'll be happy to know that there are Brunch bundles available for both.</p>
2261  
-<h2 id="common-problems-solutions"><a name="commonproblems" id="commonproblems">Common Problems &amp; Solutions</a></h2>
  2261
+<h1 id="common-problems-solutions"><a name="commonproblems" id="commonproblems">Common Problems &amp; Solutions</a></h1>
2262 2262
 <p>In this section, we will review a number of common problems developers often experience once they've started to work on relatively non-trivial projects using Backbone.js, as well as present potential solutions.</p>
2263 2263
 <p>Perhaps the most frequent of these questions surround how to do more with Views. If you are interested in discovering how to work with nested Views, learn about view disposal and inheritance, this section will hopefully have you covered.</p>
2264 2264
 <h4 id="nesting-what-is-the-best-approach-for-rendering-and-appending-sub-views-in-backbone.js">Nesting: What is the best approach for rendering and appending Sub-Views in Backbone.js?</h4>
@@ -2578,7 +2578,7 @@ <h4 id="whats-the-best-way-to-combine-or-append-views-to-each-other">What's the
2578 2578
 <h4 id="is-backbone-too-simple-for-my-needs">Is Backbone too simple for my needs?</h4>
2579 2579
 <p>Backbone can be used for building both trivial and complex applications as demonstrated by the many examples Ashkenas has been referencing in the Backbone documentation. As with any MVC framework however, it's important to dedicate time towards planning out what models and views your application really needs. Diving straight into development without doing this can result in either spaghetti code or a large refactor later on and it's best to avoid this where possible.</p>
2580 2580
 <p>At the end of the day, the key to building large applications is not to build large applications in the first place. If you find that Backbone doesn't cut it for your requirements (which is unlikely for many many use-cases), I strongly recommend checking out AngularJS, Ember.js, Spine.js or CanJS as they offer a little more than Backbone out of the box. Dojo and Dojo Mobile may also be of interest as these have also been used to build significantly complex apps by other developers.</p>
2581  
-<h2 id="restful-applications"># <a name="restfulapps">RESTful Applications</a></h2>
  2581
+<h1 id="restful-applications"><a name="restfulapps">RESTful Applications</a></h1>
2582 2582
 <h2 id="building-restful-applications-with-backbone"><a name="restful">Building RESTful applications with Backbone</a></h2>
2583 2583
 <p>In this section of the book, we're going to take a look at developing RESTful applications using Backbone.js and modern technology stacks. When the data for your back-end is exposed through a purely RESTful API, tasks such as retrieving (GET), creating (POST), updating (PUT) and deleting (DELETE) models are made easy through Backbone's Model API. This API is so intuitive in fact that switching from storing records in a local data-store (e.g localStorage) to a database/noSQL data-store is a lot simpler than you may think.</p>
2584 2584
 <h2 id="stack-1-building-a-backbone-app-with-node.js-express-mongoose-and-mongodb"><a name="stack1">Stack 1: Building A Backbone App With Node.js, Express, Mongoose and MongoDB</a></h2>
@@ -3369,8 +3369,8 @@ <h3 id="todo.haml">todo.haml</h3>
3369 3369
 <h2 id="conclusions-2">Conclusions</h2>
3370 3370
 <p>In this chapter, we looked at creating a Backbone application backed by an API powered by Ruby, Sinatra, Haml, MongoDB and the MongoDB driver. I personally found developing APIs with Sinatra a relatively painless experience and one which I felt was on-par with the effort required for the Node/Express implementation of the same application.</p>
3371 3371
 <p>This section is by no means the most comprehensive guide on building complex apps using all of the items in this particular stack. I do however hope it was an introduction sufficient enough to help you decide on what stack to try out for your next project.</p>
3372  
-<h2 id="advanced"># <a name="advanced">Advanced</a></h2>
3373  
-<h2 id="modular-javascript"><a name="modularjs">Modular JavaScript</a></h2>
  3372
+<h1 id="modular-development"><a name="advanced">Modular Development</a></h1>
  3373
+<h2 id="introduction-2"><a name="modularjs">Introduction</a></h2>
3374 3374
 <p>When we say an application is modular, we generally mean it's composed of a set of highly decoupled, distinct pieces of functionality stored in modules. As you probably know, loose coupling facilitates easier maintainability of apps by removing dependencies where possible. When this is implemented efficiently, its quite easy to see how changes to one part of a system may affect another.</p>
3375 3375
 <p>Unlike some more traditional programming languages however, the current iteration of JavaScript (ECMA-262) doesn't provide developers with the means to import such modules of code in a clean, organized manner. It's one of the concerns with specifications that haven't required great thought until more recent years where the need for more organized JavaScript applications became apparent.</p>
3376 3376
 <p>Instead, developers at present are left to fall back on variations of the module or object literal patterns. With many of these, module scripts are strung together in the DOM with namespaces being described by a single global object where it's still possible to incur naming collisions in your architecture. There's also no clean way to handle dependency management without some manual effort or third party tools.</p>
@@ -4686,9 +4686,9 @@ <h3 id="jquery-mobile-going-beyond-mobile-application-development">jQuery Mobile
4686 4686
 <p>If you open up Flickly in a desktop browser, you'll get an image search UI that's modeled on Google.com, however, review the components (buttons, text inputs, tabs) on the page for a moment. The desktop UI doesn't look anything like a mobile application yet I'm still using jQM for theming mobile components; the tabs, date-picker, sliders - everything in the desktop UI is re-using what jQM would be providing users on mobile devices. Thanks to some media queries, the desktop UI can make optimal use of whitespace, expanding component blocks out and providing alternative layouts whilst still making use of jQM as a component framework.</p>
4687 4687
 <p>The benefit of this is that I don't need to go pulling in jQuery UI separately to be able to take advantage of these features. Thanks to the recent ThemeRoller my components can look pretty much exactly how I would like them to and users of the app can get a jQM UI for lower-resolutions and a jQM-ish UI for everything else.</p>
4688 4688
 <p>The takeaway here is just to remember that if you're not (already) going through the hassle of conditional script/style loading based on screen-resolution (using matchMedia.js etc), there are simpler approaches that can be taken to cross-device component theming.</p>
4689  
-<h2 id="unit-testing"><a name="testing">Unit Testing</a></h2>
4690  
-<h1 id="unit-testing-backbone-applications-with-jasmine"><a name="unittestingjasmine">Unit Testing Backbone Applications With Jasmine</a></h1>
4691  
-<h2 id="introduction-2">Introduction</h2>
  4689
+<h1 id="unit-testing"><a name="testing">Unit Testing</a></h1>
  4690
+<h2 id="unit-testing-backbone-applications-with-jasmine"><a name="unittestingjasmine">Unit Testing Backbone Applications With Jasmine</a></h2>
  4691
+<h2 id="introduction-3">Introduction</h2>
4692 4692
 <p>One definition of unit testing is the process of taking the smallest piece of testable code in an application, isolating it from the remainder of your codebase and determining if it behaves exactly as expected. In this section, we'll be taking a look at how to unit test Backbone applications using a popular JavaScript testing framework called <a href="http://pivotal.github.com/jasmine/">Jasmine</a> from Pivotal Labs.</p>
4693 4693
 <p>For an application to be considered 'well'-tested, distinct functionality should ideally have its own separate unit tests where it's tested against the different conditions you expect it to work under. All tests must pass before functionality is considered 'complete'. This allows developers to both modify a unit of code and its dependencies with a level of confidence about whether these changes have caused any breakage.</p>
4694 4694
 <p>As a basic example of unit testing is where a developer may wish to assert whether passing specific values through to a sum function results in the correct output being returned. For an example more relevant to this book, we may wish to assert whether a user adding a new Todo item to a list correctly adds a Model of a specific type to a Todos Collection.</p>
@@ -5292,8 +5292,8 @@ <h2 id="further-reading">Further reading</h2>
5292 5292
 <li><a href="http://japhr.blogspot.com/2011/11/jasmine-backbonejs-revisited.html">Jasmine + Backbone Revisited</a></li>
5293 5293
 <li><a href="http://japhr.blogspot.com/2011/12/phantomjs-and-backbonejs-and-requirejs.html">Backbone, PhantomJS and Jasmine</a></li>
5294 5294
 </ul>
5295  
-<h1 id="unit-testing-backbone-applications-with-qunit-and-sinonjs"><a name="unittestingqunit">Unit Testing Backbone Applications With QUnit And SinonJS</a></h1>
5296  
-<h2 id="introduction-3">Introduction</h2>
  5295
+<h2 id="unit-testing-backbone-applications-with-qunit-and-sinonjs"><a name="unittestingqunit">Unit Testing Backbone Applications With QUnit And SinonJS</a></h2>
  5296
+<h2 id="introduction-4">Introduction</h2>
5297 5297
 <p>QUnit is a powerful JavaScript test suite written by jQuery team member <a href="http://bassistance.de/">Jörn Zaefferer</a> and used by many large open-source projects (such as jQuery and Backbone.js) to test their code. It's both capable of testing standard JavaScript code in the browser as well as code on the server-side (where environments supported include Rhino, V8 and SpiderMonkey). This makes it a robust solution for a large number of use-cases.</p>
5298 5298
 <p>Quite a few Backbone.js contributors feel that QUnit is a better introductory framework for testing if you don't wish to start off with Jasmine and BDD right away. As we'll see later on in this chapter, QUnit can also be combined with third-party solutions such as SinonJS to produce an even more powerful testing solution supporting spies and mocks, which some say is preferable over Jasmine.</p>
5299 5299
 <p>My personal recommendation is that it's worth comparing both frameworks and opting for the solution that you feel the most comfortable with.</p>
@@ -6140,7 +6140,7 @@ <h2 id="further-reading-resources">Further Reading &amp; Resources</h2>
6140 6140
 <li><strong><a href="https://github.com/jc00ke/qunit-backbone">Another QUnit/Backbone.js demo project</a></strong><br /></li>
6141 6141
 <li><strong><a href="http://devblog.supportbee.com/2012/02/10/helpers-for-testing-backbone-js-apps-using-jasmine-and-sinon-js/">SinonJS helpers for Backbone</a></strong></li>
6142 6142
 </ul>
6143  
-<h2 id="resources"><a name="resources">Resources</a></h2>
  6143
+<h1 id="resources"><a name="resources">Resources</a></h1>
6144 6144
 <p>Whilst what we get with Backbone out of the box can be terribly useful, there are some equally beneficial add-ons that can help simplify our development process. These include:</p>
6145 6145
 <ul>
6146 6146
 <li><a href="https://github.com/derickbailey/backbone.marionette">Backbone Marionette</a></li>
@@ -6152,7 +6152,7 @@ <h2 id="resources"><a name="resources">Resources</a></h2>
6152 6152
 <li><a href="https://github.com/n-time/backbone.validations">Backbone Validations - HTML5 inspired validations</a></li>
6153 6153
 </ul>
6154 6154
 <p>In time, there will be tutorials in the book covering some of these resources but until then, please feel free to check them out.</p>
6155  
-<h2 id="conclusions-4"><a name="conclusions">Conclusions</a></h2>
  6155
+<h1 id="conclusions-4"><a name="conclusions">Conclusions</a></h1>
6156 6156
 <p>That's it for 'Developing Backbone.js Applications'. I hope you found this book both useful, enlightening and a good start for your journey into exploring Backbone.js.</p>
6157 6157
 <p>If there are other topics or areas of this book you feel could be expanded further, please feel free to let me know, or better yet, send a pull request upstream. I'm always interested in making this title as comprehensive as possible.</p>
6158 6158
 <p>Until next time, the very best of luck with the rest of your journey!</p>
60  index.md
Source Rendered
@@ -98,7 +98,7 @@ I hope you find this book helpful!
98 98
 
99 99
 
100 100
 
101  
-##<a name="introduction">Introduction</a>
  101
+#<a name="introduction">Introduction</a>
102 102
 
103 103
 When writing a Web application from scratch, it’s easy to feel like we can get by simply by relying on a DOM manipulation library (like jQuery) and a handful of utility plugins. The problem with this is that it doesn’t take long to get lost in a nested pile of jQuery callbacks and DOM elements without any real structure in place for our applications.
104 104
 
@@ -170,7 +170,7 @@ The goal of this book is to create an authoritative and centralized repository o
170 170
 Topics will include MVC theory and how to build applications using Backbone's models, views, collections and routers. I'll also be taking you through advanced topics like modular development with Backbone.js and AMD (via Require.js), how to build applications 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.
171 171
 
172 172
 
173  
-## <a name="fundamentals">Fundamentals</a>
  173
+#<a name="fundamentals">Fundamentals</a>
174 174
 
175 175
 In this section, we're going to explore how frameworks like Backbone.js fit in the world of JavaScript application architecture. Clasically, developers creating desktop and server-class applications have had a wealth of design patterns available for them to lean on, but it's only been in the past few years that such patterns have come to client-side development.
176 176
 
@@ -594,8 +594,8 @@ It *is* however worth understanding where and why these concepts originated, so
594 594
 
595 595
 
596 596
 
597  
-##<a name="theinternals">The Internals</a>
598  
----
  597
+# <a name="theinternals">The Internals</a>
  598
+
599 599
 
600 600
 In this section, you'll learn the essentials of Backbone's models, views, collections and routers, as well as about using namespacing to organize your code. This isn't meant as a replacement for the official documentation, but it will help you understand many of the core concepts behind Backbone before you start building applications with it.
601 601
 
@@ -1679,16 +1679,17 @@ Single global variables may work fine for applications that are relatively trivi
1679 1679
 
1680 1680
 # <a name="practicaltodos">Practical: Todos - Your First Backbone.js App</a>
1681 1681
 
1682  
-Building a Todo List application is a great way to learn about Backbone, and Backbone’s conventions. It's a simple enough app, but contains enough interesting problems to be useful, such as binding, persisting model data, routing and template rendering.
  1682
+Now that we've journeyed through the fundamentals, let's move on to writing our first Backbone.js app - a Todo List application. Building a Todo List is a great way to learn about Backbone’s conventions. It's a simple enough app, but contains enough interesting problems to be useful, such as binding, persisting model data, routing and template rendering.
  1683
+
1683 1684
 
1684 1685
 For this chapter, we’re going to learn how to create the Backbone.js Todo app listed on [TodoMVC.com](http://todomvc.com). 
1685 1686
 
1686 1687
 <img src="img/todoapp.png" width="700px"/>
1687 1688
 
1688  
-So let's think about what we need from a high level architectural standpoint.
  1689
+Let's think about what we need from a high level architectural standpoint.
1689 1690
 
1690  
-* A Todo model to describe individual todo items 
1691  
-* A TodoList collection to store and persist todos
  1691
+* A `Todo` model to describe individual todo items 
  1692
+* A `TodoList` collection to store and persist todos
1692 1693
 * A way of creating todos
1693 1694
 * Listing todos
1694 1695
 * Editing existing todos
@@ -1712,9 +1713,6 @@ The first step is to setup the basic application dependencies, which in this cas
1712 1713
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
1713 1714
   <title>Backbone.js • TodoMVC</title>
1714 1715
   <link rel="stylesheet" href="../../assets/base.css">
1715  
-  <!--[if IE]>
1716  
-  <script src="../../assets/ie.js"></script>
1717  
-  <![endif]-->
1718 1716
 </head>
1719 1717
 <body>
1720 1718
   <script src="../../assets/base.js"></script>
@@ -1738,7 +1736,7 @@ To help demonstrate how the various parts of our application can be split up, in
1738 1736
 
1739 1737
 ##Application HTML
1740 1738
 
1741  
-Now let's take a look at our application's static HTML. We're going to need an `<input>` for creating new todos a `<ul id="todo-list" />` for listing the actual todos, and a section containing some operations, such as clearing completed todos.
  1739
+Now let's take a look at our application's static HTML. We're going to need an `<input>` for creating new todos, a `<ul id="todo-list" />` for listing the actual todos, and a section containing some operations, such as clearing completed todos.
1742 1740
 
1743 1741
 ```
1744 1742
   <section id="todoapp">
@@ -1766,7 +1764,7 @@ So far so good. Now in order to tie this into our Backbone Todo app, we're going
1766 1764
 
1767 1765
 ## Todo model
1768 1766
 
1769  
-The Todo model is remarkably straightforward. Firstly a todo has two attributes, a `title` and a `completed` status that indicates whether it's been completed. These attributes are passed as defaults, as you can see in the example below:
  1767
+The `Todo` model is remarkably straightforward. Firstly a todo has two attributes, a `title` and a `completed` status that indicates whether it's been completed. These attributes are passed as defaults, as you can see in the example below:
1770 1768
 
1771 1769
 ```javascript
1772 1770
 
@@ -1801,7 +1799,7 @@ We also have a `toggle()` function which allows to set whether a Todo item has b
1801 1799
 ##Todo collection
1802 1800
 
1803 1801
 
1804  
-Next we have our Todo collection used to group our models. The collection is being extended by localStorage which automatically persists Todo records to HTML5 Local Storage via the Backbone LocalStorage adapter, so they're saved between page requests.
  1802
+Next we have our `TodoList` collection used to group our models. The collection is being extended by localStorage which automatically persists Todo records to HTML5 Local Storage via the Backbone LocalStorage adapter, so they're saved between page requests.
1805 1803
 
1806 1804
 We've then got some static methods, `completed()` and `remaining()`, which return an array of unfinished and finished todos respectively.
1807 1805
 
@@ -1936,11 +1934,13 @@ You can see we've got a couple of things going on, an el (element), a `statsTemp
1936 1934
 
1937 1935
 In a nutshell this means we can now refer to this.el in our controller, which points to the `<section class="todoapp" />` element. As you can see, we're referring to el in the `addOne()` function, appending an element to the list.
1938 1936
 
1939  
-Now let's take a look at the constructor function. It's binding to several events on the Todo model, such as add, reset and all. Since we're delegating handling of updates and deletes to the TodoView view, we don't need to to worry about that here. The two pieces of logic are:
  1937
+Now let's take a look at the constructor function. It's binding to several events on the Todo model, such as add, reset and all. Since we're delegating handling of updates and deletes to the `TodoView` view, we don't need to to worry about that here. The two pieces of logic are:
  1938
+
  1939
+* When a new todo is created, the `add` event will be fired, calling `addAll()`. This iterates over all of the Todos currently in our collection and fires `addOne()` for each item.
1940 1940
 
1941  
-When a new todo is created, the add event will be fired, calling `addOne()` which instantiates the `TodoView` view, rendering it and appending the resultant element to our todo list
  1941
+* `addOne()` instantiates the TodoView view, rendering it and appending the resultant element to our Todo list.
1942 1942
 
1943  
-When a reset event is called (i.e. the todos have been loaded from Local Storage), `addAll()` will be called. This function iterates over all the todos, passing them to `addOne()`.
  1943
+* When a `reset` event is called (i.e. we wish to update the collection in bulk such as when the Todos have been loaded from Local Storage), `addAll()` is similarly called again.
1944 1944
 
1945 1945
 We can then add in the logic for creating new todos, editing them and filtering them based on whether they are complete.
1946 1946
 
@@ -3006,7 +3006,7 @@ Brunch works very well with Backbone, Underscore, jQuery and CoffeeScript and is
3006 3006
 Brunch can be installed via the nodejs package manager and is easy to get started with. If you happen to use Vim or Textmate as your editor of choice, you'll be happy to know that there are Brunch bundles available for both.
3007 3007
 
3008 3008
 
3009  
-## <a name="commonproblems" id="commonproblems">Common Problems & Solutions</a>
  3009
+# <a name="commonproblems" id="commonproblems">Common Problems & Solutions</a>
3010 3010
 
3011 3011
 In this section, we will review a number of common problems developers often experience once they've started to work on relatively non-trivial projects using Backbone.js, as well as present potential solutions. 
3012 3012
 
@@ -3447,7 +3447,7 @@ At the end of the day, the key to building large applications is not to build la
3447 3447
 
3448 3448
 
3449 3449
 # <a name="restfulapps">RESTful Applications</a>
3450  
----
  3450
+
3451 3451
 
3452 3452
 ##<a name="restful">Building RESTful applications with Backbone</a>
3453 3453
 
@@ -4662,10 +4662,10 @@ on-par with the effort required for the Node/Express implementation of the same
4662 4662
 This section is by no means the most comprehensive guide on building complex apps using all of the items in this particular stack. I do however hope it was an introduction sufficient enough to help you decide on what stack to try out for your next project.
4663 4663
 
4664 4664
 
4665  
-# <a name="advanced">Advanced</a>
4666  
----
  4665
+# <a name="advanced">Modular Development</a>
4667 4666
 
4668  
-##<a name="modularjs">Modular JavaScript</a>
  4667
+
  4668
+##<a name="modularjs">Introduction</a>
4669 4669
 
4670 4670
 When we say an application is modular, we generally mean it's composed of a set of highly decoupled, distinct pieces of functionality stored in modules. As you probably know, loose coupling facilitates easier maintainability of apps by removing dependencies where possible. When this is implemented efficiently, its quite easy to see how changes to one part of a system may affect another.
4671 4671
 
@@ -6427,10 +6427,10 @@ The benefit of this is that I don't need to go pulling in jQuery UI separately t
6427 6427
 The takeaway here is just to remember that if you're not (already) going through the hassle of conditional script/style loading based on screen-resolution (using matchMedia.js etc), there are simpler approaches that can be taken to cross-device component theming.
6428 6428
 
6429 6429
 
6430  
-<a name="testing">Unit Testing</a>
6431  
----
  6430
+#<a name="testing">Unit Testing</a>
6432 6431
 
6433  
-#<a name="unittestingjasmine">Unit Testing Backbone Applications With Jasmine</a>
  6432
+
  6433
+##<a name="unittestingjasmine">Unit Testing Backbone Applications With Jasmine</a>
6434 6434
 
6435 6435
 ##Introduction
6436 6436
 
@@ -7308,7 +7308,7 @@ As an exercise, I recommend now trying the Jasmine Koans in `practicals\jasmine-
7308 7308
 * [Backbone, PhantomJS and Jasmine](http://japhr.blogspot.com/2011/12/phantomjs-and-backbonejs-and-requirejs.html)
7309 7309
 
7310 7310
 
7311  
-#<a name="unittestingqunit">Unit Testing Backbone Applications With QUnit And SinonJS</a>
  7311
+##<a name="unittestingqunit">Unit Testing Backbone Applications With QUnit And SinonJS</a>
7312 7312
 
7313 7313
 ##Introduction
7314 7314
 
@@ -8379,8 +8379,8 @@ That's it for this section on testing applications with QUnit and SinonJS. I enc
8379 8379
 
8380 8380
 
8381 8381
 
8382  
-<a name="resources">Resources</a>
8383  
----
  8382
+# <a name="resources">Resources</a>
  8383
+
8384 8384
 
8385 8385
 Whilst what we get with Backbone out of the box can be terribly useful, there are some equally beneficial add-ons that can help simplify our development process. These include:
8386 8386
 
@@ -8395,8 +8395,8 @@ Whilst what we get with Backbone out of the box can be terribly useful, there ar
8395 8395
 In time, there will be tutorials in the book covering some of these resources but until then, please feel free to check them out. 
8396 8396
 
8397 8397
 
8398  
-<a name="conclusions">Conclusions</a>
8399  
----
  8398
+# <a name="conclusions">Conclusions</a>
  8399
+
8400 8400
 
8401 8401
 That's it for 'Developing Backbone.js Applications'. I hope you found this book both useful, enlightening and a good start for your journey into exploring Backbone.js. 
8402 8402
 
4  style.css
@@ -42,6 +42,10 @@ h1 {
42 42
     margin-bottom: 18px;
43 43
     font-size: 30px;
44 44
 }
  45
+h1 a{
  46
+    margin-top:100px;
  47
+    display: block;
  48
+}
45 49
 h2 {
46 50
     font-size: 24px;
47 51
 }

0 notes on commit 48dbc29

Please sign in to comment.
Something went wrong with that request. Please try again.