Backbone.js Backbone.js Training - A Multi-Day, Hands-On, Training Class Notice Of Course Discontinuation Please note that as of January 2013 I am no longer offering my Backbone training class on a regular basis. I have exited the consulting world in favor of a full time position working with Kendo UI as a Developer Advocate. Backbone.js Resources There are many resources available for both learning Backbone.js and for asking questions when you run into issues. My Own Resources Documents And User Groups Blogs Code / Sample Projects Application Structure / Boilerplates Books Backbone.js Fundamentals (online book) Addy Osmani is writing a free e-book discussing the fundamentals of Backbone, with a collaborative approach through the use of Github. Backbone.js + CoffeeScript (e-book) From the website: There is something deeply satisfying about writing Backbone.js MVC applications in CoffeeScript, the "little language" designed by the creator of Backbone to make developing JavaScript beautiful. Thoughtbot - Backbone.js On Rails (e-book) Recipes With Backbone (e-book)
Organizing your application using Modules (require.js) - Backbone.js Tutorials Unfortunately Backbone.js does not tell you how to organize your code, leaving many developers in the dark regarding how to load scripts and lay out their development environments. This was quite a different decision to other JavaScript MVC frameworks who were more in favor of setting a development philosophy. Hopefully this tutorial will allow you to build a much more robust project with great separation of concerns between design and code. This tutorial will get you started on combining Backbone.js with AMD (Asynchronous Module Definitions). What is AMD? Asynchronous Module Definitions designed to load modular code asynchronously in the browser and server. This tutorial will use Require.js to implement a modular and organized Backbone.js. I highly recommend using AMD for application development Quick Overview ModularScalableCompiles well(see r.js )Market Adoption( Dojo 1.6 converted fully to AMD ) Why Require.js? Require.js has a great community and it is growing rapidly. Getting started <!
Backbone.js: Hacker's Guide There’s no denying the popularity and impact that Backbone.js (License: MIT, GitHub: documentcloud / backbone) by Jeremy Ashkenas and DocumentCloud has made. Although the documentation and examples are excellent, I thought it would be interesting to review the code on a more technical level. Hopefully this will give readers a deeper understanding of Backbone, and as the MVC series progresses these code reviews should prove useful in accurately comparing the many competing frameworks. Follow me on a guided tour through Backbone’s source to really learn how it works and what it provides. Namespace and Conflict Management Like most client-side projects, Backbone.js wraps everything in an immediately-invoked function expression: (function(){ // Backbone.js}).call(this); Several things happen during this configuration stage. var root = this;var previousBackbone = root.Backbone; Backbone.noConflict = function() { root.Backbone = previousBackbone; return this;}; var Backbone;if (typeof exports !
Require.JS Usage§ 1 Load JavaScript Files§ 1.1 RequireJS takes a different approach to script loading than traditional <script> tags. While it can also run fast and optimize well, the primary goal is to encourage modular code. As part of that, it encourages using module IDs instead of URLs for script tags. RequireJS loads all code relative to a baseUrl. Or, baseUrl can be set manually via the RequireJS config. RequireJS also assumes by default that all dependencies are scripts, so it does not expect to see a trailing ".js" suffix on module IDs. There may be times when you do want to reference a script directly and not conform to the "baseUrl + paths" rules for finding it. Ends in ".js".Starts with a "/".Contains an URL protocol, like "http:" or "https:". In general though, it is best to use the baseUrl and "paths" config to set paths for module IDs. www/ index.html js/ app/ sub.js lib/ jquery.js canvas.js app.js in index.html: and in app.js: data-main Entry Point§ 1.2 Define a Module§ 1.3
Developing Backbone.js Applications - By Addy Osmani (@addyosmani) Available free for open-source reading below or for purchase via the O'Reilly store. Pull requests and comments always welcome. Prelude Not so long ago, “data-rich web application” was an oxymoron. 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. Begin with the fundamentals, work your way through the exercises, and learn how to build an application that is both cleanly organized and maintainable. Target Audience Credits <!
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 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 Partials
From jQuery to Backbone Présentation de backbone.js Backbone.js est un cadre applicatif pour les applications à forte teneur en javascript. Backbone.js peut se définir comme un framework MVC mais pas au sens classique du terme. Ici le C représente des Collections d’objets. Le M et le V désignent respectivement les modèles et les vues. Backbone.js ne possède qu’une dépendance ferme, il s’agit de underscore.js, qui est maintenu par la même équipe. Le rôle d’underscore.js est de vous apporter tout un tas de méthodes pour vous simplifier la vie (enumerable, binding, template, comparaison…) sans faire 500ko. Généralement jQuery vient compléter la liste des dépendances finales de l’application, car il y a fort à parier que vous aurez à minima besoin de manipuler le DOM. Quand utiliser Backbone.js Backbone.js est un excellent choix pour les applications dites «single page application», c’est à dire une page principale avec un nombre important d’interactions utilisateur. Pour cela Backbone.js possède son propre routeur. Ce que Backbone.js ne fait pas
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. 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. 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. Beginners articles about Backbone typically don't mention intermediate or advanced concepts by their very nature. Backbone Fundamentals Backbone Fundamentals hopes to change that. Interested in helping out? Contributing Please tell me if I'm wrong about something. What's next? Thanks!.
Backbone.js Lessons Learned and Improved Sample App A few weeks ago, I posted a three-part Backbone.js tutorial (part 1, part 2, part 3). Since then, I spent more time building a real-life application with Backbone. I ran into a number of interesting problems, spent time thinking about solutions, and decided to write them down in this post. Based on this new experience, I revisited the Wine Cellar application used in my tutorial. Externalizing Templates In the initial implementation of my wine cellar app, I “inlined” my templates in a succession of <script> tags like the one below inside index.html. This approach works fine for a simple application with a limited number of templates. That’s certainly a valid approach, but depending on your circumstances, it may still not be the ideal solution: long string concatenation is painful (especially for larger templates). Other people load external templates using Require.js and the text plugin, which is definitely an approach worth considering for larger projects. “Before” code: “After” code:
How to start with Backbone.js: A simple skeleton app Prerequisites You need a solid knowledge of JavaScript, familiarity with Backbone, Ruby, HAML, SASS and CoffeeScript to find this writeup useful. Also, I’m developing on a Mac and have not tested this on other platforms. Although, I do not see any reason why it shouldn’t work. 1. Philosophy Part of the success of Rails was the conventions and its predefined directory tree. Backbone, being the nimble, does not prescribe any particular code or directory structure. This skeleton app was extracted from a production app and then extensively annotated, to explain certain decisions and choices. 2. When I first started to play with Backbone I was already heavily entrenched in the Ruby and Rails world. Disclaimer: I rarely developed pure client-side software, though I was using JavaScript extensively to make things faster and more responsive. Thing is that MVC on the server-side is quite a bit different from MVC on the client. Using backbone.js as a library was “easy”. 3. CoffeeScript, HAML and SASS
Integrating Devise with Backbone.js | Josh Huckabee For the impatient: view the code, or see the demo. Update 30 May 2012: The original version of the application and this article referenced the backbone.modelbinding project by Derick Bailey. Per the readme, that project has been abandoned and I have replaced backbone.modelbinding with the preferred backbone.modelbinder project. All code and referenced samples below have been updated accordingly. Several weeks ago I set out to create a single page web app leveraging Backbone.js on the front end with Ruby on Rails powering the back end. One of the first things I need on almost all new projects is a way to handle user registration, authentication, and authorization. Arguably, doing this is unnecessary as Devise ships with its own UI implementation. To implement the Devise UI in Backbone.js I started by creating 3 Backbone models, one each for authentication, registration, and password retrieval. UserRegistration: UserSession: UserPasswordRecovery: Here is the login view: