15 January 2024

10 Web Apps Built with Backbone.js: A Deep Dive

By Ronald Smith

Come on, admit it, we’ve all been there – stuck in a maze of tangled code. But hey, why settle for that when there’s a healthier option available? Brace yourself for a journey through the realm of Backbone.js, a JavaScript library that can work wonders for your web applications. Think of Backbone.js as an MVP (Model-View-Presenter, for simplicity) framework, though some folks like to call it an MV* framework since it doesn’t have that traditional “C” piece.

So, what’s the fuss all about? Well, Backbone.js empowers you to construct web apps that are not only lightning-fast and stylish, but also data-savvy. It divides your data logic and user interface, freeing you from those pesky ties to the Document Object Model (DOM). And guess what? Backbone.js is scalable – just what you need when your app starts to spread its wings.

Now, here’s the cherry on top: Backbone.js is a pro at syncing up with any RESTful API right out of the box. That means you can seamlessly connect your client-side app to your existing server-side API using a RESTful JSON interface. Phew, no need to reinvent the wheel!

In this blog post, I’ll introduce you to ten web apps that showcase the power of the Backbone library. These apps will give you a glimpse into the exciting possibilities of using Backbone.js for your future web projects.

First on the list is Trello, an online app designed for collaboration and project management. With Trello, you can organize your projects using Boards, Checklists, Cards, and Card Lists. It also offers features like Conversations for easy communication with your team members.

Trello is a prime example of what can be achieved with Backbone.js. The app leverages Backbone’s capabilities along with the HTML5 History API and the Mustache templating language. This combination allows Trello to create a user-friendly interface that is not only easy to maintain but also dynamically syncs with the server whenever a DOM event occurs. This means that updates can be seamlessly handled, ensuring a smooth user experience.

10 Web Apps Built with Backbone.js: A Deep Dive

Trello uses Backbone Model and Views for its elements like Cards or Members, and Backbone Collections for related Models – for example, Cards in a list. We developers also created our own cache for Models on the client side, ensuring faster updates and more efficient code reuse.

2. Foursquare

You probably know about Foursquare, the popular location-based social networking app that lets you share venues with friends from all over the world.

The core JavaScript API of Foursquare is built on Backbone Models, where the Model classes of the Foursquare API (like Users, Venues, and Check-ins) inherit methods and properties from the Backbone Model classes.

10 Web Apps Built with Backbone.js: A Deep Dive

The code can be outlined as follows: fourSq.api.models.Venue = fourSq.api.models.Model.extend(< . >); Can you believe it? With Backbone, we can write JavaScript that is really well-organized.

Backbone Views play a crucial role in the Foursquare app. They bring added functionality like cool maps and lists on the homepage. Alongside Backbone, Foursquare’s JavaScript API relies on jQuery, Underscore.js (which is Backbone’s main dependency), and the Closure Compiler.

Let’s also take a look at Basecamp’s Calendar feature. This popular project management app uses Backbone.js to power its Calendar.

When we created Basecamp Calendar, our main focus was on making group scheduling easy to understand and updating it instantly. We accomplished this by designing an interactive interface that allows you to schedule events with your team effortlessly. Whenever there are changes to the data, Basecamp Calendar uses Backbone to render Views, which are then displayed in ECO templates written in CoffeeScript. This ensures that the calendar updates itself in just milliseconds, providing you with the most up-to-date information.

10 Web Apps Built with Backbone.js: A Deep Dive

I find it fascinating that the developer team chose not to make the entire Basecamp a single-page app. They only used Backbone.js in the Calendar feature, where its advantages could be fully utilized. This shows that you don’t always need to build a full single-page app with Backbone. It’s better to carefully consider where it can be applied.

I built Flowdock myself, starting from scratch and using Backbone.js as the foundation. The biggest hurdle my team and I faced was figuring out how to make real-time messages and workflows possible. You see, Backbone.js is designed to connect to the server side through a RESTful interface, which doesn’t allow for the seamless flow of real-time data.

So, here’s what we did to solve this problem: instead of relying on the REST API, we made the decision to save messages using the Socket.io real-time engine. This allowed us to bring in a whole new level of real-time capability, making Flowdock a truly dynamic and interactive platform.

10 Web Apps Built with Backbone.js: A Deep Dive

To accomplish this, we developed a custom method known as Backbone.sync. This method enables seamless communication between the JavaScript-powered frontend and the backend (Node.js). Additionally, we utilize Socket.io, another JavaScript library, to facilitate this communication.

On the server side, Flowdock primarily operates as a Rails application. However, we also have a separate Node.js backend specifically dedicated to handling Socket.io connections. This setup ensures a smooth and efficient real-time user experience.

But we didn’t stop there! To further enhance the real-time capabilities of Flowdock, we incorporated Bacon.js, a nifty JavaScript library that enables functional reactive programming. By leveraging Bacon.js’s EventStreams feature, we are able to keep our Backbone Model and Collections constantly updated.

Now, let’s move on to one of our exciting features: the Cocktail Search.

Cocktail Search is an awesome app that lets you dive into the code of a super simple version of Backbone.js. The brain behind it all is Python, but what we’re interested in is the app’s script.js file.

If you take a peek at the code, you’ll find a really basic structure of the Model-View-* framework: there’s one Model defined in the Cocktail class that keeps the default settings of the Backbone.Model parent class unchanged. On top of that, there’s a Backbone Collection for search results, and 3 Backbone Views, each of which adds cool new methods to the Backbone.View parent class.

10 Web Apps Built with Backbone.js: A Deep Dive

If you open the index.html file, you can see how the developer included Backbone.js, along with its necessary components – Underscore.js and jQuery – in the head section. Out of these, Underscore.js is the main requirement for Backbone, while jQuery is necessary if you want to manipulate the DOM using Backbone Views, as is the case with the Cocktail Search app.

Now let’s talk about Bitbucket. It’s a source code hosting and code management app, similar to GitHub. Atlassian, the company behind Bitbucket, also uses Backbone in their JIRA commercial issue tracking software, which is another one of their main products.

When I was using Backbone.js extensively in my apps, I noticed a few things that I felt were missing. I came across a lot of issues caused by the loose definition conventions of Backbone.js, which led to silent failures. What does that mean, you ask? Well, it means that Models, Collections, and Views don’t always clearly define the custom events they can trigger. And if that wasn’t frustrating already, Models don’t always clearly define the attributes they expose either.

10 Web Apps Built with Backbone.js: A Deep Dive

As a developer, I understand the appeal of having a library that allows for flexibility and customization. That’s why I appreciate the permissive nature of Backbone, a popular JavaScript library. However, the team at Atlassian had a different vision and wanted to enhance Backbone’s capabilities. So they created their own extension called Backbone.Brace, which not only adds mixins but also provides self-documented attributes and events.

If you find yourself frustrated by the limitations of Backbone, you’re not alone. Thankfully, you have the option to incorporate Backbone.Brace into your own application. This extension is open source and hosted on Bitbucket, making it accessible to all developers. It’s like getting the best of both worlds!

Now, let’s explore another interesting platform: SoundCloud.

We all love music, don’t we? Whether you’re a budding artist or simply enjoy listening, SoundCloud is the place to be. It’s a popular audio distribution platform that allows you to record, upload, and share your own audio creations with the world. Plus, you can also discover and listen to a wide variety of music for free. It’s a fantastic way to connect with fellow music enthusiasts and showcase your talent. Give it a try!

I was fascinated to learn that the SoundCloud developers initially used Backbone.js as the framework for their mobile app. They were impressed with its capabilities to provide a strong foundation while still offering flexibility. In fact, they were so enamored with Backbone.js that they decided to implement it on the client side of their desktop website as well. In an article on their Backstage Blog, they delve into the reasoning behind their framework choice.

10 Web Apps Built with Backbone.js: A Deep Dive

When it comes to scaling, an audio streaming app like SoundCloud knows that it’s all about organization. That’s why they’ve chosen to use the well-organized and lightweight Backbone framework – it’s the perfect fit for their needs.

SoundCloud takes advantage of the Handlebars semantic templating system to effortlessly render Backbone Views on the frontend. This ensures a smooth and seamless user experience.

8. AirBnB

Looking for a place to stay? Look no further than AirBnB! This incredible community marketplace lets you find and book all kinds of accommodations in nearly 200 countries around the world. Whatever your travel needs may be, AirBnB has you covered.

When it comes to AirBnB, they initially employed Backbone.js for their mobile app, much like SoundCloud. However, they soon realized the potential of this framework and started incorporating it into various features of their web apps, such as Wishlists, Match, Search, Communities, and Payments. The folks at AirBnB were so smitten with Backbone that they didn’t stop at using it solely on the front end; they even wanted to implement it on the backend!

10 Web Apps Built with Backbone.js: A Deep Dive

Hey there! Let me tell you a cool story. So, AirBnB, the awesome accommodation platform, did something really amazing. They decided to share their server-side Backbone library called Rendr with the world. How cool is that? They made it open source and you can even find it on their Github page. I think that’s pretty neat, don’t you?

Now, Rendr is written in Node.js and it’s all about giving developers the freedom to use the library in the way that suits their application the best. It’s all about minimal structure and maximum flexibility, just like the Backbone library itself. Ain’t that awesome?

If you want to know more about AirBnB’s tech stack, they actually wrote a blog post about their journey from having a Rails backend to achieving the Holy Grail of using Backbone on both the client and server side at the same time. Pretty impressive stuff, right?

9. Hulu

Let me introduce you to Hulu. It’s this really cool video streaming app where you can watch all your favorite TV shows and movies. And guess what? It’s absolutely free… well, if you’re in the US, that is. So, grab some popcorn and get ready to binge-watch your heart out!

Hulu used Backbone.js to create an amazing experience for movie buffs. It lets you move around the app smoothly and quickly, with nice transitions as you explore. Backbone is super helpful because it saves your internet data – you don’t have to reload scripts and videos all the time.

10 Web Apps Built with Backbone.js: A Deep Dive

I’m here to talk to you about Hulu and how they made some changes to their website. It’s pretty interesting stuff, so stick around! Hulu used to use a thing called Rails on the backend, but they switched things up and started using something called Backbone. It’s a more organized way of doing things.

With Backbone, Hulu was able to gradually switch from doing everything on the server side to doing some things on the user’s device instead. This was a big improvement and made things a lot smoother. They didn’t have to do a risky, big overhaul of their existing website.

Now let’s talk about Countly. It’s a cool app that lets you keep an eye on how your iPhone, Android, or Windows Phone app is doing. You can see all the info right in your browser. It’s super handy!

So there you have it. Hulu made some changes and switched to Backbone, and Countly is a great tool for tracking your app’s performance. Fun, right?

Let me show you this incredible list of open source software that we used to create the platform. It’s like a team of superstars that came together to make it happen! We’ve got Nginx, MongoDB, Node.js for the server side, and, of course, Backbone.js for the frontend.

10 Web Apps Built with Backbone.js: A Deep Dive

When it comes to displaying data, Countly knows how to impress. With the help of the Handlebars semantic templating library, Countly creates beautiful Backbone Views that showcase information collected and organized by Backbone Models. I’m here to tell you that Countly isn’t just for developers – it’s designed to be developer-friendly! Not only can it be easily expanded, but it also offers a helpful documentation that includes tutorials on building custom plugins using the core Backbone client. So, whether you’re a developer or just curious about Countly, you’ll find exactly what you need.