Permalink
Browse files

Introduction content changes.

  • Loading branch information...
1 parent 4e8fb60 commit d33fdaf69cd9354e31772486284038cc6d7a8882 @addyosmani committed Aug 27, 2012
Showing with 125 additions and 42 deletions.
  1. BIN backbone-fundamentals.epub
  2. +33 −12 backbone-fundamentals.rtf
  3. BIN img/backbonejsorg.png
  4. +38 −13 index.html
  5. +54 −17 index.md
View
Binary file not shown.
View
@@ -39,6 +39,10 @@ Aura
Introduction
}}}
\par}
+{\pard \ql \f0 \sa0 \li720 \fi-360 \endash \tx360\tab MVC, Or Rather MV* Frameworks\par}
+{\pard \ql \f0 \sa0 \li720 \fi-360 \endash \tx360\tab What is Backbone.js?\par}
+{\pard \ql \f0 \sa0 \li720 \fi-360 \endash \tx360\tab When Do You Need A JavaScript MV* Framework?\par}
+{\pard \ql \f0 \sa0 \li720 \fi-360 \endash \tx360\tab When To Consider Using Backbone.js\sa180\par}
{\pard \ql \f0 \sa180 \li360 \fi-360 \bullet \tx360\tab \b \fs24 {\field{\*\fldinst{HYPERLINK "#fundamentals"}}{\fldrslt{\ul
Fundamentals
}}}
@@ -192,25 +196,42 @@ Resources
}}}
\sa180\par}
{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Introduction\par}
-{\pard \ql \f0 \sa180 \li0 \fi0 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.\par}
-{\pard \ql \f0 \sa180 \li0 \fi0 Maturity in software (framework) development isn\u8217't simply about how long a framework has been around. It\u8217's about how solid the framework is and more importantly how well it\u8217'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?\line In this book, I will be covering the Backbone.js MVC library, which I consider the best of the current family of JavaScript architectural solutions for helping better structure your code.\par}
-{\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}
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs28 What is Backbone?\par}
-{\pard \ql \f0 \sa180 \li0 \fi0 Backbone.js is one of a number of JavaScript frameworks for creating MVC-like web applications. On the front-end, it\u8217's my architectural framework of choice as it\u8217's both mature, relatively lightweight and can be easily tested using third-party toolkits such as Jasmine or QUnit. Other MVC frameworks you may be familiar with include Ember.js, Spine, YUILibrary and JavaScriptMVC.\par}
-{\pard \ql \f0 \sa180 \li0 \fi0 Backbone is maintained by a number of contributors, most notably: Jeremy Ashkenas, creator of CoffeeScript, Docco and Underscore.js. As Jeremy is a believer in detailed documentation, there\u8217's a level of comfort in knowing you\u8217're unlikely to run into issues which are either not explained in the official docs or which can\u8217't be nailed down with some assistance from the #documentcloud IRC channel. I strongly recommend using the latter if you find yourself getting stuck.\par}
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs28 Why should you consider using it?\par}
+{\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}
+{\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}
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs28 What Is MVC, Or Rather MV*?\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 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:\par}
+{\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab Models represent the domain-specific knowledge and data in an application. Think of this as being a \u8216'type\u8217' of data you can model \u8212- like a User, Photo or Note. Models should notify anyone observing them about their current state (e.g Views).\par}
+{\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab Views are typically considered the User-interface in an application (e.g your markup and templates), but don\u8217't have to be. They should know about the existence of Models in order to observe them, but don\u8217't directly communicate with them.\par}
+{\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab 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 the caption on a Photo), it doesn\u8217't directly tell the View. This is what the observing nature of the View and Model relationship is for.\sa180\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 JavaScript \u8216'MVC\u8217' frameworks that can help us structure our code don\u8217'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.\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 For this reason we refer to such frameworks as following the MV* pattern, that is, you\u8217're likely to have a View and a Model, but more likely to have something else also included.\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs28 What exactly is Backbone.js?\par}
+{\pard \ql \f0 \sa0 \li0 \fi0 \par}
+{\pard \ql \f0 \sa180 \li0 \fi0 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.\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 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.\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 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.\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs28 When Do You Need A JavaScript MV* Framework?\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 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 like Backbone or Ember.\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 At the outset, it isn\u8217'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.\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 There\u8217's a lot more that goes into structuring an application than tying together a DOM manipulation library, templating and routing. Mature MV* frameworks typically not only include many of the pieces you would find yourself writing, but also include solutions to problems you\u8217'll find yourself running into later on down the road. This is a time-saver that you shouldn\u8217't underestimate the value of.\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 So, where will you likely need an MV* framework and where won\u8217't you?\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 If you\u8217're writing an application that will likely only be communicating with an API or back-end data service, where much of the heavy lifting for viewing or manipulating that data will be occurring in the browser, you may find a JavaScript MV* framework useful. Good examples of applications that fall into this category are GMail and Google Docs.\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 These applications typically download a single payload containing all the scripts, stylesheets and markup users need for common tasks and then perform a lot of additional behavior in the background. It\u8217's trivial to switch between reading an email or document to writing one and you don\u8217't need to ask the application to render the whole page again at all.\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 If, however, you\u8217're building an application that still relies on the server for most of the heavy-lifting of Views/pages and you\u8217're just using a little JavaScript or jQuery to make things a little more interactive, an MV framework may be overkill. There certainly are complex Web applications where the partial rendering of views can* be coupled with a single-page application effectively, but for everything else, you may find yourself better sticking to a simpler setup.\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 Maturity in software (framework) development isn\u8217't simply about how long a framework has been around. It\u8217's about how solid the framework is and more importantly how well it\u8217'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?\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs28 Why should you consider using Backbone.js?\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 Does the following describe you?:\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 "I want something flexible which offers a minimalist solution to separating concerns in my application. It should support a persistence layer and RESTful sync, models, views (with controllers), event-driven communication, templating and routing. It should be imperative, allowing one to update the View when a model changes. I\u8217'd like some decisions about the architecture left up to me. Ideally, many large companies have used the solution to build non-trivial applications.\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 As I may be building something complex, I\u8217'd like there to be an active extension community around the framework that have already tried addressing larger problems (Marionette, Chaplin, Aura, Thorax). Ideally, there are also scaffolding tools (grunt-bbb, brunch) available for the solution."\par}
+{\pard \ql \f0 \sa180 \li0 \fi0 If so, continue reading.\par}
{\pard \ql \f0 \sa180 \li0 \fi0 Backbone\u8217's main benefits, regardless of your target platform or device, include helping:\par}
{\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab Organize the structure to your application\par}
{\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab Simplify server-side persistence\par}
{\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab Decouple the DOM from your page\u8217's data\par}
{\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab Model data, views and routers in a succinct manner\par}
{\pard \ql \f0 \sa0 \li360 \fi-360 \bullet \tx360\tab Provide DOM, model and collection synchronization\sa180\par}
-{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs28 Is Backbone right for you?\par}
-{\pard \ql \f0 \sa180 \li0 \fi0 Does the following describe you?:\par}
-{\pard \ql \f0 \sa180 \li0 \fi0 "I want something flexible which offers a minimalist solution to separating concerns in my application. It should support a persistence layer and RESTful sync, models, views (with controllers), event-driven communication, templating and routing. It should be imperative, allowing one to update the View when a model changes. I\u8217'd like some decisions about the architecture left up to me. Ideally, many large companies have used the solution to build non-trivial applications.\par}
-{\pard \ql \f0 \sa180 \li0 \fi0 As I may be building something complex, I\u8217'd like there to be an active extension community around the framework that have already tried addressing larger problems (Marionette, Chaplin, Aura, Thorax). Ideally, there are also scaffolding tools (grunt-bbb, brunch) available for the solution."\par}
-{\pard \ql \f0 \sa180 \li0 \fi0 If so, continue reading.\par}
{\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}
+{\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}
{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs32 Fundamentals\par}
{\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}
{\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}
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit d33fdaf

Please sign in to comment.