Skip to content
This repository has been archived by the owner on Jul 12, 2020. It is now read-only.

Commit

Permalink
Update builds
Browse files Browse the repository at this point in the history
  • Loading branch information
addyosmani committed Dec 28, 2014
1 parent a901745 commit 8acae6a
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 26 deletions.
Binary file modified backbone-fundamentals.epub
Binary file not shown.
36 changes: 28 additions & 8 deletions backbone-fundamentals.md
Expand Up @@ -133,7 +133,7 @@ Maturity in software (framework) development isn't simply about how long a frame

Backbone provides a minimal set of data-structuring (Models, Collections) and user interface (Views, URLs) primitives that are helpful when building dynamic applications using JavaScript. It's not opinionated, meaning you have the freedom and flexibility to build the best experience for your web application how you see fit. You can either use the prescribed architecture it offers out of the box or extend it to meet your requirements.

The library doesn't focus on widgets or replacing the way you structure objects - it just supplies you with utilities for manipulating and querying data in your application. It also doesn't prescribe a specific template engine - while you are free to use the Micro-templating offered by Underscore.js (one of its dependencies), views can bind to HTML constructed using your templating solution of choice.
The library doesn't focus on widgets or replacing the way you structure objects - it just supplies you with utilities for manipulating and querying data in your application. Backbone also doesn't prescribe a specific template engine. While you are free to use the micro-templating offered by Underscore.js (Backbone's only hard dependency), views can bind to HTML constructed using your templating solution of choice.

Looking at the [large](http://backbonejs.org/#examples) number of applications built with Backbone, it's clear that it scales well. Backbone also works quite well with other libraries, meaning you can embed Backbone widgets in an application written with AngularJS, use it with TypeScript, or just use an individual class (like Models) as a data backer for simpler apps.

Expand Down Expand Up @@ -289,10 +289,12 @@ Our example will need a div element to which we can attach a list of Todo's. It
<div id="todo">
</div>
<script type="text/template" id="item-template">
<div>
<div class="view">
<input id="todo_complete" type="checkbox" <%= completed ? 'checked="checked"' : '' %> />
<%= title %>
<label><%= title %></label>
<button class="destroy"></button>
</div>
<input class="edit" value="<%= title %>">
</script>
<script src="jquery.js"></script>
<script src="underscore.js"></script>
Expand Down Expand Up @@ -3920,6 +3922,24 @@ var Book = new mongoose.Schema({

//Models
var BookModel = mongoose.model( 'Book', Book );

// Configure server
app.configure( function() {
//parses request body and populates request.body
app.use( express.bodyParser() );

//checks request.body for HTTP method overrides
app.use( express.methodOverride() );

//perform route lookup based on url and HTTP method
app.use( app.router );

//Where to serve static content
app.use( express.static( path.join( application_root, 'site') ) );

//Show all errors in development
app.use( express.errorHandler({ dumpExceptions: true, showStack: true }));
});
```

As you can see, schema definitions are quite straight forward. They can be more advanced, but this will do for us. I also extracted a model (BookModel) from Mongo. This is what we will be working with. Next up, we define a GET operation for the REST API that will return all books:
Expand Down Expand Up @@ -4604,17 +4624,17 @@ var Jeremy = new Person({

// create the first view instance
var zombieView = new ZombieView({
model: Person
model: Jeremy
})
zombieView.close(); // double-tap the zombie

// create a second view instance, re-using
// the same variable name to store it
zombieView = new ZombieView({
model: Person
model: Jeremy
})

Person.set('email', 'jeremyashkenas@example.com');
Jeremy.set('email', 'jeremyashkenas@example.com');
```

Now we only see one alert box when this code runs.
Expand Down Expand Up @@ -6781,7 +6801,7 @@ The main reason you'd want to configure RequireJS is to add shims, which we'll c

##### RequireJS Shims

Ideally, each library that we use with RequireJS will come with AMD support. That is, it uses the `define` method to define the library as a module. However, some libraries - including Backbone and one of its dependencies, Underscore - don't do this. Fortunately RequireJS comes with a way to work around this.
Ideally, each library that we use with RequireJS will come with AMD support. That is, it uses the `define` method to define the library as a module. While Backbone and Underscore have added AMD support in recent years, we're going to show an example of how to shim a library that does not using RequireJS.

To demonstrate this, first let's shim Underscore, and then we'll shim Backbone too. Shims are very simple to implement:

Expand Down Expand Up @@ -11569,7 +11589,7 @@ At the heart of our JavaScript MVC implementation is an `Event` system (object)
var Cranium = Cranium || {};

// Set DOM selection utility
var $ = document.querySelector.bind(document) || this.jQuery || this.Zepto;
var $ = this.jQuery || this.Zepto || document.querySelectorAll.bind(document);

// Mix in to any object in order to provide it with custom events.
var Events = Cranium.Events = {
Expand Down
38 changes: 29 additions & 9 deletions backbone-fundamentals.rtf
Expand Up @@ -162,7 +162,7 @@ Object-Oriented JavaScript
{\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 Consider Backbone.js?\par}
{\pard \ql \f0 \sa180 \li0 \fi0 Backbone provides a minimal set of data-structuring (Models, Collections) and user interface (Views, URLs) primitives that are helpful when building dynamic applications using JavaScript. It\u8217's not opinionated, meaning you have the freedom and flexibility to build the best experience for your web application how you see fit. You can either use the prescribed architecture it offers out of the box or extend it to meet your requirements.\par}
{\pard \ql \f0 \sa180 \li0 \fi0 The library doesn\u8217't focus on widgets or replacing the way you structure objects - it just supplies you with utilities for manipulating and querying data in your application. It also doesn\u8217't prescribe a specific template engine - while you are free to use the Micro-templating offered by Underscore.js (one of its dependencies), views can bind to HTML constructed using your templating solution of choice.\par}
{\pard \ql \f0 \sa180 \li0 \fi0 The library doesn\u8217't focus on widgets or replacing the way you structure objects - it just supplies you with utilities for manipulating and querying data in your application. Backbone also doesn\u8217't prescribe a specific template engine. While you are free to use the micro-templating offered by Underscore.js (Backbone\u8217's only hard dependency), views can bind to HTML constructed using your templating solution of choice.\par}
{\pard \ql \f0 \sa180 \li0 \fi0 Looking at the {\field{\*\fldinst{HYPERLINK "http://backbonejs.org/#examples"}}{\fldrslt{\ul
large
}}}
Expand Down Expand Up @@ -285,10 +285,12 @@ History API
<div id="todo">\line
</div>\line
<script type="text/template" id="item-template">\line
<div>\line
<div class="view">\line
<input id="todo_complete" type="checkbox" <%= completed ? 'checked="checked"' : '' %> />\line
<%= title %>\line
<label><%= title %></label>\line
<button class="destroy"></button>\line
</div>\line
<input class="edit" value="<%= title %>">\line
</script>\line
<script src="jquery.js"></script>\line
<script src="underscore.js"></script>\line
Expand Down Expand Up @@ -3111,7 +3113,25 @@ var Book = new mongoose.Schema(\{\line
\});\line
\line
//Models\line
var BookModel = mongoose.model( 'Book', Book );\par}
var BookModel = mongoose.model( 'Book', Book );\line
\line
// Configure server\line
app.configure( function() \{\line
//parses request body and populates request.body\line
app.use( express.bodyParser() );\line
\line
//checks request.body for HTTP method overrides\line
app.use( express.methodOverride() );\line
\line
//perform route lookup based on url and HTTP method\line
app.use( app.router );\line
\line
//Where to serve static content\line
app.use( express.static( path.join( application_root, 'site') ) );\line
\line
//Show all errors in development\line
app.use( express.errorHandler(\{ dumpExceptions: true, showStack: true \}));\line
\});\par}
{\pard \ql \f0 \sa180 \li0 \fi0 As you can see, schema definitions are quite straight forward. They can be more advanced, but this will do for us. I also extracted a model (BookModel) from Mongo. This is what we will be working with. Next up, we define a GET operation for the REST API that will return all books:\par}
{\pard \ql \f0 \sa180 \li0 \fi0 \f1 //Get a list of all books\line
app.get( '/api/books', function( request, response ) \{\line
Expand Down Expand Up @@ -3610,17 +3630,17 @@ Managing Events As Relationships, Not Just Resources
\line
// create the first view instance\line
var zombieView = new ZombieView(\{\line
model: Person\line
model: Jeremy\line
\})\line
zombieView.close(); // double-tap the zombie\line
\line
// create a second view instance, re-using\line
// the same variable name to store it\line
zombieView = new ZombieView(\{\line
model: Person\line
model: Jeremy\line
\})\line
\line
Person.set('email', 'jeremyashkenas@example.com');\par}
Jeremy.set('email', 'jeremyashkenas@example.com');\par}
{\pard \ql \f0 \sa180 \li0 \fi0 Now we only see one alert box when this code runs.\par}
{\pard \ql \f0 \sa180 \li0 \fi0 Rather than having to manually remove these event handlers, though, we can let Marionette do it for us.\par}
{\pard \ql \f0 \sa180 \li0 \fi0 \f1 var ZombieView = Marionette.ItemView.extend(\{\line
Expand Down Expand Up @@ -5322,7 +5342,7 @@ RequireJS documentation
}}}
.\par}
{\pard \ql \f0 \sa180 \li0 \fi0 \b \fs20 RequireJS Shims\par}
{\pard \ql \f0 \sa180 \li0 \fi0 Ideally, each library that we use with RequireJS will come with AMD support. That is, it uses the {\f1 define} method to define the library as a module. However, some libraries - including Backbone and one of its dependencies, Underscore - don\u8217't do this. Fortunately RequireJS comes with a way to work around this.\par}
{\pard \ql \f0 \sa180 \li0 \fi0 Ideally, each library that we use with RequireJS will come with AMD support. That is, it uses the {\f1 define} method to define the library as a module. While Backbone and Underscore have added AMD support in recent years, we\u8217're going to show an example of how to shim a library that does not using RequireJS.\par}
{\pard \ql \f0 \sa180 \li0 \fi0 To demonstrate this, first let\u8217's shim Underscore, and then we\u8217'll shim Backbone too. Shims are very simple to implement:\par}
{\pard \ql \f0 \sa180 \li0 \fi0 \f1 require.config(\{\line
shim: \{\line
Expand Down Expand Up @@ -9141,7 +9161,7 @@ Underscore
var Cranium = Cranium || \{\};\line
\line
// Set DOM selection utility\line
var $ = document.querySelector.bind(document) || this.jQuery || this.Zepto;\line
var $ = this.jQuery || this.Zepto || document.querySelectorAll.bind(document);\line
\line
// Mix in to any object in order to provide it with custom events.\line
var Events = Cranium.Events = \{\line
Expand Down

0 comments on commit 8acae6a

Please sign in to comment.