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 <!
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
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:
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:
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. 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
Payne Digital Ltd - Bootbox.js - alert, confirm and flexible dialogs for twitter's bootstrap framework UPDATE 01/02/2012: Version 2.0.0 of the Bootbox library is out. Whilst this tutorial is still largely accurate and version 1.1.2 will work with the 1.x series of Twitter's Bootstrap framework, you should check out the updated version here. This article discusses a GitHub repository – feel free to browse the code or follow the project. I’ve been using twitter's bootstrap framework for a number of site builds recently, mainly because it gets me from black-and-white markup to vaguely-presentable websites in a very small amount of time. Dialogs using Twitter Bootstrap You may be wondering why a few wrapper methods around bootstrap's built-in dialog capabilities are either necessary or desirable. Note that this example is purely for demonstration purposes - you probably don't want to show an obtrusive dialog as soon as the page loads! It's important to stress that none of these points are negative, nor are they particularly arduous. Bootbox.js Alerts Which results in the following dialog:
airbnb/rendr