LA Ruby Conference 2013 Backbone.js, Jasmine and Rails: The Lust Story

LA RubyConf 2013

Austin Fonacier

#test-driven-development

#single-page-applications-spa

#code-organization

LA Ruby Conference 2013 Backbone.js, Jasmine and Rails: The Lust Story

by Austin Fonacier

In the presentation titled 'Backbone.js, Jasmine and Rails: The Lust Story' at the LA Ruby Conference 2013, Austin Fonacier, a senior software engineer at Spokeo, shared insights into using Backbone.js and Jasmine within a Rails project to achieve a cleaner and more organized codebase. The talk covered several critical aspects of these technologies and how they improved the development process.

Key points discussed include:
- Introduction of Tools: Austin introduced Backbone.js as a JavaScript framework that assists with front-end development and Jasmine as a JavaScript BDD (Behavior Driven Development) testing framework that resonates with RSpec from the Ruby ecosystem.
- Initial Challenges: The team faced issues with bulky JavaScript files in their Rails application. Modifications to the 'application.js' led to difficulties in managing and updating their code effectively.
- Transition to Backbone: By adopting Backbone, they were able to modularize their code—creating individual JavaScript classes for models and views. This led to enhanced organization and maintainability.
- Use of Collections: Austin discussed how Backbone collections simplified their interactions with an array of models, enhancing performance and readability by leveraging built-in functions like filtering and sorting.
- Testing with Jasmine: The integration of Jasmine allowed the team to create structured tests that helped to maintain their code quality. Stubbing server calls and using fixtures became essential practices during testing.
- Event Management: Backbone's event-driven architecture helped streamline communication between different views, reducing the complexity typically associated with DOM manipulation in JavaScript development.
- Final Outcomes: The transition to Backbone and Jasmine led the team to develop robust, scalable features while decreasing the manual code they had to write. Advantages included improved code organization, clarity, and maintainability.

The presentation concluded with Austin highlighting that while Backbone started as a tool for specific situations involving model transfers, its organization benefits made it a suitable choice for broader use. He emphasized the importance of testing through Jasmine and encouraged developers to embrace these tools for enhanced software development.

Overall, Austin's insights offered a comprehensive overview of how Backbone.js and Jasmine can significantly enhance a Rails development project, resulting in better-structured code and improved testing frameworks.

00:00:04.640 Austin is a senior software engineer at Spokeo, located here in Los Angeles. At one point in time, he worked for what is now YP, which used to be AT&T Interactive Yellow Pages. We worked together at YP in a previous iteration of our work. Today, he will be discussing Rails, Backbone.js, and Jasmine with you.

00:01:00.640 Hello everyone. My slides won't take up the full time, so I just want to share a personal anecdote. Like Corey, I have a cat, and that's why I enjoyed this presentation. I haven't followed Corey on Twitter yet, but I definitely will now because of the cat connection. I have a cat named Pam Beasley, and I love her dearly—more than I love most humans, which says a lot.

00:01:36.720 When I first got her, I had never had a cat or dog before. I believed in supervised outdoor walks. I thought that if you let a cat or dog off-leash, they would likely run away. My outdoor walks were very closely monitored; I would take her outside on a leash for walks around my apartment complex. But one time, she made a daring escape.

00:02:01.600 I literally looked away for a second, and she was on the back gate of my apartment complex. She was straddling the gate, and I was just stunned, thinking, 'Are you kidding me?' So my girlfriend and I ran into my apartment to grab her favorite toys, calling, 'Hey Pam, come down!' But Pam decided to jump over to the other side. I was unsure what was on the other side, as it was a brick wall. After a quick calculation, I thought maybe she would come back, or maybe she wouldn't. Still, I jumped over the wall to retrieve her.

00:02:46.560 When I found her, she was relaxing in the sun, completely unbothered. I ran to grab her, but she freaked out and started scratching me. Meanwhile, I was yelling to my girlfriend, and I soon realized the wall led into someone's backyard. I was breaking and entering into some guy's space just to get my cat. I yelled to my girlfriend, 'Jenny, I have a plan! I can toss the cat over the wall!'

00:03:14.000 She responded with a firm, 'Absolutely not! First of all, I'm not catching a cat; that's just the dumbest idea ever!' From the front yard, I heard a voice yelling, 'Get off my lawn!' At that moment, I thought I might end up in jail for breaking and entering because of my cat. I explained to a lady nearby what happened, and she surprisingly understood, saying, 'I just had trouble with my neighbors too—no problem.'

00:03:53.200 So there I was, walking around the block to bring my cat back home. That's my Pam story. At every conference, when you return home, people ask how it went, and you say all the presentations were great except for one—that's me! I apologize for that. I also have a side project called Blog Mate, which is developed with Rails, Backbone, and a bit of Jasmine. I want to share the story of how we came to use Backbone and what the final product looked like.

00:04:02.800 To introduce myself again, I'm Austin, and I work at Spokeo in Pasadena as a software architect. Our team behind Blog Mate consists of three people: Ben on the left, myself in the middle, and Danny on the right. Danny actually dresses like that every day—it’s pretty crazy. I should mention that I'm not a JavaScript expert, and I might not have answers for all the questions you have at the end of this talk. I'm also not an expert in Ruby or Rails, but I'm here to share my experience using these tools.

00:04:35.200 What I am is a semi-decent user of existing tools. All JavaScript examples I provide today will be in CoffeeScript, so if you are not familiar with CoffeeScript, I highly recommend it. One part of our application, Blog Mate, utilizes Rails, which is a Ruby-based framework known for being TDD-driven and RESTful.

00:05:06.720 Another significant part we integrated is Jasmine, a BDD framework for testing JavaScript, which resembles RSpec. If you've worked with Jasmine, you'll find it familiar, allowing integration with Selenium and other CI environments through the Jasmine gem. Lastly, I'll discuss Backbone, which is a JavaScript framework for your front end, featuring models and views but lacking a controller. For those who've worked with Backbone, you'll know its views can resemble controller functionalities.

00:05:44.160 Backbone comes with a simple yet effective concept of routes for single-page applications. Its lightweight size—only six kilobytes—allows for minimal overhead. The only hard dependency is Underscore, a utility belt for JavaScript that provides functions like 'each' and 'filter,' among others. Backbone is also template agnostic, meaning you can bring in your own templates. At Blog Mate, we utilize Smarty templates, but many others come with different options.

00:06:29.040 When we started building Blog Mate, many projects would rely on built-in Rails helpers, creating inline JavaScript that made management difficult. Over time, as our product developed, we found ourselves with a bulky 'application.js' file loaded with jQuery. Danny and I decided we wanted to bypass this issue and leverage the asset pipeline Rails offers. We aimed to modularize everything, ensuring that every view in Blog Mate would have its own JavaScript class, and every model on the front end would also have a representative JavaScript class.

00:07:40.000 I want to demonstrate what our model looked like before we adopted Backbone. In our prior implementation, we passed attributes to the constructor, assigned them to the class, and used jQuery calls to handle saves—mimicking Active Record's behavior. We took advantage of callbacks to ensure that after updating or creating an entity, we could receive updated attributes from the server and assign them back to the model.

00:08:05.480 Here's how our view was structured. We had an article view, passing in an article model, caching elements, binding events, and managing rendering. Interestingly enough, Danny's patterns closely mirrored Backbone’s design, showcasing how well-structured our code became. This early effort at modularized JavaScript was exciting; we felt like rockstar programmers. However, we soon realized we weren't the best programmers.

00:09:24.720 One challenge arose when we tried to handle updates in the views after saving. It made sense to append the newly created list to the DOM after successful saving, but we struggled to ensure that the model had retained the proper ID. In development mode, it worked seamlessly, but in production, we encountered issues because our views didn’t tap into the model’s callbacks, leading to inconsistencies.

00:10:20.360 Our model did not get the ID back from the server in non-development environments, which caused rendering failures since we’d attempt to append templates missing essential data. Additionally, as applications grow, managing multiple views tied to a single model became complex, complicating updates, creations, and deletions across views. We needed a solution to handle these interactions efficiently.

00:11:08.400 Eventually, we moved to Backbone, allowing us to implement more robust and organized features. With Backbone views, we were able to define events and manage DOM interactions based purely on what was happening in our models. The concept of a global event module helped us create views that could listen to changes without interference, leading to a more efficient architecture.

00:12:12.960 For example, this Backbone view example utilizes event handlers and renders the output efficiently. You can define default attributes and manage events within the scope of that view without hassle. Thank to Backbone’s helpful framework, handling events, including opening and editing items and removing them, has become more straightforward.

00:12:54.480 The document row functionality allows us to create elements via set attributes, such as tag name and class name. This simplification replaced the manual effort of creating elements that we would have undertaken previously. With this structure in place, building out new features became less tedious and much more organized.

00:13:24.560 We also implemented collections in our application, which essentially serve as arrays of Backbone models. This concept resonated well with us coming from Rails, as it enabled us to leverage certain functionalities from Underscore, allowing for filtering, sorting, and aggregating models efficiently. Previously, we wrote custom loops to perform these tasks, but now we can do it easily with Backbone’s built-in methods.

00:14:31.040 Pluck, for example, simplifies extracting specific attributes from our collections. When we shifted our mindset toward utilizing Backbone, we noticed a decrease in the code we had to write manually. This enabled us to be more explicit in what we were trying to achieve and made our code cleaner overall.

00:15:10.360 To further illustrate this development, we adopted a comparator feature in our collection. A default sorting method was easily implemented, removing the need to manage inconsistencies across multiple views. The collection would sort models by name without requiring repetitive code, streamlining our coding practices.

00:15:52.640 When we began using Jasmine for testing, we appreciated its resemblance to RSpec. In Jasmine, you can create assertions and validate the existence of conditions for your code logic. We learned to stub our server calls during tests to avoid issues. Utilizing fixtures was also necessary to provide the minimal HTML structure to execute our specs, ensuring we could test properly.

00:16:41.440 As we gained expertise in Jasmine, we recognized the importance of separating our testing framework from our implementation logic. We had to strike a balance between changing our JavaScript often and maintaining the corresponding Jasmine tests. During our learning process, we noticed our initial implementation of routes in Backbone closely mirrored Rails routing concepts, though we need to address refining our understanding of them further.

00:17:23.200 In conclusion, Backbone serves as a substantial foundation rather than a traditional framework. Initially, I would have advised using Backbone only if you were constantly moving model representations between the back end and front end. However, given its minimal overhead and the organization it brings to JavaScript, we found it beneficial and began using it widely. At Spokeo, we started implementing it broadly, recognizing its advantages in code organization.

00:18:11.680 Backbone's open-ended views encourage developers to implement them freely without strict requirements. The events module helped manage interactions across various views without intermingling code or logic. As we delved further into Backbone, we discovered other advantages we hadn’t anticipated, leading to cleaner and more effective code management.

00:19:55.600 While learning Backbone, we also focused on Jasmine to improve our testing capabilities, moving away from the pitfalls of alert-driven development. I plan to upload my slides to GitHub and amend the content as we refine our understanding of the Backbone routes. I would like to share some valuable URLs that have been instrumental in our learning process with Backbone.

00:20:57.440 Thank you all for your attention. I genuinely appreciate it!

LA RubyConf 2013