My Introduction to Backbone.js
Written by Brenda Deverell Cortez
I joined Koneksa Health three months ago and for the first time, I had the opportunity to work on a full blown “industrial application”, as our CTO likes to refer to it. Although I worked in tech and have an engineering degree, I only started to delve into web development when I joined Women Who Code NYC in the Fall of 2014. Until recently, everything I knew about web development, I had learned from attending tech meetups, networking with other web developers, and working on different small projects and tutorials using an array of different programming languages and frameworks. However, I had not yet had a chance to create anything remotely close to our Koneksa Health application or utilize Backbone.js, on of the libraries with use in our front-end framework.
Going into a new gig requires not only understanding the business, but as a member of the technical team, it also requires understanding the technologies being used, and more importantly how they can best be used. The fast paced environment of a startup makes it necessary that you make the best investment of your time learning this information quickly and in my case, a three week “bootcamp”, designed by our CTO, really gave me a boost. In this post, I share what I have learned about Backbone.js, the resources that are helping me learn and understand Backbone.js, and an example of how I have used it so far, as I work towards leaving my footprint on the Koneksa Health ecosystem.
Backbone.js
Backbone.js is a library of tools that helps you structure your Javascript code. Its main components are Models, to contain your data separate from views, Collections, to group collections of data (models), Views, to organize your interface, and Events, which you can use to trigger re-rendering of views based on model changes.
Models and Views diagram. http://backbonejs.org/#Model-View-separation
I might be missing out on some benefits, but for now, I have come to appreciate the light-weightedness of Backbone.js and I am understanding the Backbone.js philosophy better:
“Philosophically, Backbone is an attempt to discover the minimal set of data-structuring (models and collections) and user interface (views and URLs) primitives that are generally useful when building web applications with JavaScript.”
Backbone.js Resources
At my on-site interview I learned about the technologies we use at Koneksa Health and that I would be developing our tools using Backbone.js, so I went home and Googled tutorials, videos, books, and everything you can image. Three months later, I find myself returning to a few of the same resources, which I feel best illustrate and explain what Backbone.js is and how it works.
The first ever Backbone.js video I watched was by Sid Maestre and in it, he give an overview of every Backbone.js concept while creating a very simple wine list application. To further my understanding of Backbone.js, I also reference an introduction blog post by Codebeerstartups and the backbone tutorials in the cdnjs site. Two other great resources that have been extremely helpful to me are the backbonejs.org website and for a more dense reading, Backbone.js Applications by Addy Osmani. Finally, it goes without saying that Stack Overflow Applications is a great place to discuss ideas, look for ideas, and to find “detailed answers to every question about programming”.
Backbone.js at Koneksa Health
Here at Koneksa health, we deal with lots of data from the wearable technology devices our customers work with. In my latest use case of Backbone.js, I was dealing with login data from each of our user accounts. My goal was to aggregate and plot the number of times each particular user was logging into our web application on a given day. I started with an array of objects, each containing the user id and an array of timestamps representing their logins. To start, I created a login model and then used that to create a collection of these login models, but once I had them, I found myself iterating through the same collection in redundant ways. After several failed brute force attempts and some research, I learned that Backbone.js hooks up with underscore.js to provide iteration functions on Backbone.js collections, one of which is the countBy function that “groups and returns a count of the number of objects in each group”.
Using the countBy function solves the problem in one line of code, but below is the code that I used to get the results I wanted. I simply passed the collection to the function and the count of values in that item group was returned*.
http://underscorejs.org/#countBy
Using this new data set, I was able to plot the login history of each of the users in my data set as shown below:
Single user login history over time
