My Experience as a Bocoup Fellow

Hi, I’m Lidza, and I’ve just completed the Open Web Engineering Fellowship at Bocoup – this post is about my experience learning web application development.

---

Background

The Open Web Engineering Fellowship at Bocoup was my first experience with front-end web application development. My background is in working with the Linux Kernel, specifically device drivers. While I had taken some Ruby on Rails workshops at Thoughtbot, I hadn’t yet applied my new skills, and I had very little experience with JavaScript development overall. And, the little I did know was along the lines of “jQuery can make things slide back and forth and fade in and out on the page.”

Going in, I had the same mindset that a lot of programmers have when they’re introduced to JavaScript: that JavaScript sucks. I thought it had too many of those curly braces, and parentheses and brackets, and it had no Classes, no way of managing dependencies, and it was hard to get everything working across all browsers. However, I was interested in web engineering because I had a some ideas for improving the web experience, particularly in terms of increasing accessibility on the web. I also had ideas for making internationalization a priority for web applications I want to build. I believe the purpose of the Internet is to connect people and share information, and I should do what I can to help. This is also part of Bocoup’s mission.

But to do all these very large, complex things, I first needed to learn JavaScript. I learned that JavaScript can create rich, dynamic web applications and that there are lots of tools out there that can remedy the problems I had going in. It truly is a powerful language that can be run in many different contexts, including kernels and devices. This fellowship gave me the opportunity to learn these skills with people who share my goals for the web.

---

How the Fellowship Works

The purpose of the fellowship is to learn how to build professional, Bocoup-quality web applications using the best tools available. My goal was to learn as much as possible and to apply newfound skills to real-world applications.

The fellowship lasts 3 months:

• 1st month: Learning to get on the bike – This was the month I got an intense crash course in JavaScript.
• 2nd month: Using training wheels – This was the month I worked with my mentor, Greg Smith, while I was building my own creative project.
• 3rd month: Training for a bike race – This month is typically spent shadowing a consulting team.

---

Training Summary

Javascript Best Practices

This was a great course for learning the ins and outs of JavaScript’s syntax and “fuzziness” as I like to call it. Ben Alman talked us through design decisions made when JavaScript was created and the things that make JavaScript interesting and quirky. We also learned about common problems and design patterns.

Comprehensive jQuery

This was a great course to learn more about what jQuery gives us (which is more than just the ability to make things slide up and down). Ben again went deep into the details of how jQuery works and why it is such a useful tool for virtually any web application.

Writing Testable JavaScript

Before taking this, I didn’t know anything about testing, let alone in JavaScript. Mike Pennisi taught us the basics of testing: the different testing frameworks and libraries and ways of writing your code so that it can be tested easily. These skills were incredibly useful in making me a better programmer.

Open Web Platform

This course taught me the power of the web. I enjoyed learning about the new things you can do with HTML5 and CSS3. Bob Holt talked to us about geolocation, accessing web cams and microphones, CSS transitions and HTML5’s canvas element. This was mind-expanding.

Building Web Applications with Backbone

This class is all about learning how to design, architect and develop large web applications, and we used Backbone as a tool for working with the concepts. Bob taught us about code organization, workflow and application development, using models, views, collections and routers to convey the concepts.

---

PosTopic: My Fellowship Project

The project I worked during the fellowship was PosTopic. It’s a site where users can post topics and post posts underneath those topics. I wanted to work on something simple so I can just learn how different technologies work to create a cohesive application. The technologies the project uses are:

Server: – NodeJS – Express

Database: – MongoDB – Mongoose

Front-End Structure: – Backbone – Marionette – RequireJS

Front-End Helpers: – Handlebars – jQuery – Underscore – Backbone.Wreqr

Helpers: – Grunt – Slug – Async

Testing: – Mocha – Chai – Sinon

I didn’t know much about these technologies, so before I got started coding, I read tons of documentation, read lots of code and watched all the video tutorials I could find on the things that confused me. Greg helped get me started by showing me the code for a sample application.

I started building PosTopic as a set of static pages served up by the server, no front-end. That helped me focus on modeling the database and thinking about the kind of data that I want to be returned by the server. This step helped me understand REST API, Mongoose, MongoDB, NodeJS, Express and Async. At that time I had used Jade as the templating engine.

Then I started building the front-end with Backbone. This was useful in understanding how front-end applications can be structured. I designed it with Bootstrap, a pattern from Subtle Patterns and fonts from Google Fonts.

When I was done, I gave a presentation on what I had so far to my fellow Bocoupers. I got great feedback, and they told me some features I should implement:

• Add Pagination
• Add Slugs
• Add limits to the amount of data to be taken in by the front-end
• Add a Loading Page, so the user doesn’t have a blank screen staring at them while they’re waiting for data
• Add an Empty View
• Make event handling better by making sure that views’ events don’t mess with other parts of the DOM and all events are declared in the view and nowhere else.
• And other miscellaneous changes

After the presentation, I decided to change things up and build it with a different library. My thinking was that if this application were to get larger, Backbone would restrict its ability to scale because of ever increasing complexity. I wanted to learn how to build modular applications that scale well. I looked at EmberJS, Marionette and Angular, but ultimately decided to use Marionette. I already knew Backbone, so Marionette seemed like the next logical step considering how little time I had to learn it and develop with it. Given more time, I would’ve done more research on the other options.

One of the interesting things in building PosTopic was figuring out the file structure. I had to come up with something logical and easily accessible (not tons of nested directories). The great thing about working with NodeJS is that I can set things up whichever a way that I see fit. This is how I structured my application and why:

app : all the front-end application logic and files
|-- bower_components : bower dependencies
|-- fonts : fonts for the front-end, its filled with glyphicons provided by Bootstrap
|-- images : images for the front-end application
|-- scripts : javascript for the application
|------ modules : modules in the marionette application
|------ vendor : vendor code, holds bootstrap javascript file
|------ application.js : sets up the application
|------ communicator.js : communication between parts of the front-end
|------ init.js : starting point for requirejs, contains configuration
|------ main.js : starts the application
|-- styles : css styling
|-- 404.html : the 'i don't know what's going on' page
|-- index.html : the starting point for the front-end application
|-- robots.txt : the page that gives instructions to robots
node_modules: node dependencies
server: all the server side code
|-- models : models for the data in the MongoDB database
|------ Post.js : has the schema for the post table
|------ Topic.js : has the schema for the topic table
|-- routes : manages routes that get taken in by the server
|------ index.js : route for the main part of the application
|------ post.js : routes for grabbing post data from the server
|------ topic.js : routes for grabbing topic data from the server
|-- app.js : manages server-wide settings
|-- db.js : has database connection information
test: testing code for the front and back end
|-- spec : has the actual tests
|-- index.html : the html file that runs/displays the tests
|-- SpecRunner.js : settings for the tests
bower.json : keeps track of bower dependencies
Gruntfile : used by Grunt to manage tasks
LICENSE.txt : license for the code
package.json : keeps track of node dependencies
README.md : about the application

There’s still some work that needs to be done to improve the application. They’re listed in the issues on the GitHub repo.

---

Overall Feelings about the Fellowship

It was a great experience to learn about how the full-stack of web application development works. The people I worked with are smart and talented individuals. They were encouraging me every step of the way and gave me great feedback to make me a better programmer. The trainings were incredibly helpful, they were well-organized, professional, and covered all the bases I needed to know to be a good web engineer.

It was challenging, though. There were times when I had no clue what I was doing, but I had lots of support, and I was determined to get it working. I would recommend this fellowship to anyone who is committed and open to learning about web engineering and wants to change the web landscape for the better.