Backbone JS

Facebook Twitter

Addyosmani (Addy Osmani) Large-scale JavaScript Application Architecture. Brunch. Backbone patterns. Here, I try to document the good practices that our team has learned along the way building Backbone applications.

Backbone patterns

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 You can put templates in an HTML <script> tag. Change the type attribute to something else so it will not be interpreted as JavaScript.Set an id so we can easily refer to it. Using inline templates $("#template-contact").html();//=> "<div class='contact'>\n<strong><%= name %></str...

" template = _.template($("#template-contact").html());//=> function() { ... } In JavaScript, you can get the innerHTML (or jQuery's .html()) of that HTML element to fetch the raw template data. Integrating into Backbone // = {}; Moment.js - A lightweight javascript date library. RequireJS. 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.

Build a Contacts Manager Using Backbone.js: Part 4

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. It's very similar to the exiting template, and can be added to the page after the existing template: The new template consists mostly of <input> elements that expose the editable data. Next we can bind some event handlers for the new buttons we've added; update the events object in the ContactView class so that it contains the following new bindings: Don't forget to add the trailing comma to the end of the existing binding! Switching a Contact Into Edit Mode Adding a New Type Summary. Large-scale JavaScript Application Architecture. Backbone Boilerplate. 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.

Ja.mesBrown JavaScript and Web Development

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. Endpoints Unavailable or Developing on an Airplane There are a number of reasons that an API endpoint could be unavailable and inevitably, it will be when you want to work on your application. Undeveloped Endpoints Unit Testing After rapid iteration, unit testing is probably the number one reason for mocking. 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.

Ja.mesBrown JavaScript and Web Development

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: Each of the files is heavily commented and should provide insight into what each major section of code is doing. (Open the Backbone.js Sample to view the full text) [More] 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.

Organizing Your Backbonejs Application With Modules

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? All good questions! There’s been a lot of debate about this issue in the Backbone.js community for several reasons. Having said all this, let’s dive into some of the details. Here’s how you might layout your application structure: Static Assets Your static assets such as CSS, images and JavaScript libraries required by your code should go under a parent directory, such as the assets directory in our example above. Application code Index.html 3. Backbone.js.

Jasmine: BDD for your JavaScript. 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.

16 Javascript Libraries for Visualizations on Datavisualization

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. We’ve collected 13 16 JavaScript visualization libraries that help you get started faster, keep it flexible and develop with higher reliability. Processing.js Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Runs in Safari, Firefox, Chrome, Opera, IE Uses Canvas tag / IE Canvas tag Link Raphaël Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. 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 .

Anatomy of 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. As is frequently the case in the Code School course offerings, my difficulty understanding concepts and applications was anticipated by the presenters, and additional explanation and external sources came quickly to help. JavaScript Architecture: Backbone.js Routers. Updated Aug 11, 2012 to reflect current library versions.

JavaScript Architecture: Backbone.js Routers

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. Like the topics we’ve addressed before, these issues aren’t specific to Backbone. Examples This concept is most easily taught by example so let’s assume we’re building an app that sells shirts.

This time we set up our route with three parameter parts. Zombies! RUN! (Managing Page Transitions In Backbone Apps) 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.

Zombies! RUN! (Managing Page Transitions In Backbone Apps)

It seems to accumulate another call every time I hit the route. What’s going on?” Or “I’ve noticed that my views are still handling events after I remove them from the screen. “How do I make sure I clean things up when moving to a new page in my app?” At the heart of all of these questions is a problem that most backbone developers will run into at some point: zombies. The Plague: Event Binding The majority of the problems that people are referring to in these questions and issues are caused by the events that we bind to in our apps. We bind events to our DOM elements using the declarative `events` configuration in our views: We bind events from our models and collections so that our views can respond to changes and re-render themselves: Events are everywhere, and with good reason.

Rule #2: Double Tap. Nailing the Interactions on Pageless Apps (with Backbone.js) Addyosmani/backbone-fundamentals. Backbone Fundamentals – A Free Work-In-Progress Book For Developers Of All Levels. About a week ago, I began working on a new article about Backbone.js.

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

It was due to cover some concepts and insights intermediate or advanced users might appreciate, but I found myself wanting to reference topics beginners might need to know if they wanted to get the most out it. Quite a few of them. In the end, I decided it might make more sense to just write a book on Backbone instead. Something free, targeted at developers of all levels, that I could reguarly update easily and perhaps get some input on from the community (if they were up for it). I called it Backbone Fundamentals. If you'd like to check it out, you can find the work-in-progress book on GitHub :) Why write a book?

Now, there's a plethora of (great) posts about Backbone out there I could have just linked to – many of which are well written and respected, but I began to think about my own journey of learning how to use the framework. Backbone Fundamentals Backbone Fundamentals hopes to change that. Contributing What's next?