Backbonejs Application Resource

Tutorial

Developing Backbone.js Applications
O'Reilly 出品的線上電子書，內容很齊全，值得一讀

Backbone Tutorials By Thomas Davis
這裡提供比較快速簡短的教學，從基礎的 model, view, router, collection ，到中級的一些簡單範例，很適合花時間閱讀一下。

Backbone.Marionette.js: A Gentle Introduction
Build a Marionett.js app, one step at a time
這本書對於 marionette 有著完整的介紹，從簡單的概念講起，帶入 marionette 的設計理念，最後時做出一個簡單的 contact manager。這本書可以透過網路上購買，最低購買價為17美元，你喜歡的話，可以多付一點錢購買這本書，這種機制滿有趣的，有點像是付小費的感覺。
demo: http://davidsulc.github.io/marionette-gentle-introduction/
github: https://github.com/davidsulc/marionette-gentle-introduction

A Thorough Introduction To Backbone.Marionette
作者 Joseph Zimmerman 對於 Marionette 做深入的探討，目前提供兩篇文章，第一篇介紹 event aggragator、region，第二篇探討 module 的設計概念，兩篇文章都寫得很好，適合嘗試進入 backbone marionette 世界的讀者觀看。

Structuring complex Backbone.js apps
用比較高層次的視野解說如何建構出一個複雜的 backbone application，裡面提到的議題都值得細細品味思考一下。

Example

TodoMVC
這個網站提供使用各種 Javascript MVC 製作同樣網站的範例，來幫助使用者選擇適合自己的 MVC 架構。

backbone
利用純 backbone 製作出 TodoMVC

backbone_marionette
透過 marionette 提出的新架構，重新製作出 TodoMVC

backbone_marionette_require
因為 require 實在太方便了，所以把 require 加進原先 backbone 和 marionette ，重新製做出 TodoMVC

Boilerplate

RESThub Backbone stack
RESThub Backbone stack provides a client-side full stack and guidelines for building enterprise grade HTML5 applications
這個作者將一些常用的 javascript tool 打包在一起，提供給初學者一個完整的樣板，直接拿來用，就可以建構出應用程式的雛形。如果他可以採用 bower package management，應該會更好些。

Introduction

10 BACKBONE.JS AND JQUERY USEFUL PLUGINS/ARTICLES
這裡介紹了十個可以跟 backbone 結合的 js 工具

Javascript Tool

bower
這是twitter提供的一套管理套件的工具，試用過以後，非常的滿意。使用上相當簡單，主要安裝 nodejs ，接著安裝 bower 就可以了。唯一的缺點是，下載套件的速度比較慢，甚至我還常遇到卡住的狀況。但是還是很值得使用。

requirejs
RequireJS 提供一種稱為「非同步模組定義 (Asynchronous Module Definition)」( 簡稱為 AMD ) 的模組載入方式，這種方式可以同時間讀取所有引用和相依的模組

requirejs-text
Load text files and treat them as dependencies. Great for loading templates. The text strings can be inlined in an optimized build when the optimizer is used.

requirejs-i18n
Load string bundles used in internationalization (i18n) that are made up of separate country/language/locale-specific bundles.

backbone
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, viewswith declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

backbone-validation
It gives you a simple, extensible way of declaring validation rules on your model, and overrides Backbone's validate method behind the scene

underscore
Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js

underscore-string
Underscore.string is JavaScript library for comfortable manipulation with strings, extension for Underscore.js

handlebars
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.

boostrap
這是 twitter 很佛心提供的網頁 UI 開發工具，裡面包含了許多常用的 UI 元件，和一些標準化的 CSS，很適合網站的快速開發。

Marionette
Make your backbone applications dance

Tips

Avoiding Common Backbone.js Pitfalls
撰寫 backbone 時，如果處理 view 和 events 不洽當的時候，很容易產生 memory leak 問題，這篇文章有提供簡單的解決方法。作者共提及四個議題
1. Creating memory leaks by not unbinding events
2. Causing multiple DOM reflows when rendering collections
3. Doing unnecessary XHR requests on page load
4. Non-optimistic AJAX
5. Mixing concerns between Views and Models

3 Tips For Writing Better Backbone Views
提供了三個小技巧，Don’t Access Variables Out Of The View Scope，Write The Template Inline，Render UI Upon Data Change, Not User Interaction

Backbone.js 1.0.0 nested view memory leak in Chrome
作者透過 chrome 的開發者工具，示範為何 backbone 的 view 容易產生 memory leak 的問題。