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.
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:
- 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.
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.
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.
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:
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
|------ modules : modules in the marionette application
|------ 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.