{"id":24130,"date":"2015-06-17T18:01:53","date_gmt":"2015-06-17T10:01:53","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24130"},"modified":"2022-08-10T17:06:39","modified_gmt":"2022-08-10T09:06:39","slug":"backbonejs-web-apps","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/","title":{"rendered":"10 Web Apps Made with Backbone.js [Case Study]"},"content":{"rendered":"

Have you ever been entangled in spaghetti code? Would you rather feed your app something healthier? If so, take a peek at what can be accomplished with Backbone.js<\/a>. Backbone<\/strong> is a JavaScript library that is loosely based on the Model-View-Controller design pattern, but as it lacks the Controller element, it\u2019s better to call it an MV* framework.<\/p>\n

It helps you build fast, sleek and data-rich<\/strong> single-page web apps, keeps your data logic separate from your user interface<\/strong>, saves you from tying your data to the DOM, and scales as your app grows<\/strong>. As Backbone syncs with any RESTful API by default, you can easily connect your client-side app to your existing server-side API through a RESTful JSON interface.<\/p>\n

In this post, we will be studying ten web apps that utilize the features of the Backbone library to help you grasp the potential Backbone.js has for your future web app projects.<\/p>\n

1. Trello<\/a><\/h2>\n

Trello<\/strong> is an online collaboration and project management app that helps you organize your projects into Boards, Checklists, Cards, and Card Lists and provides you with tools like Conversations for team member communication.<\/p>\n

Trello was built from the ground up with Backbone.js. Backbone works together with the HTML5 History API<\/a> and the Mustache<\/a> logic-less templating language on the frontend. All elements of the Trello Tech Stack<\/a> were designed in a way that resulted in a maintainable client that easily handles updates<\/strong>, and dynamically re-syncs with the server<\/strong> whenever a DOM event is triggered.<\/p>\n

<\/figure>\n

Trello utilizes Backbone Model<\/a> and Views for its objects such as Cards or Members, and Backbone Collections for related Models \u2013 for example Cards in a list. The developers also built their own client-side Model cache <\/strong>for faster updates <\/strong>and more efficient code reuse. <\/strong><\/p>\n

2. Foursquare<\/a><\/h2>\n

Most likely, you have already heard about Foursquare<\/strong>, the popular location-based social networking app that enables you to share venues with your friends across the world.<\/p>\n

Foursquare\u2019s core JavaScript API is built around Backbone Models<\/a>, where the Model classes of the Foursquare API<\/strong> (such as Users, Venues, and Check-ins) are the subclasses of the Backbone Model classes and inherit their methods and properties<\/strong>.<\/p>\n

<\/figure>\n

The implementation of the code can be sketched up like this: fourSq.api.models.Venue = fourSq.api.models.Model.extend({ ... });<\/code> Yes, that\u2019s right, Backbone enables devs to write nice object-oriented JavaScript<\/strong>.<\/p>\n

Backbone Views also have their role in the Foursquare app, as they enhance the user experience with features like homepage maps and lists<\/strong>. Other than Backbone, Foursquare\u2019s JavaScript API also makes use of jQuery, Underscore.js<\/strong> (which is Backbone\u2019s only hard dependency), and the Closure Compiler<\/a>.<\/p>\n

3. Basecamp Calendar<\/a><\/h2>\n

Basecamp<\/strong>, the popular project management app uses Backbone.js for its Calendar feature.<\/p>\n

The main design goal of Basecamp Calendar was to create an interactive interface that makes intuitive group scheduling<\/strong> possible, and updates itself in milliseconds<\/strong>. In Basecamp Calendar Backbone renders Views into ECO<\/a> (Embedded CoffeeScript) templates whenever Models (client-side data) are updated.<\/p>\n

<\/figure>\n

It\u2019s interesting to note that the developer team didn\u2019t make the entire Basecamp a single-page app which is the primary use case of Backbone.js, but only utilized the library in the Calendar feature where they could really make use of its advantages. Just goes to show that you don\u2019t necessarily need to build a full single-page app with Backbone; it\u2019s better to carefully think over where it can be applied.<\/p>\n

Read more on Backbone antipatterns<\/a> to decide if you need Backbone for your whole app or not.<\/p>\n

4. Flowdock<\/a><\/h2>\n

Flowdock<\/strong> is a real-time team communication app that provides you with features like group chat, team inboxes, and real-time workflows<\/p>\n

Flowdock was built from the ground up on top of Backbone.js. The main challenge of the development team was to enable real-time messages and workflows. By default, Backbone.js connects to the server side over a RESTful interface, which doesn\u2019t make real-time data flow possible. Therefore the devs decided to save messages via the Socket.io<\/a> real-time engine<\/strong> instead of the REST API.<\/p>\n

<\/figure>\n

To achieve this they wrote a custom method<\/strong> called Backbone.sync<\/strong>. As Socket.io is also a JavaScript library, it makes the communication between the JavaScript-driven frontend and backend (Node.js) seamless. Flowdock is primarily a Rails app on the server side, but they have a separate Node.js backend that handles the Socket.io connections.<\/p>\n

Flowdock enhances real time user experience<\/strong> even more with Bacon.js<\/a>, a handy JavaScript library that enables functional reactive programming<\/a>. The EventStreams feature of Bacon.js<\/strong> helps Flowdock keep its Backbone Model and Collections up to date.<\/p>\n

5. Cocktail Search<\/a><\/h2>\n

Cocktail Search<\/strong> is an open-source app that gives you the chance to take a look at the code of a very simple implementation of Backbone.js. The backend is powered by Python, but what\u2019s interesting to us is the app\u2019s script.js<\/a> file<\/strong>.<\/p>\n

If you examine the code you can see a very basic structure of the Model-View-* framework: it contains one Model<\/strong> defined in the Cocktail<\/em> class that doesn\u2019t change the default settings of the Backbone.Model parent class, one Backbone Collection<\/strong> for search results, and 3 Backbone Views, each adds new methods to the Backbone.View<\/strong> parent class.<\/p>\n

<\/figure>\n

If you take a look at the index.html<\/a> file, you can discover how the developer added Backbone.js and its dependencies, Underscore.js<\/strong> and jQuery<\/strong> in the head section. Underscore.js is the only hard dependency of Backbone, while jQuery is needed if you want to manipulate the DOM with the help of Backbone Views<\/strong> (which is the case of the Cocktail Search app).<\/p>\n

6. Bitbucket<\/a><\/h2>\n

Bitbucket<\/strong> is a source code hosting and code management app similar to Github. Atlassian, the company behind it uses Backbone in the JIRA<\/a> commercial issue tracking software, their other main product too.<\/p>\n

During the thorough utilization of Backbone.js in their apps, the development team found a couple of things that they missed from Backbone. They encountered many silent failures caused by the loose definition conventions of Backbone.js.<\/strong> This basically means that Models, Collections and Views don\u2019t necessarily define the custom events they expose<\/strong>. And if that weren\u2019t enough, Models don\u2019t even always define the attributes<\/em> they expose.<\/p>\n

<\/figure>\n

This permissive nature is a feature loved by many developers but not by the Atlassian team so they developed their own Backbone extension called Backbone.Brace<\/a> that adds mixins and self-documented attributes and events to the library<\/strong>.<\/p>\n

If you are annoyed<\/a> by the same thing, you can add Backbone.Brace<\/a> to your own app, as it\u2019s an open-source project hosted on Bitbucket itself. BitBucket uses the Mustache<\/a> templating language just like Trello for rendering Backbone Views on the frontend.<\/p>\n

7. SoundCloud<\/a><\/h2>\n

SoundCloud<\/strong> is a popular audio distribution platform where you can record, upload, and share your own audio or listen to music for free.<\/p>\n

Developers of SoundCloud used Backbone.js first as the frontend framework of their mobile app, but they liked it so much that they also employed it on the client side of their desktop website. In their Backstage Blog<\/a> they explain their choice of framework with Backbone\u2019s ability to provide a solid structural basis while still remain flexible<\/strong>.<\/p>\n

<\/figure>\n

Scaling is the main concern for an audio streaming app, and SoundCloud acknowledges that it \u201chas more to do with organization than implementation,\u201d which makes the well-organized but lightweight Backbone an ideal choice for them.<\/p>\n

SoundCloud utilizes the Handlebars<\/a> semantic templating system for rendering Backbone Views on the frontend.<\/p>\n

8. AirBnB<\/a><\/h2>\n

AirBnB<\/strong> is an insanely successful community marketplace where you can find and book different types of accommodations in almost 200 countries worldwide<\/p>\n

AirBnB firstly used Backbone.js in its mobile app, just like SoundCloud, but later utilized it more and more in its web apps features such as Wishlists, Match, Search, Communities, and Payments. Airbnb loved Backbone so much that they didn\u2019t only settle for using it on the front end but also wanted to make it possible to run the library on the backend.<\/p>\n

<\/figure>\n

They later made their server-side Backbone library, Rendr, open source<\/strong> and available on their Github<\/a> page. Rendr is written in Node.js and it follows the philosophy of \u201cimposing minimal structure, allowing the developer to use the library in the most appropriate way for their application,\u201d just like Backbone itself<\/p>\n

If you are interested more in AirBnB\u2019s tech stack, read their blog post<\/a> about their journey from a Rails backend to the Holy Grail<\/a> of the simultaneous utilization of Backbone both on the client- and server-side<\/strong>.<\/p>\n

9. Hulu<\/a><\/h2>\n

Hulu<\/strong> is a video streaming app that enables you to watch TV shows and movies for free, if you are located in the US.<\/p>\n

Hulu made use of Backbone.js to build a seamless and fast user experience for movie lovers. The interface allows you to move quickly through the app with gentle transitions as you navigate. Backbone saves bandwidth for users<\/strong> as scripts and embedded videos don\u2019t get reloaded<\/strong> all the time.<\/p>\n

<\/figure>\n

Hulu runs a Rails engine on the backend, and if you like amusing but informative talks, you can read about how the developer team got entangled<\/a> with jQuery<\/strong> before finally deciding to change to the more organized Backbone framework<\/strong>.<\/p>\n

Backbone.js allowed Hulu to incrementally convert their rendering from server-side to client-side<\/strong> instead of doing a risky rewrite of their existing Rails backend.<\/p>\n

10. Countly<\/a><\/h2>\n

Countly<\/strong> is a real-time mobile analytics app that enables you to track the performance of your iPhone, Android or Windows Phone app right from the browser window.<\/p>\n

Take a look at the remarkable list<\/a> of open source software that was used to develop the platform, including the superstars of recent years: Nginx, MongoDB, Node.js for the server side and of course Backbone.js for the frontend.<\/p>\n

<\/figure>\n

Countly utilizes the Handlebars<\/a> semantic templating library to render Backbone Views that display data prepared and loaded with Backbone Models. Countly is a developer-friendly app: it\u2019s not only easily extensible but its documentation also provides devs with tutorials like this<\/a> on how to build custom plugins on top of the core Backbone client<\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"

Have you ever been entangled in spaghetti code? Would you rather feed your app something healthier? If so, take a peek at what can be accomplished with Backbone.js. Backbone is a JavaScript library that is loosely based on the Model-View-Controller design pattern, but as it lacks the Controller element, it\u2019s better to call it an…<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n10 Web Apps Made with Backbone.js [Case Study] - Hongkiat<\/title>\n<meta name=\"description\" content=\"Have you ever been entangled in spaghetti code? Would you rather feed your app something healthier? If so, take a peek at what can be accomplished with\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Web Apps Made with Backbone.js [Case Study]\" \/>\n<meta property=\"og:description\" content=\"Have you ever been entangled in spaghetti code? Would you rather feed your app something healthier? If so, take a peek at what can be accomplished with\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-17T10:01:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-10T09:06:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/backbonejs-web-apps\/backbone-trello.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/backbonejs-web-apps\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/backbonejs-web-apps\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"10 Web Apps Made with Backbone.js [Case Study]\",\"datePublished\":\"2015-06-17T10:01:53+00:00\",\"dateModified\":\"2022-08-10T09:06:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/backbonejs-web-apps\\\/\"},\"wordCount\":1657,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/backbonejs-web-apps\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/backbonejs-web-apps\\\/backbone-trello.jpg\",\"keywords\":[\"Javascripts\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/backbonejs-web-apps\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/backbonejs-web-apps\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/backbonejs-web-apps\\\/\",\"name\":\"10 Web Apps Made with Backbone.js [Case Study] - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/backbonejs-web-apps\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/backbonejs-web-apps\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/backbonejs-web-apps\\\/backbone-trello.jpg\",\"datePublished\":\"2015-06-17T10:01:53+00:00\",\"dateModified\":\"2022-08-10T09:06:39+00:00\",\"description\":\"Have you ever been entangled in spaghetti code? Would you rather feed your app something healthier? If so, take a peek at what can be accomplished with\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/backbonejs-web-apps\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/backbonejs-web-apps\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/backbonejs-web-apps\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/backbonejs-web-apps\\\/backbone-trello.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/backbonejs-web-apps\\\/backbone-trello.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/backbonejs-web-apps\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Web Apps Made with Backbone.js [Case Study]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Web Apps Made with Backbone.js [Case Study] - Hongkiat","description":"Have you ever been entangled in spaghetti code? Would you rather feed your app something healthier? If so, take a peek at what can be accomplished with","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/","og_locale":"en_US","og_type":"article","og_title":"10 Web Apps Made with Backbone.js [Case Study]","og_description":"Have you ever been entangled in spaghetti code? Would you rather feed your app something healthier? If so, take a peek at what can be accomplished with","og_url":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-06-17T10:01:53+00:00","article_modified_time":"2022-08-10T09:06:39+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/backbonejs-web-apps\/backbone-trello.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"10 Web Apps Made with Backbone.js [Case Study]","datePublished":"2015-06-17T10:01:53+00:00","dateModified":"2022-08-10T09:06:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/"},"wordCount":1657,"commentCount":4,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/backbonejs-web-apps\/backbone-trello.jpg","keywords":["Javascripts"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/","url":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/","name":"10 Web Apps Made with Backbone.js [Case Study] - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/backbonejs-web-apps\/backbone-trello.jpg","datePublished":"2015-06-17T10:01:53+00:00","dateModified":"2022-08-10T09:06:39+00:00","description":"Have you ever been entangled in spaghetti code? Would you rather feed your app something healthier? If so, take a peek at what can be accomplished with","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/backbonejs-web-apps\/backbone-trello.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/backbonejs-web-apps\/backbone-trello.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/backbonejs-web-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Web Apps Made with Backbone.js [Case Study]"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6hc","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=24130"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24130\/revisions"}],"predecessor-version":[{"id":61564,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24130\/revisions\/61564"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=24130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=24130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=24130"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=24130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}