Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Compiling latest HTML.

  • Loading branch information...
commit f48f58eeeaa369f19ccefa090a6afa4b51281bf3 1 parent 3df22b7
@addyosmani authored
Showing with 89 additions and 15 deletions.
  1. +89 −15 index.html
View
104 index.html
@@ -110,6 +110,13 @@
<li><a href="#inheritance-mixins">Inheritance &amp; Mixins</a><ul>
<li><a href="#backbone-super">Backbone-Super</a></li>
</ul></li>
+<li><a href="#dependencies">Dependencies</a></li>
+<li><a href="#dependencies-1">Dependencies</a><ul>
+<li><a href="#dom-manipulation">DOM Manipulation</a></li>
+<li><a href="#utilities">Utilities</a></li>
+<li><a href="#restful-persistence">RESTFul persistence</a></li>
+<li><a href="#routing">Routing</a></li>
+</ul></li>
<li><a href="#namespacing">Namespacing</a><ul>
<li><a href="#what-is-namespacing">What is namespacing?</a></li>
</ul></li>
@@ -328,7 +335,10 @@
</ul></li>
<li><a href="#further-reading-resources">Further Reading &amp; Resources</a></li>
</ul></li>
-<li><a href="#resources">Resources</a></li>
+<li><a href="#resources">Resources</a><ul>
+<li><a href="#books-courses">Books &amp; Courses</a></li>
+<li><a href="#extensionslibraries">Extensions/Libraries</a></li>
+</ul></li>
<li><a href="#conclusions-3">Conclusions</a><ul>
<li><a href="#notes">Notes</a></li>
</ul></li>
@@ -338,29 +348,29 @@ <h2 id="prelude"><a href="#TOC">Prelude</a></h2>
<figure>
<img src="img/logo.jpg"><figcaption></figcaption>
</figure>
-<p>Welcome to my (in-progress) book about the <a href="http://documentcloud.github.com/backbone/">Backbone.js</a> framework for structuring JavaScript applications. It’s released under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">license</a> meaning you can both grab a copy of the book for free or help to further <a href="https://github.com/addyosmani/backbone-fundamentals/">improve</a> it.</p>
-<p>I’m very pleased to announce that this book will be out in physical form later in the year via <a href="http://oreilly.com">O’Reilly Media</a>. 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.</p>
+<p>Welcome to my (in-progress) book about the <a href="http://documentcloud.github.com/backbone/">Backbone.js</a> library for structuring JavaScript applications. It’s released under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">license</a> meaning you can both grab a copy of the book for free or help to further <a href="https://github.com/addyosmani/backbone-fundamentals/">improve</a> it.</p>
+<p>I’m very pleased to announce that this book will be out in physical form (once complete) via <a href="http://oreilly.com">O’Reilly Media</a>. 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.</p>
<p>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 <a href="https://github.com/jashkenas">Jeremy Ashkenas</a> for creating Backbone.js and <a href="https://github.com/addyosmani/backbone-fundamentals/contributors">these</a> members of the community for their assistance tweaking this project.</p>
<p>I hope you find this book helpful!</p>
<h1 id="introduction"><a href="#TOC">Introduction</a></h1>
-<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>
-<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>
+<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>
+<p>In short, we’re stuck with spaghetti code. Fortunately there are modern JavaScript frameworks and libraries that can assist with bringing structure and organization to our projects, improving how easily maintainable they are in the long-run.</p>
<h3 id="what-is-mvc"><a href="#TOC">What Is MVC?</a></h3>
-<p>These modern frameworks provide developers an easy path to organizing their code using variations of a pattern known as MVC (Model-View-Controller). MVC separates the concerns in an application down into three parts:</p>
+<p>These modern tools provide developers an easy path to organizing their code using variations of a pattern known as MVC (Model-View-Controller). MVC separates the concerns in an application down into three parts:</p>
<ul>
<li>Models represent the domain-specific knowledge and data in an application. Think of this as being a <q>type</q> of data you can model — like a User, Photo or Todo note. Models should notify anyone observing them about their current state (e.g Views).</li>
<li>Views are typically considered the User-interface in an application (e.g your markup and templates), but don’t have to be. They should know about the existence of Models in order to observe them, but don’t directly communicate with them.</li>
<li>Controllers handle the input (e.g clicks, user actions) in an application and Views can be considered as handling the output. When a Controller updates the state of a model (such as editing Todo note content), it doesn’t directly tell the View. This is what the observing nature of the View and Model relationship is for.</li>
</ul>
-<p>JavaScript <q>MVC</q> frameworks that can help us structure our code don’t always strictly follow the above pattern. Some frameworks will include the responsibility of the Controller in the View (e.g Backbone.js) whilst others add their own opinionated components into the mix as they feel this is more effective.</p>
+<p>JavaScript <q>MVC</q> frameworks that can help us structure our code don’t always strictly follow the above pattern. Some solutions will include the responsibility of the Controller in the View (e.g Backbone.js) whilst others add their own opinionated components into the mix as they feel this is more effective.</p>
<p>For this reason we refer to such frameworks as following the MV* pattern, that is, you’re likely to have a View and a Model, but more likely to have something else also included.</p>
<h3 id="what-is-backbone.js"><a href="#TOC">What is Backbone.js?</a></h3>
<figure>
<img src="img/backbonejsorg.png"><figcaption></figcaption>
</figure>
-<p>Backbone.js is a lightweight JavaScript framework for adding structure to your client-side code. It makes it easy to manage and decouple concerns in your application, leaving you with code that is more maintainable in the long term.</p>
-<p>Developers commonly use frameworks like Backbone.js to create single-page applications or SPAs. To put it simply, these apps enable the browser to react to changes in data on the client-side without the need to completely load up all your markup from the server, meaning no complete page-refreshes are necessary.</p>
-<p>Backbone.js is a mature, popular framework at the time of writing and has both a large development community online as well as a wealth of plugins and extensions available to build upon it. It has been used to create non-trivial applications by companies such as Disqus, Walmart, SoundCloud and Foursquare.</p>
+<p>Backbone.js is a lightweight JavaScript library for adding structure to your client-side code. It makes it easy to manage and decouple concerns in your application, leaving you with code that is more maintainable in the long term.</p>
+<p>Developers commonly use libraries like Backbone.js to create single-page applications or SPAs. To put it simply, these apps enable the browser to react to changes in data on the client-side without the need to completely load up all your markup from the server, meaning no complete page-refreshes are necessary.</p>
+<p>Backbone.js is a mature, popular library at the time of writing and has both a large development community online as well as a wealth of plugins and extensions available to build upon it. It has been used to create non-trivial applications by companies such as Disqus, Walmart, SoundCloud and Foursquare.</p>
<h3 id="when-do-i-need-a-javascript-mvc-framework"><a href="#TOC">When Do I Need A JavaScript MVC Framework?</a></h3>
<p>When building a single-page application using JavaScript, whether it involves a complex user interface or is simply trying to reduce the number of HTTP requests required for new Views, you will likely find yourself inventing many of the pieces that make up an MV* framework, such as Backbone.js.</p>
<p>At the outset, it isn’t terribly difficult to write an application framework that offers some opinionated way to avoid spaghetti code, however to say that it is equally as trivial to write something of the standard of Backbone would be a grossly incorrect assumption.</p>
@@ -549,7 +559,7 @@ <h3 id="controllers"><a href="#TOC">Controllers</a></h3>
<p>In our Todo application, a controller would be responsible for handling changes the user made in the edit view for a particular todo, updating a specific todo model when a user has finished editing.</p>
<p>It’s with controllers that most JavaScript MVC frameworks depart from this interpretation of the MVC pattern. The reasons for this vary, but in my opinion, Javascript framework authors likely initially looked at server-side interpretations of MVC (such as Ruby on Rails), realized that that approach didn’t translate 1:1 on the client-side, and so re-interpreted the C in MVC to solve their state management problem. This was a clever approach, but it can make it hard for developers coming to MVC for the first time to understand both the classical MVC pattern and the <q>proper</q> role of controllers in other JavaScript frameworks.</p>
<p>So does Backbone.js have Controllers? Not really. Backbone’s Views typically contain <q>controller</q> logic, and Routers (discussed below) are used to help manage application state, but neither are true Controllers according to classical MVC.</p>
-<p>In this respect, contrary to what might be mentioned in the official documentation or in blog posts, Backbone is neither a truly MVC/MVP nor MVVM framework. It’s in fact better to see it a member of the MV* family which approaches architecture in its own way. There is of course nothing wrong with this, but it is important to distinguish between classical MVC and MV* should you be relying on discussions of MVC to help with your Backbone projects.</p>
+<p>In this respect, contrary to what might be mentioned in the official documentation or in blog posts, Backbone is not a true MVC framework. It’s in fact better to see it a member of the MV* family which approaches architecture in its own way. There is of course nothing wrong with this, but it is important to distinguish between classical MVC and MV* should you be relying on discussions of MVC to help with your Backbone projects.</p>
<h3 id="controllers-in-spine.js-vs-backbone.js"><a href="#TOC">Controllers in Spine.js vs Backbone.js</a></h3>
<p><strong>Spine.js</strong></p>
<p>We now know that controllers are traditionally responsible for updating the view when the model changes (and similarly the model when the user updates the view). Since Backbone doesn’t have its <strong>own</strong> explicit controllers, it’s useful to review the controller from another MVC framework to appreciate the difference in implementations. Let’s take a look at <a href="http://spinejs.com/">Spine.js</a>:</p>
@@ -689,6 +699,7 @@ <h1 id="the-internals"><a href="#TOC">The Internals</a></h1>
<li>Collections</li>
<li>Routers</li>
<li>Views</li>
+<li>Dependencies</li>
<li>Namespacing</li>
</ul>
<h2 id="models-1"><a href="#TOC">Models</a></h2>
@@ -996,7 +1007,7 @@ <h2 id="collections"><a href="#TOC">Collections</a></h2>
<p>Sometimes you may also want to get a model based on its client id. The client id is a property that Backbone automatically assigns models that have not yet been saved. You can get a model’s client id from its <code>.cid</code> property.</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">// extends on previous examples</span>
-<span class="kw">var</span> todoCid = <span class="kw">todos</span>.<span class="fu">getByCid</span>(<span class="kw">todo2</span>.<span class="fu">cid</span>);
+<span class="kw">var</span> todoCid = <span class="kw">todos</span>.<span class="fu">get</span>(<span class="kw">todo2</span>.<span class="fu">cid</span>);
<span class="co">// As mentioned in previous example, </span>
<span class="co">// models are passed by reference</span>
@@ -1664,6 +1675,59 @@ <h4 id="backbone-super"><a href="#TOC">Backbone-Super</a></h4>
<span class="co">// ...</span>
}
});</code></pre>
+<h2 id="dependencies"><a href="#TOC">Dependencies</a></h2>
+<h2 id="dependencies-1"><a href="#TOC">Dependencies</a></h2>
+<p>The official Backbone.js <a href="http://backbonejs.org/">documentation</a> states:</p>
+<blockquote>
+<p>Backbone’s only hard dependency is Underscore.js ( &gt; 1.3.1). For RESTful persistence, history support via Backbone.Router and DOM manipulation with Backbone.View, include json2.js, and either jQuery ( &gt; 1.4.2) or Zepto.</p>
+</blockquote>
+<p><em><a href="https://github.com/bestiejs/lodash">Lo-dash</a>, a fork of Underscore containing performance enhancements is also compatible with Backbone.</em></p>
+<p>What this translates to is that if you require working with anything beyond models, you will need to include a DOM manipulation library such as jQuery or Zepto. Underscore is primarily used for it’s utility methods (which Backbone relies upon heaviy) and json2.js for legacy browser JSON support if Backbone.sync is used.</p>
+<h3 id="dom-manipulation"><a href="#TOC">DOM Manipulation</a></h3>
+<p>Although most developers won’t need it, Backbone does support setting a custom DOM library to be used instead of these options. From the source:</p>
+<pre><code>// Set the JavaScript library that will be used for DOM manipulation and
+// Ajax calls (a.k.a. the `$` variable). By default Backbone will use: jQuery,
+// Zepto, or Ender; but the `setDomLibrary()` method lets you inject an
+// alternate JavaScript library (or a mock library for testing your views
+// outside of a browser).
+
+Backbone.setDomLibrary = function(lib) {
+ $ = lib;
+};</code></pre>
+<p>Calling this method will allow you to use any custom DOM-manipulation library. e.g:</p>
+<pre><code>Backbone.setDomLibrary(aCustomLibrary);</code></pre>
+<h3 id="utilities"><a href="#TOC">Utilities</a></h3>
+<p>Underscore.js is heavily used in Backbone behind the scenes for everything from object extension through to event binding. As the entire library is generally included, we get free access to a number of useful utilities we can use on Collections such as filtering <code>_.filter()</code>, sorting <code>_.sortBy()</code>, mapping <code>_.map()</code> and so on.</p>
+<p>From the source:</p>
+<p>``` // Underscore methods that we want to implement on the Collection. var methods = [<q>forEach</q>, <q>each</q>, <q>map</q>, <q>reduce</q>, <q>reduceRight</q>, <q>find</q>, <q>detect</q>, <q>filter</q>, <q>select</q>, <q>reject</q>, <q>every</q>, <q>all</q>, <q>some</q>, <q>any</q>, <q>include</q>, <q>contains</q>, <q>invoke</q>, <q>max</q>, <q>min</q>, <q>sortBy</q>, <q>sortedIndex</q>, <q>toArray</q>, <q>size</q>, <q>first</q>, <q>initial</q>, <q>rest</q>, <q>last</q>, <q>without</q>, <q>indexOf</q>, <q>shuffle</q>, <q>lastIndexOf</q>, <q>isEmpty</q>, <q>groupBy</q>];</p>
+<p>// Mix in each Underscore method as a proxy to Collection#models. _.each(methods, function(method) { Collection.prototype[method] = function() { return <em>[method].apply(</em>, [this.models].concat(_.toArray(arguments))); }; ```</p>
+<p>However, for a complete linked list of methods supported, see the <a href="http://backbonejs.org/#Collection-Underscore-Methods">official documentation</a>.</p>
+<h3 id="restful-persistence"><a href="#TOC">RESTFul persistence</a></h3>
+<p>Models and collections in Backbone can be <q>sync</q>ed with the server using the <code>fetch</code>, <code>save</code> and <code>destroy</code> methods. All of these methods delegate back to the <code>Backbone.sync</code> function, which actually wraps jQuery/Zepto’s <code>$.ajax</code> function, calling GET, POST and DELETE for the respective persistence methods on Backbone models.</p>
+<p>From the the source for <code>Backbone.sync</code>:</p>
+<pre><code>var methodMap = {
+ &#39;create&#39;: &#39;POST&#39;,
+ &#39;update&#39;: &#39;PUT&#39;,
+ &#39;delete&#39;: &#39;DELETE&#39;,
+ &#39;read&#39;: &#39;GET&#39;
+ };
+
+Backbone.sync = function(method, model, options) {
+ var type = methodMap[method];
+ options || (options = {});
+ // ... Followed by lots of Backbone.js configuration, then..
+ return $.ajax(_.extend(params, options));</code></pre>
+<h3 id="routing"><a href="#TOC">Routing</a></h3>
+<p>Calls to <code>Backbone.History.start</code> rely on jQuery/Zepto binding <code>popState</code> or <code>hashchange</code> event listeners back to the window object.</p>
+<p>From the source for <code>Backbone.history.start</code>:</p>
+<pre><code>// Depending on whether we&#39;re using pushState or hashes, and whether &#39;onhashchange&#39; is
+// supported, determine how we check the URL state.
+if (this._hasPushState) {
+ $(window).bind(&#39;popstate&#39;, this.checkUrl);
+ } else if (this._wantsHashChange &amp;&amp; (&#39;onhashchange&#39; in window) &amp;&amp; !oldIE) {
+ $(window).bind(&#39;hashchange&#39;, this.checkUrl);
+ ...</code></pre>
+<p><code>Backbone.History.stop</code> similarly uses your DOM manipulation library to unbind these event listeners.</p>
<h2 id="namespacing"><a href="#TOC">Namespacing</a></h2>
<p>When learning how to use Backbone, an important and commonly overlooked area by tutorials is namespacing. If you already have experience with namespacing in JavaScript, the following section will provide some advice on how to specifically apply concepts you know to Backbone, however I will also be covering explanations for beginners to ensure everyone is on the same page.</p>
<h4 id="what-is-namespacing"><a href="#TOC">What is namespacing?</a></h4>
@@ -8159,7 +8223,18 @@ <h2 id="further-reading-resources"><a href="#TOC">Further Reading &amp; Resource
<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>
</ul>
<h1 id="resources"><a href="#TOC">Resources</a></h1>
-<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>
+<h2 id="books-courses"><a href="#TOC">Books &amp; Courses</a></h2>
+<ul>
+<li><a href="https://peepcode.com/products/backbone-js">PeepCodes Backbone.js Basics</a></li>
+<li><a href="http://www.codeschool.com/courses/anatomy-of-backbonejs">CodeScrools Anatomy Of Backbone</a></li>
+<li><a href="http://recipeswithbackbone.com/">Recipies With Backbone</a></li>
+<li><a href="http://ricostacruz.com/backbone-patterns/">Backbone Patterns</a></li>
+<li><a href="https://learn.thoughtbot.com/products/1-backbone-js-on-rails">Backbone On Rails</a></li>
+<li><a href="https://github.com/Integralist/Blog-Posts/blob/master/MVC%20in%20JavaScript%20with%20Backbone.md">MVC In JavaScript With Backbone</a></li>
+<li><a href="http://backbonetutorials.com/">Backbone Tutorials</a></li>
+<li><a href="http://lostechies.com/derickbailey/2011/09/13/resources-for-and-how-i-learned-backbone-js/">Derick Baileys Resources For Learning Backbone</a></li>
+</ul>
+<h2 id="extensionslibraries"><a href="#TOC">Extensions/Libraries</a></h2>
<ul>
<li><a href="https://github.com/derickbailey/backbone.marionette">Backbone Marionette</a></li>
<li><a href="http://walmartlabs.github.com/thorax">Thorax</a></li>
@@ -8171,7 +8246,6 @@ <h1 id="resources"><a href="#TOC">Resources</a></h1>
<li><a href="https://github.com/janmonschke/backbone-couchdb">Backbone CouchDB</a></li>
<li><a href="https://github.com/n-time/backbone.validations">Backbone Validations - HTML5 inspired validations</a></li>
</ul>
-<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>
<h1 id="conclusions-3"><a href="#TOC">Conclusions</a></h1>
<p>That’s it for <q>Developing Backbone.js Applications</q>. I hope you found this book both useful, enlightening and a good start for your journey into exploring Backbone.js.</p>
<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>
@@ -8179,7 +8253,7 @@ <h1 id="conclusions-3"><a href="#TOC">Conclusions</a></h1>
<h2 id="notes"><a href="#TOC">Notes</a></h2>
<p>I would like to thank the Backbone.js, Stack Overflow, DailyJS (Alex Young) and JavaScript communities for their help, references and contributions to this book. This project would not be possible without you so thank you! :)</p>
<hr>
-<p>Where relevant, copyright Addy Osmani, 2012.</p>
+<p>Where relevant, copyright Addy Osmani, 2012-2013.</p>
<script type="text/javascript">
var _gaq = _gaq || [];
Please sign in to comment.
Something went wrong with that request. Please try again.