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!
