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
How To Build a Custom Carousel with jQuery and Roundabout Sliders and Carousels are one of the coolest ways to display information on websites. They can contain tons of information in a smaller area, and the animation of automatic sliding and the large, beautiful images that are usually included draw the user's attention. Well, I'll show you how to set up an awesome carousel with jQuery and the Roundabout plugin. Terminology and Background Generally, the words "slider" and "carousel" refer to the same thing. At my job, I've been working on a project where I designed what the Carousel would look like and all of the features it would need before I looked around to see if I could even find a plugin with all of these features. So what you'll be reading about is how I made that plugin do more than it said it could, so that I could have exactly what I wanted. Demo | Download The Starting Markup The first thing we need to do is download the Roundabout plugin, which is available on its project page. The Starting Script Adding in the Description Text
Create a simple carousel in Backbone.js | Framework...ish Let’s create a basic slider using the next technologies: Backbone to handle models and viewsUnderscore to handle the templates So first we would need to create a basic model for the slide with the id and headline atributes, and show, getEl and getControl methods. We will also create a collection of this model named Slides. After we will create the main logic, the view, this will host the templates for the controllers and the displaying the slides. Finally we iniciate this model with a set of Slides And we add the html that will adopt all this logic This article was base on the gist A simple Slideshow module wrapped in a Backbone View, you will find a more complex code there and also a link to a live example so you can experience how it works ;).
Performance is a Feature We've always put a heavy emphasis on performance at Stack Overflow and Stack Exchange. Not just because we're performance wonks (guilty!), but because we think speed is a competitive advantage. There's plenty of experimental data proving that the slower your website loads and displays, the less people will use it. [Google found that] the page with 10 results took 0.4 seconds to generate. The page with 30 results took 0.9 seconds. I believe the converse of this is also true. Do you, too, feel the need – the need for speed? 1. The golden reference standard for building a fast website remains Yahoo's 13 Simple Rules for Speeding Up Your Web Site from 2007. There's some good advice here, but there's also a lot of advice that only makes sense if you run a website that gets millions of unique users per day. So … a funny thing happened to me since I wrote that four years ago. We've long since implemented most of the 13 items on Yahoo's list, except for one. 2. 3. Did it work?
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. 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). In the end, I decided to write my own simple template loader. “Before” code: