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

That Wibbly Wobbly Real-Timey Wimey stuff Muut was built from the ground up as a 100% realtime system. We bubble up events and listen to events throughout our infrastructure and deliver events to users within a couple milliseconds. We are able to target individual tabs, sessions, groups of users, exclude specific users and so on from any arbitrary event. To do all this we rolled our solution from scratch. An anonymous user and JohnS writing on two different tabs Why not just use static channels? Often realtime events are handled through static pub/sub type channels. Lets say you were interested in what I had to say (I'm sure everyone is) and we decided on a pattern for channels like this: So the channel we subscribe to is: Now anytime I publish a message to that channel, anyone subscribed will get it. There are a few problems here as complexity rises however. 1) A new set of connections for each channel This was a big one for us. Our solution you ask?

airbnb/rendr backbone.js - Backbone model persistence Improving performance on twitter.com 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 twitter.com 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

Riot.js — The 1kb client-side MVP framework Riot.js is a client-side Model-View-Presenter (MVP) library that weighs less than 1kb. Despite the small size, all the building blocks are there: a template engine, router, event library and a strict MVP pattern to keep things organized. On a finished application the views are automatically updated when the underlying model changes. Riot uses Model-View-Presenter (MVP) design pattern to organize your code so that it's modular, testable and easy to understand. Just like in MVC (Model View Controller) or MVVM (Model View ViewModel), the purpose is to separate your application logic from the view, but MVP is simpler. MVC is more complex. MVP, on the other hand, has less room for interpretation. Let's see how MVP works in Riot. Model Riot models define your application. // Enable MVP pattern (this is the secret for everything) riot.observable(self); // save state self.on("add remove edit", function() { store.put(items); }) } When designing a model it's important to clean your mind. View / 2.

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

backbone.js - Using Bootstrap carousel with Backbone routes Progressive enhancement is still important - JakeArchibald.com 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.

mranney/node_redis 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

GTmetrix | Website Speed and Performance Optimization 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 <!

Related: