(This post is by Devin Carr, one of our Summer 2013 interns.)
Working as a Developer Advocate intern on the Bazaarvoice Developer Relations team has been a great learning opportunity. At the beginning of the Summer I discussed with my mentors, Chas Peacock and Frederick Feibel, what I wanted to learn while interning. We decided on front-end web-development because it is an area in which I had minimal experience. For the rest of the Summer I spent my time creating a simple review display template using the Bazaarvoice Conversations API and some really cool front-end frameworks & libraries. I also researched other ratings and reviews implementations to learn about common industry best practices and incorporated them into what I am calling my LightReviewDisplay Template.
Coming from a background limited to Java, I quickly discovered that Javascript is quite a different programming language. I took a few days to learn basic Javascript and HTML from Codecademy to get a grasp of the syntax and functions. Using that knowledge I created the first version of the LightReviewDisplay. I put all of the Javascript and dynamic HTML in one large file that handled loading the reviews and displaying them on the page. During my first code review Chas and Frederick suggested my code was lacking in structure and layout best practices, such as including an Object Oriented Programing model. Instead of most of my code being in just a few functions they recommended I implement RequireJS, self described as a “JavaScript file and module loader”, to encapsulate my code within a maintainable structure. They also suggested that I use Mustache, a HTML template library. Using these two libraries I could divide my code into multiple modules and avoid having large amounts of HTML embedded within my Javascript.
The second version that I made was starting to look more like a modern and modular Javascript project. Chas and Frederick agreed that the increased readability of my refactored project was an improvement, but they felt it could be further improved by imposing more structure. They suggested I research some MVC (Model, View, Controller) frameworks. I looked into Backbone, KnockoutJS, Angular, and Stapes, all very versatile with separated modules for the model (data), the view (page), and the controller (user input). I ended up choosing Stapes because it is lightweight and is a very minimal framework that allows lots of customization.
At this point the project was functional but the user experience needed improvement. I decided to do some research into how a product review page should actually look. I inspected several retailers to see what was common about their layouts and what would be the best way to integrate reviews onto a product page. They all followed a two part system: a summary section at the top of the page and a more detailed section further down. The summary section shows the product’s price, description and a review ratings summary. It typically had the average rating for the product, the total number of reviews, and a rating breakdown per-star. Then towards the bottom of the product page, there was a review module that held all of the consumer reviews. I combined what I had learned about layout with Twitter Bootstrap resulting in an efficient and usable template for displaying UGC.
My Summer project was a great way to get started with Javascript and get familiar with the Bazaarvoice Conversations API. Throughout my internship I learned a lot about being a software engineer, expanded my CS knowledge and got some firsthand experience working amongst a small team of developers. This internship also gave me the opportunity to learn with the latest front-end libraries, architectural patterns, and work with really great developers. A special thank you goes out to Chas and Frederick for taking time out of their days to assist me with any problem I came across.
More about the LightReviewDisplay Template:
Bazaarvoice Inspiration Gallery: https://developer.bazaarvoice.com/inspiration_gallery/lightreviewdisplay
Source: https://github.com/DevinCarr/LightReviewDisplay