Should i use backbone

You may want to…. Loading Bootstrapped Models When your app first loads, it's common to have a set of initial models that you know you're going to need, in order to render the page. Instead of firing an extra AJAX request to fetch them, a nicer pattern is to have their data already bootstrapped into the page. You can then use reset to populate your collections with the initial data. Extending Backbone Many JavaScript libraries are meant to be insular and self-enclosed, where you interact with them by calling their public API, but never peek inside at the guts.

Because it serves as a foundation for your application, you're meant to extend and enhance it in the ways you see fit — the entire source code is annotated to make this easier for you. You'll find that there's very little there apart from core functions, and most of those can be overridden or augmented should you find the need. If you catch yourself adding methods to Backbone. How does Backbone relate to "traditional" MVC? Different implementations of the Model-View-Controller pattern tend to disagree about the definition of a controller.

If it helps any, in Backbone, the View class can also be thought of as a kind of controller, dispatching events that originate from the UI, with the HTML template serving as the true view. Comparing the overall structure of Backbone to a server-side MVC framework like Rails , the pieces line up like so:.

Binding "this" Perhaps the single most common JavaScript "gotcha" is the fact that when you pass a function as a callback, its value for this is lost. When dealing with events and callbacks in Backbone, you'll often find it useful to rely on listenTo or the optional context argument that many of Underscore and Backbone's methods use to specify the this that will be used when the callback is later invoked.

View events are automatically bound to the view's context for you. Working with Rails Backbone. By default, Rails versions prior to 3. You can disable this wrapping by setting:. Otherwise, override parse to pull model attributes out of the wrapper. You can have your controllers filter attributes directly from params , or you can override toJSON in Backbone to add the extra wrapping Rails expects. The list of examples that follows, while long, is not exhaustive — nor in any way current.

If you've worked on an app that uses Backbone, please add it to the wiki page of Backbone apps. If you're wondering where to get started with Backbone in general, take a moment to read through the annotated source. The app uses a LocalStorage adapter to transparently save all of your todos within your browser, instead of sending them to a server. The DocumentCloud workspace is built on Backbone.

If you're interested in history — both Underscore. The new website also makes heavy use of the Backbone Router to control the page for both pushState-capable and legacy browsers. Finally, the team took advantage of Backbone's Event module to create a PubSub API that allows third parties and analytics packages to hook into the heart of the app. New Rdio was developed from the ground up with a component based framework based on Backbone.

Every component on the screen is dynamically loaded and rendered, with data provided by the Rdio API. When changes are pushed, every component can update itself without reloading the page or interrupting the user's music. When data changes are signaled in realtime, Backbone's Events notify the interested components in the data changes. Backbone forms the core of the new, dynamic, realtime Rdio web and desktop applications.

Hulu used Backbone. With Backbone as a foundation, the web interface was rewritten from scratch so that all page content can be loaded dynamically with smooth transitions as you navigate. Backbone makes it easy to move through the app quickly without the reloading of scripts and embedded videos, while also offering models and collections for additional data manipulation support. Quartz sees itself as a digitally native news outlet for the new global economy.

Because Quartz believes in the future of open, cross-platform web applications, they selected Backbone and Underscore to fetch, sort, store, and display content from a custom WordPress API. Although qz. Despite the presence of several other JavaScript libraries, Backbone's non-opinionated design made it effortless to mix-in the Events functionality used for distributing state changes throughout the page.

When the decision was made to switch to Backbone, large blocks of custom logic simply disappeared. Backbone powers the liveblogging platform and commenting system used across all Vox Media properties; Coverage, an internal editorial coordination tool; SB Nation Live , a live event coverage and chat tool; and Vox Cards , Vox. Kinja is Gawker Media's publishing platform designed to create great stories by breaking down the lines between the traditional roles of content creators and consumers.

Everyone — editors, readers, marketers — have access to the same tools to engage in passionate discussion and pursue the truth of the story. Sharing, recommending, and following within the Kinja ecosystem allows for improved information discovery across all the sites. The JavaScript stack includes Underscore.

Closure templates are shared between the Play! MetaLab used Backbone. The workspace relies on Backbone. You can see the internals under window. Gilt Groupe uses Backbone.

Gilt's mobile website uses Backbone and Zepto. Gilt's search functionality also uses Backbone to filter and sort products efficiently by moving those actions to the client-side. Enigma is a portal amassing the largest collection of public data produced by governments, universities, companies, and organizations. Enigma uses Backbone Models and Collections to represent complex data structures; and Backbone's Router gives Enigma users unique URLs for application states, allowing them to navigate quickly through the site while maintaining the ability to bookmark pages and navigate forward and backward through their session.

NewsBlur is an RSS feed reader and social news network with a fast and responsive UI that feels like a native desktop app. If you want to poke around under the hood, NewsBlur is also entirely open-source. It uses Backbone. Automattic the company behind WordPress. Foursquare is a fun little startup that helps you meet up with friends, discover new places, and save money. Backbone Models are heavily used in the core JavaScript API layer and Views power many popular features like the homepage map and lists.

Bitbucket is a free source code hosting service for Git and Mercurial. Through its models and collections, Backbone. Mustache templates provide server and client-side rendering, while a custom Google Closure inspired life-cycle for widgets allows Bitbucket to decorate existing DOM trees and insert new ones. Disqus chose Backbone. Delicious is a social bookmarking platform making it easy to save, sort, and store bookmarks from across the web.

Delicious uses Chaplin. The use of Backbone helped the website and mobile apps share a single API service, and the reuse of the model tier made it significantly easier to share code during the recent Delicious redesign. Khan Academy is on a mission to provide a free world-class education to anyone anywhere. With thousands of videos, hundreds of JavaScript-driven exercises, and big plans for the future, Khan Academy uses Backbone to keep frontend code modular and organized.

User profiles and goal setting are implemented with Backbone, jQuery and Handlebars , and most new feature work is being pushed to the client side, greatly increasing the quality of the API.

It makes heavy use of Backbone. Pitchfork uses Backbone. Spin pulls in the latest news stories from their internal API onto their site using Backbone models and collections, and a custom sync method.

Because the music should never stop playing, even as you click through to different "pages", Spin uses a Backbone router for navigation within the site. ZocDoc helps patients find local, in-network doctors and dentists, see their real-time availability, and instantly book appointments.

On the public side, the webapp uses Backbone. In addition, the new version of the doctor-facing part of the website is a large single-page application that benefits from Backbone's structure and modularity. ZocDoc's Backbone classes are tested with Jasmine , and delivered to the end user with Cassette. Walmart used Backbone. Thorax provides mixins, inheritable events, as well as model and collection view bindings that integrate directly with Handlebars templates.

Lumbar allows the application to be split into modules which can be loaded on demand, and creates platform specific builds for the portions of the web application that are embedded in Walmart's native Android and iOS applications. Groupon Now! When first developing the product, the team decided it would be AJAX heavy with smooth transitions between sections instead of full refreshes, but still needed to be fully linkable and shareable. Despite never having used Backbone before, the learning curve was incredibly quick — a prototype was hacked out in an afternoon, and the team was able to ship the product in two weeks.

Because the source is minimal and understandable, it was easy to add several Backbone extensions for Groupon Now! The Basecamp Calendar uses Backbone. Slavery Footprint allows consumers to visualize how their consumption habits are connected to modern-day slavery and provides them with an opportunity to have a deeper conversation with the companies that manufacture the goods they purchased.

Based in Oakland, California, the Slavery Footprint team works to engage individuals, groups, and businesses to build awareness for and create deployable action against forced labor, human trafficking, and modern-day slavery through online tools, as well as off-line community education and mobilization programs.

Stripe provides an API for accepting credit cards on the web. Stripe's management interface was recently rewritten from scratch in CoffeeScript using Backbone. Airbnb uses Backbone in many of its products. SoundCloud is the leading sound sharing platform on the internet, and Backbone. The Backbone. History was modified to support the HTML5 history. For example, there's a model that represents the "currently playing track", and multiple views that automatically update when the current track changes.

The station list is a collection, so that when stations are added or changed, the UI stays up to date. Inkling is a cross-platform way to publish interactive learning content. Inkling for Web uses Backbone. Inkling supports WebGL-enabled 3D graphics, interactive assessments, social sharing, and a system for running practice code right in the book, all within a single page Backbone-driven app. Early on, the team decided to keep the site lightweight by using only Backbone. The result?

Complete source code weighing in at a mere kb with feature-parity across the iPad, iPhone and web clients. The new Code School course challenge page is built from the ground up on Backbone. CloudApp is simple file and link sharing for the Mac. Data is either pulled manually or pushed by Pusher and fed to Mustache templates for rendering. Check out the annotated source code to see the magic.

SeatGeek 's stadium ticket maps were originally developed with Prototype. Moving to Backbone. SeatGeek is also in the process of building a mobile interface that will be Backbone. Easel is an in-browser, high fidelity web design tool that integrates with your design and development process. The Easel team uses CoffeeScript, Underscore.

The structure of Backbone allowed the team to break the complex problem of building a visual editor into manageable components and still move quickly. Jolicloud is an open and independent platform and operating system that provides music playback, video streaming, photo browsing and document editing — transforming low cost computers into beautiful cloud devices.

TileMill lets you manage map layers based on shapefiles and rasters, and edit their appearance directly in the browser with the Carto styling language. Note that the gorgeous MapBox homepage is also a Backbone. Blossom is a lightweight project management tool for lean teams.

The app is packaged with Brunch. Trello is a collaboration tool that organizes your projects into boards. A Trello board holds many lists of cards, which can contain checklists, files and conversations, and may be voted on and organized with labels.

Updates on the board happen in real time. The site was built ground up using Backbone. Cristi Balan and Irina Dumitrascu created Tzigla , a collaborative drawing application where artists make tiles that connect to each other to create surreal drawings.

Backbone models help organize the code, routers provide bookmarkable deep links , and the views are rendered with haml. Tzigla is written in Ruby Rails on the backend, and CoffeeScript on the frontend, with Jammit prepackaging the static assets. If the server has already rendered everything on page load, pass Backbone. Bugfix for pushState with encoded URLs.

Multiple models with the same id are now allowed in a collection. Fixed a bug where calling. Fixed a brief extra route fire before redirect, when degrading from pushState. Fixed inconsistency with non-modified attributes being passed to Model initialize.

Reverted a 0. Added contains as an alias for includes. Controller was renamed to Router , for clarity. Collection refresh was renamed to Collection reset to emphasize its ability to both reset the collection with new models, as well as empty out the collection when used with no parameters.

RESTful persistence methods save, fetch, etc. Improved XSS escaping for Model escape. An error is thrown if Backbone. Collection create now validates before initializing the new model. Backbone Views can now also take an attributes parameter. Model defaults can now be a function as well as a literal attributes object. When trying to persist a model, failed requests will now trigger an "error" event. The ubiquitous options argument is now passed as the final argument to all "change" events.

Fixed recursion error when calling save with no changed attributes, within a "change" event. Added a remove method to Backbone. Backbone routes are now able to load empty URL fragments. Added Model clear , which removes all attributes from a model. All Backbone classes may now be seamlessly inherited by CoffeeScript classes.

The old handleEvents function is now named delegateEvents , and is automatically called as part of the View's constructor. Added Underscore's chain to Collections. An error callback may now be passed to set and save as an option, which will be invoked if validation fails, overriding the "error" event.

Added a rake lint task. Backbone is now published as an NPM module. Documentation tweaks. Need better Model-View binding, use Backbone. Stickit or Epoxy. Do you need more structure and some magic for your Single Page App? Use Marionette. The first 0. Backbone gives structure to JavaScript projects and incorporates the basics of Object Oriented Programming.

Connect your Views to those models and let them respond to changes in the associated model to render new HTML and update specific parts on the page. We build a lot of public websites which need to be SEO friendly and accessible to users with older browsers.

We use the Progressive enhancement principle when creating websites and Backbone. And when using a template engine like Mustache or Handlebars, we can even share the templates between the Front- and Back-end, so we only have to write that code once.

It has a vibrant community. Edit ReactJS, Vue. This is a practical tutorial that I wished I had it when I started learning. This is a fat-free walkthrough of Backbone. Each feature implemented is a new commit, so you can easily see what changed in every step. To get started, download this simple HTML file. We are going to explain to them as we need them. After downloading the file mentioned above, notice the HTML where your entire page will be built using Backbone. Here is an example of a Backbone.

Full code is here. You can also use any other template solution that you want, like mustache or handlebars. Home Trending Popular About Blog. Last updated April 14th BackboneJS Tutorial series: Backbone.