Best Backbone JS Apps examples

Backbone.js is the uber-light weight Javascript framework designed to structurate Java code to simplify its operating. It depends only on Underscore plus JQuery JavaScript libraries. With the usage of RESTful JSON interface it helps to reach model, view, controller (MVC) application design format.

• Model – consists of code of application data.
• View – holds data that is used to represent into HTML view.
• Controller – simplified relation code model and its HTML view. Also, it allows a programmer to save Javascript app state with simple hashbang in the URL.

Web developers are using Backbone.js to make one page applications and to keep different parts of its structures (such as clients and servers). Models created with Backbone.js are easily integratable in any backend.

Many of web applications use backbone.js. But we will show only the best backbone apps that you might already used or heard about for sure.

Trello

Application designed to help organize any project development. It provides a user with comfortable boards, cart lists and checklist to advance managing part of any process. Benefits that the application provides for users are so immersive. As a result, since launch in 2012 audience of Trello has reached 14 millions, with 1,1 million daily users.

Trello client are developed with the use of:

• Mustache logic less template language.
• HTML5 pushState.
• Backbone.js.

Meantime, the server was completed in the use of:

• MongoDB.
• HAProxy.
• Node.js.
• Redis.

Each of Trello tech stack elements were designed in order to make clients easily handle any updates. In addition, it also may dynamically re-sync with server each time DOMs events are spotted. In the application architecture Backbone.js is responsible for:

• triggering DOM events within the HTML.
• watch client model for any changes, and then re-render HTML block to reflect them.

In other words, Backbone is used for view and managing objects as Cards and Members.

Pandora Internet Radio

Pandora Is music streaming service with integrated music recommendation system. It picks up tracks according to previous user selections, depends on genres and artists. Users may affect pickup algorithm with feedbacks on recommended tracks. Users “thumb up” or “thumb down” in account in the subsequent selection of other possible tracks to play.

Originally Pandora Radio was launched in 2004, but in 2011 it made massive update and change the way it looks completely. In this cause Backbone.js played one of the main roles together with some new HTML5 libraries to operate the whole UI and its interactions.

Backbone was chosen in purpose to help structure Javascript code in a model, view, and controlled fashion. Moreover, it has been used in functions like:

• representing current track and updating the whole views according to changes in the collection list.

USA Today

Founded in 1982, it is international U.S. daily newspaper for middle market. Today it is printed by 37 sites in the whole U.S. and also supported by 5 international websites. Moreover, successful design of USA Today had a huge influence on most of other newspapers and magazines worldwide.

Backbone.js’s data and model lifecycle capabilities are used by USA Today website to safe code in structured format. Hence, codebase has become both structural, update-friendly and easy to support. In this cause Backbone.js is responsive for next features:

• Backbone’s Event modules have been used to make PubSub API and support any third party API and analytics service to look into the core of the application.
• it helps to simplify creation, inheritance, isolation and linking up application objects.
• Backbone Router controls the page’s representation for browsers.

SoundCloud Mobile

SoundCloud is a famous sound distribution platform. It is also known as the leader of sound sharing in the internet. It allows users to record, upload, promote and share between each other their own originally created sounds and tracks. App content separated into two categories is known as music and other sounds.

Backbone.js is the main basis for creating a mobile app for SoundCloud. Technology stack of a project is completed with:

• Backbone.history has been adapted for HTML5 history.pushState.
• Backbone.sync has been advanced with SessionStorage based on cache layer.
• public SoundCloud API – has been used as the main data source base.
• jQUery templates are used for rendering.
• Qunit together with PhantomJS are used as testing tools.
• Various Node.js tools (ready.js, Jake, jsdom) together with templates and CSS build up for production advantages.

WordPress.com

It’s the software service alternative to original WordPress.org. WordPress.com allows any registred user to create his or her own blog. Opened in 2005, it was originally released invitation-only, but one year later it already contained more than 55 million posts per month. While the account only required to create own blog, anybody can check blogs, comments and leave the own ones freely.

Backbones are used by WordPress because its MVC format and advantages. It is responsible for:

• WordPress notification services.
• stat tabs and some other features of WordPress are also supported by Backbone.js.

Moreover, it easily fits app structure.

Hulu

One of the major video streaming services with video on demand function. While most parts of Netflix content are completed with movies, Hulu allows visitors to watch their favorite TV series and shows. Moreover, it takes 1-2 days for the newest episode to appear in their list. Finally, Hulu takes a partnership with many major video companies like Walt Disney, Fox, Comcast, Tom Warner, etc.

Originally, Hulu used Backbone in order to create next generation video service and provide best user experience.

• Web interface was designed so any page content may be loaded dynamically with minimal transition.
• Backbone provides visitors with the ability to easily serf between Hulu’s pages without any need to reload scripts and embedded videos.
• Finally, it also allows to decrease maintained expenses, because structured data models and collections simplify support.

Enigma

Enigma is the intelligence company that focuses on processing and managing of large collection of public data provided by governments. They take mission to empower people to interpret and make the world a better place. In order to reach that major goal they analyze and publish complex data in simpler and understandable form.

They use Backbone.js to design the whole front-end web app part to make it user-friendly and light sized.

• Models and Collections are used to simplify management and represent a large amount of data.
• Backbone Router and History API allow to use common URL links for app state.
• Also, Backbone allows to easily bookmark any page and easily navigate forward and backward through the session.

Khan Academy

Organization focuses on the mission to bring free world-class education to everyone in any corner of the world. It offers lectures, practice courses, instruction videos and personal learning dashboards. Meantime, it is mostly focused on history, mathematics, science and computer programming fields. Each category starts from fundamental basis and leads learners to its depth.

They use backbone.js in order to manage structuring of huge amount of data and make it easy to find, support and navigate.

• The whole front-end part of web app was organized and modulated by Backbone.js
• Backbone was also used in cases of user profiles and goals.

Walmart Mobile

Walmart is the one of biggest companies by revenue in the world. It is an U.S. multinational retailing corporation that operates as a chain of hypermarkets, discount department stores, and grocery stores.

The corporation uses Backbone.js in order to design a new version of its own retail app. In the end they develop two new frameworks in the process that are fundamentally based on Backbone.

• Thorax allows to mix inheritable events and Backbone models and collections.
• Lumbar provides the web app load modules separately. Also, it makes platform specific builds that were embedded in native Android and iOS app versions.

Earth

Project that shows visualization of global weather conditions in real-time. It also includes options to move backwards, or forward in time. The whole project is forecasted by supercomputers.

All of this content is regularly updated and corrected according to the latest meteodata. Normally, it takes between 3 and 24 hours.

In this case Backbone creates fundamentals that the whole web app is built upon.

• Backbone.js allows to mix the events and component state changes on the page.
• Backbone also prevents developers from needs to create large data blogs of custom logics.

Hiring? Find top developers!

 Conclusion

Obviously, it is hard to create any good application ignoring structure format in the first place. While app grows in scale any jQuery and DOM parts of it are becoming difficult to maintain. So, for large and enterprise projects it is especially important to have code structure from the start.

Backbone is easy to learn as well as easy to use. Hence, no hour would be wasted on learning part, if you seriously plan to code something non-trial. Moreover, skills in structuring and managing your code would save tons of time in future. Backbone would not help you in only one case – if you don’t plan to code any complex project.
You also may ckeck Node.js and Angular.js apps examples.