background preloader

Backbone learning

Facebook Twitter

Getting started with Backbone.js and Rails. I recently started using Backbone.js with my existing web application and have found it to be extremely useful for keeping all my Javascript front-end code organized.

Getting started with Backbone.js and Rails

As my application has a complicated user interface, I realized my JavaScript code was getting out of control and was tough to maintain due to lack of structure. This forced me to look for options with which I could keep my code clean and in a structured way. And I found there are many JS frameworks that attempt to offer similar benefits, like Backbone.js, Ember.js, Angular.js, ExtJs and so on.

Setup a Clean Backbone JS App With Rails. Backbone JS is a minimal framework that can be easily integrated into Rails projects.

Setup a Clean Backbone JS App With Rails

This guide includes some best practices and ideas learned after setting up and working with Backbone for two years on both small and larger projects. Backbone is less convention based than Rails, so use this tutorial as good starting point to develop your own best practices. If you don't know Rails this guide can still be useful (many of the conventions are front end and can be cloned to other frameworks), but some Ruby code is included. This guide also uses CoffeeScript - a fantastic language that compiles into JavaScript. To get started add the following gems to your project: gem 'backbone-on-rails'gem 'handlebars_assets'gem 'hamlbars' Alternatively the assets can be included by downloading and adding the following JS files under vendor/assets/javascripts folder: Once the gems are included (and bundle is run), create the following directory structure: In app/assets/javascripts/application.js:

Building Large Backbone Applications. Backbone gives structure to web applications, but often it is not enough.

Building Large Backbone Applications

A lot of questions arise when complexity grows. How do we manage UI interactions? What do we do with domain use cases? What about client/server interactions? Finally, how do we wire everything up? What is a Good Architecture? Before we jump into the solution, let’s look at what constitutes a good architecture: Backbone.js Tutorial: Getting Started with Backbone. Featured in JavaScript Weekly.

Backbone.js Tutorial: Getting Started with Backbone

Backbone.js is a lightweight framework designed to give “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 connect[ions to] existing API[s] over a RESTful JSON interface.” Basically, it helps organize your spaghetti. Unlike a traditional MVC which has three components, Backbone has six main components: (1) Models – store data; (2) Views – display model data; (3) Collections – group models, like a JavaScript array, (4) Events – allow custom events; (5) Routers – create navigation; and (6) Sync – maps Backbone to server side databases.

Because of this, Backbone is sometimes referred to as an MV* framework. Technically, Backbone is a library and, because of this, it is highly customizable. Backbone.js Patterns and Best Practices. Backbone.js is a super light framework that allows you to structure your JavaScript codes in an MV* fashion.

Backbone.js Patterns and Best Practices

This framework is an excellent tool when it comes to creating an organized and modular code base for web apps of any size or complexity. Although lightweight, Backbone.js results in lots of boilerplate. Learning the best practices and design patterns will help you avoid these problems and allow you to ensure that the best standards are followed. Developing Backbone.js Applications - By Addy Osmani (@addyosmani) Available free for open-source reading below or for purchase via the O'Reilly store.

Developing Backbone.js Applications -

Pull requests and comments always welcome. Prelude Not so long ago, “data-rich web application” was an oxymoron. Today, these applications are everywhere and you need to know how to build them. Traditionally, web applications left the heavy-lifting of data to servers that pushed HTML to the browser in complete page loads. Think of the Ajax shopping cart which doesn’t require a refresh on the page when adding an item to your basket. The rise of arbitrary code on the client-side which can talk to the server however it sees fit has meant an increase in client-side complexity. Thankfully, there are a growing number of JavaScript libraries that can help improve the structure and maintainability of your code, making it easier to build ambitious interfaces without a great deal of effort. Target Audience Acknowledgements Credits Target Version Reading What Is MVC? Backbone.js Tutorial. Developing a Backbone.js Edge » Bleeding Edge Press. Check out the new Google Hangout video of the authors.

Developing a Backbone.js Edge » Bleeding Edge Press

By Casey Foster, Aidan Feldman, David Tonge, Phil Freo and Tim Branyen.