Backbone JS

Facebook Twitter
addyosmani (Addy Osmani)
Large-scale JavaScript Application Architecture


Brunch Installation is one-line, once you have node.js. In your console, run: npm install -g brunch Getting started Create a new Brunch project:
Backbone patterns

Backbone patterns

Here, I try to document the good practices that our team has learned along the way building Backbone applications. Inline templates The problem: if you need to use view templates in a small Backbone application, defining your templates in JavaScript code will be unwieldy and difficult to maintain. Solution: You may need some view templates to be inline in the HTML page. This solution has been outlined by John Resig in his blog post about JavaScript micro templating. Defining inline templates
Formatting dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); April 5th 2014, 2:22:39 pmSaturdayApr 5th 142014 escaped 20142014-04-05T14:22:39+02:00

Moment.js - A lightweight javascript date library

Moment.js - A lightweight javascript date library
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.


Build a Contacts Manager Using Backbone.js: Part 4 Build a Contacts Manager Using Backbone.js: Part 4 In part four of this series, we saw how easy it is to add and remove models from our collection, and keep the page updated in sync with the changes. In this part, we're going to look at editing existing model data. Getting Started We'll start out by adding another simple button to the template, which will enable editing of its data: As we are adding this button to our existing template, we can also add an entirely new template that can be used to render an editable form in which the model data can be changed.
Large-scale JavaScript Application Architecture
Backbone Boilerplate Backbone Boilerplate Introduction This is a self-documenting example app useful for quick developer and/or learning backbone.js. There are many boiler plates for Backbone.js boilerplates popping up over the place with different philosophies. This solution aims to be absolutely light-weight and robust keeping the following points in mind; Stand on the shoulders of giants (Backbone.js, Underscore.js, Require.js, Html5Boilerplate) Perpetuate great and efficient practices for single page applications Optimized deployment consisting of one js file, one image sprite and one css file (with exceptions) One command optimization No enforced pre-compilation creating a low entry barrier to starting Modular environment (reusable, isolated testing) Speed! The project aims at being a modular backbone environment with as little authority on development as possible such that developers can innovate and contribute in an attempt to mimic the success of backbone.js ambiguous nature.
Adventures in Mockjax | Ja.mesBrown JavaScript and Web Development If you are developing web applications that utilize Ajax (and most do today) and are using jQuery and/or Backbone.js, you should be building with mock Ajax JSON responses. You can view the code on Github: or the examples: Servers are slow / Rapid Iteration When developing against a local server, the ajax response will typically 100-300 milliseconds, but could even be longer. If you are developing against a remote end-point, you could see varying response times that could even be 500 milliseconds to over a second. If you are trying to quickly develop an application that takes one second per response, it is going to take a while and you are going to get frustrated and/or bored. Adventures in Mockjax | Ja.mesBrown JavaScript and Web Development
Backbone.js + jQuery = Best OO Friends Example Today we are going to dive deep into OO JavaScript programming using Backbone.js and jQuery. This is going to be a detailed example. If you want to dive directly into the code, you can check out the Before we dive into the code, check out the working example of the code: Backbone.js + jQuery = Best OO Friends Example | Ja.mesBrown JavaScript and Web Development Backbone.js + jQuery = Best OO Friends Example | Ja.mesBrown JavaScript and Web Development
Organizing Your Backbonejs Application With Modules

Organizing Your Backbonejs Application With Modules

If you have spent any time looking at Backbone.js, like many others, you are probably amazed by how lightweight, flexible and elegant it is. Backbone.js is incredibly powerful, but not prescriptive in how it should be used. With great power comes great responsibility, and if you’ve tried to use Backbone.js for a large project you might be asking yourself: how do I organize my code? When thinking about “code organization” the questions you might be asking are: How do I declare and invoke Backbone types? How do I manage a separation of concerns?
To Do's Example
Backbone.js 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, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. The project is hosted on GitHub, and the annotated source code is available, as well as an online test suite, an example application, a list of tutorials and a long list of real-world projects that use Backbone. Backbone is available for use under the MIT software license. You can report bugs and discuss features on the GitHub issues page, on Freenode IRC in the #documentcloud channel, post questions to the Google Group, add pages to the wiki or send tweets to @documentcloud. Backbone is an open-source component of DocumentCloud. Downloads & Dependencies (Right-click, and use "Save As")


16 Javascript Libraries for Visualizations on Datavisualization

As data visualization often needs to reach a broad audience the browser is becoming the number one tool to publish and share visualizations. A lot of visualizations require user-interaction to unleash their full potential, thus interactive applets that run directly in the browser are a a great way to analyze the data at hand. Beside the usual suspects like Flash, Silverlight and Processing, JavaScript is quickly gaining ground in the field of interactive visualization embedded in websites.
Anatomy of Backbone.js byronanderson I had just been thinking that my javascript was getting messy and hard to maintain, and this course shows up to introduce me to Backbone.js . The course is in line with the level of javascript that you should know after completing the other javascript courses this site offers- jQuery Air: First Flight and Captain's Log, and CoffeeScript. The course's difficulty derives almost entirely from understanding the value-add of Backbone.js itself- you don't need to set up the server-side code or the layout html! The exercises are just handhold-y enough to keep things moving at a good clip.
JavaScript Architecture: Backbone.js Routers Updated Aug 11, 2012 to reflect current library versions. In JavaScript Architecture: Backbone.js Views we discussed how to build dynamic apps that change views on the fly using JavaScript. Because view-switching is done without reloading the page or transferring control to a separate page, these are called single-page applications. Single-page applications pose a few issues we need to address: When users hit their browser’s back button, they will be taken away from the app completely rather than back to a previous view within the app itself.Users are only able to link to or bookmark the app itself–not a specific view within the app.Deep views within the app may not be crawlable by search engines. We want a great experience for our users.
One of the common issues or questions I see for Backbone.js goes something like this: “Whenever I hit the same route more than once, I end up getting seeing this call being made multiple times. It seems to accumulate another call every time I hit the route. What’s going on?” Zombies! RUN! (Managing Page Transitions In Backbone Apps)
Nailing the Interactions on Pageless Apps (with Backbone.js) | Matt Kelly | Bay Area jQuery Conf 2011 on Vimeo Developing Backbone.js Applications About This is the home of Developing Backbone.js Applications, an open-source book about the Backbone.js library for structuring JavaScript applications.


Backbone Fundamentals – A Free Work-In-Progress Book For Developers Of All Levels