background preloader

Our First Node.js App: Backbone on the Client and Server

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. 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! So, the app: we re-launched our Mobile Web site using this new stack, replacing the Backbone.js + Rails stack that it used previously. Gimme the Deets! Routing Requests Views NestedView and this data: Related:  backbonenotesPerformance

airbnb/rendr backbone.js - Backbone model persistence Improving performance on To connect you to information in real time, it’s important for Twitter to be fast. That’s why we’ve been reviewing our entire technology stack to optimize for speed. When we shipped #NewTwitter in September 2010, we built it around a web application architecture that pushed all of the UI rendering and logic to JavaScript running on our users’ browsers and consumed the Twitter REST API directly, in a similar way to our mobile clients. That architecture broke new ground by offering a number of advantages over a more traditional approach, but it lacked support for various optimizations available only on the server. To improve the experience for everyone, we’ve been working to take back control of our front-end performance by moving the rendering to the server. This has allowed us to drop our initial page load times to 1/5th of what they were previously and reduce differences in performance across browsers. No more #! Reducing time to first tweet Loading only what we need

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. 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 [ ]

backbone.js - Using Bootstrap carousel with Backbone routes Progressive enhancement is still important - About 5 years ago it felt like the progressive enhancement battle had been won, but after watching the reactions to Nicholas Zakas' "Enough with the JavaScript already" it seems all the old arguments are back with reinforcements. Well, I'm wearing my angry-pants and I'm ready for a jog down ranty lane. This is not about users without JS If you turn JavaScript off, you're going to have a tough time on the web. Progressive enhancement has never been about users who've turned JavaScript off, or least it wasn't for me. Elevators vs escalators Christian Heilmann re-purposes a Mitch Hedberg observation to relate to progressive enhancement. Given the diversity of user agents, your JS failing isn't an edge case. Reduce your testing efforts in older browsers A couple of years ago I was working on an intranet site for a large company. Then, at the 11th hour, the client asked for the site to work on Blackberrys, and not the shiny WebKit ones, some of them were using the old Blackberry browser.

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

Reduce the size of the above-the-fold content  |  PageSpeed Insights  |  Google Developers This rule triggers when PageSpeed Insights detects that additional network round trips are required to render the above the fold content of the page. Overview If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will require additional round trips between your server and the user’s browser. For users on networks with high latencies such as mobile networks this can cause significant delays to page loading. Recommendations To make pages load faster, limit the size of the data (HTML markup, images, CSS, JavaScript) that is needed to render the above-the-fold content of your page. Structure your HTML to load the critical, above-the-fold content first Load the main content of your page first. Consider the following examples of how a site could be restructured to load faster: If your HTML loads third-party widgets before it loads the main content, change the order to load the main content first. Reduce the amount of data used by your resources

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 <!

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: