This tutorial explores coding with Backbone.js using data stored in an API. The code developed will interact with an API as described in the earlier post : Develop a RESTful API Using Node.js With Express and Mongoose. This article is the second tutorial in a series on the topic building an online store using REST. Previously, I explored creating an API with Node.js, Express, MongoDB, and Mongoose. In this article I demonstrate an overview of coding a front-end interface for a data-driven application using Backbone.
Backbone organizes code objects for Models, Collections, Views, Routers and uses a sync object to interact with an API. I will use these constructors to build a list of projects from objects stored as documents in a database (MongoDB) . The API built in the previous tutorial facilitates development with an actual web service rather than mocking JSON data in a flat file.
For the purpose of getting to know Backbone, the use case that I will focus on is listing products consumed via JSON data from a web service. Each product in the list represents data found in a model. The product list represents a collection of (product) models. The HTML is generated using a view which renders data - blending the model’s JSON data with a template. Finally a route triggers the asynchronous process of fetching data and rendering the product list by listening for a hashchange or using pushState. These are the core components that Backbone provides.