Backbone.js Tutorials. Hello Backbone.js Tutorial. Shameless advertisement: Don't forget to check out Agility.js, a simpler alternative to Backbone.js. Hello Backbone is a simple Backbone.js tutorial comprised of self-explanatory "hello world" examples of increasing complexity. It was designed to provide a smoother transition from zero to the popular Todos example. Backbone.js offers a lean MVC framework for organizing your Javascript application. It leads to more maintainable code by untangling the "spaghetti" of callbacks tied to different parts of the DOM and the backend server that often arises in rich client-side applications. The tutorial starts with a minimalist View object, and progressively introduces event binding/handling, Models, and Collections.
Start the tutorial Once in the tutorial, use the navigation menu in the top-right corner to view other examples. Copyright © Artur Adib [ arturadib.com ] Our First Node.js App: Backbone on the Client and Server. Here at Airbnb, we’ve been looking curiously at Node.js for a long time now. We’ve used it for odds and ends, such as the build process for some of our libraries, but we hadn’t built anything production-scale. Until now. The Problem There’s a disconnect in the way we build rich web apps these days.
In order to provide a snappy, fluid UI, more and more of the application logic is moving to the client. But all too often, it’s not so clean; application logic is somewhat arbitrarily split between client and server, or in some cases needs to be duplicated on both sides. If you’ve seen my tech talk or last blog post, then all this should sound familiar. This Holy Grail approach is something we had dreamt about for a long time, but not having any experience with Node.js, we didn’t quite know where to start. Our Solution I’m proud to announce that we’ve launched our first Holy Grail app into production!
The performance gains are an awesome side effect of this design. Gimme the Deets! Views. Airbnb/rendr. 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 stop this from happening?” “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: Rule #2: Double Tap. 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. 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. The use of client-side JavaScript was limited to improving the user experience. 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 <! 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. These are not definitive answers, just my current thoughts… and as always, I value your input. Based on this new experience, I revisited the Wine Cellar application used in my tutorial. You can find the improved version here (PHP back-end) or here (Java back-end). 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). 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. It is actually a fork of the Common.js specification. 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? Getting started Example Demo. Backbone patterns. Building apps with Backbone.js Here, I try to document the good practices that our team has learned along the way building Backbone applications.
This document assumes that you already have some knowledge of Backbone.js, jQuery, and of course, JavaScript itself. Table of contents Thanks. 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.