This is a Golden Age for front end web development. A few years ago, developers realized that HTML, CSS and JavaScript were becoming first-class citizens in the software world, and that we needed first-class tools to match. To meet the increasing needs of web projects, the community gradually developed workflow tools like GruntYeoman, and Bower. These projects gave web developers the benefits of tools that were considered standard in other software ecosystems.

While this was generally a positive evolution, it also brought over some baggage that those other ecosystems have had to grapple with. The diversity and decoupled nature of these new tools cost the web platform some of its low barrier to entry. This isn’t to say that we’ve gone in the wrong direction, but it does create the need for guidance for developers who do not have a deep understanding of the entire tooling landscape. Fortunately, there are yet more tools that are designed for exactly that.

At Jellyvision, I divide my time between two large JavaScript projects. While both of these are too early in development to show or discuss in depth right now (keep an eye out for future blog posts!), what I can share is the toolset that I am using to get work done quickly and sustainably. And as an added bonus, the development process for both projects is a ton of fun. The secret sauce for this isn’t very secret. In fact, it’s open source.

Say hello to backbone-generator

backbone-generator is a generator for Yeoman. If you haven’t checked out Yeoman, I highly suggest you do. It’s a command line tool for getting a web app up and running with in very little time. In fact, going from an empty directory to “hello world,” with a build process, package management system, and testing workflow is done with a single command. It can even set up a transparent, live-updating code preprocessor workflow for languages like Sass and CoffeeScript. In short, it automates the busy work you’d have to do (or should be doing) to set up any new project. backbone-generator is a specific generator that sets up such a workflow, but optimized for Backbone.js apps.

A word on Backbone

I love, love, LOVE Backbone. It’s become a standard part of my toolset. It’s a very simple tool — it gives me just enough structure and direction to guide me through difficult architectural decisions, but it’s flexible enough to allow me to go off the beaten path and create my own patterns when necessary. I feel that Backbone, along with its dependencies Underscore.js and jQuery, is the ideal choice for application frameworks.

However, Backbone is not the only choice for this kind of tool. Popular alternatives include Ember.js and Angular.js, which are both excellent frameworks. The goal of this post isn’t to focus on the the differences between these frameworks, but rather a workflow that supports the development of projects using them. For much of what this post covers, there are similar options for the other frameworks.

Getting started

Assuming you have a completely fresh system, you will need to globally install a few things to use generator-backbone:

The dependencies of these tools will also need to be installed and set up, so refer to their respective documentation for more info.

Once that’s all working, you’ll need to globally install backbone-generator at the command line:

npm install -g generator-backbone

Now you’re ready to generate a blank project. Let’s do it:

mkdir my-project
cd my-project

# Initialize the project
yo backbone

This will show a friendly, mustachioed yeoman to guide you through the setup. He will ask you a bit about what you’d like to install for your project. Just press the Space bar to toggle the options on or off. At a minimum, I suggest opting into Bootstrap (for Sass) and RequireJS. Importantly, RequireJS is necessary to take advantage of the build process that backbone-generator sets up for you, which is discussed later in this post.

After have you have made your selections, a bunch of text will fly across the screen, making you look impressive and productive. All that’s actually happening is that a bunch of packages from npm and Bower are being installed. Please note that these packages are not kept in source control. Any time you or someone else check this app out from source control, these packages will have to be installed again with:

npm install && bower install

If all is well, everything is set up and you can start your app with:

grunt server

This will start a lightweight Node server on port 9000 and open up the app in your web browser. You’re ready to start coding!

So, what’s so special about this?

You just installed a lot of things, and your project directory is now full of a lot of files that may not seem immediately useful. Rest assured, everything here has a purpose and will help you become more efficient in the long run. Admittedly, there is a learning curve with this myriad of tools, and the rest of this post will highlight a few of the parts that I find most useful in my daily development.

Package management

Gone are the days of copy/pasting the source code of a JavaScript library onto your local disk and linking it up via a <script> tag. Package management tools for front end projects are here, and they are amazing. My manager of choice for client-side packages is Bower, and generator-backbone uses that alongside npm for full-stack package management. Bower, along with RequireJS, allows you to easily get a third-party script and link it up in the modules that need it. This keeps your code remarkably clean and organized.

Let’s take a look at how this works. A tool that I’ve recently come to really enjoy is backbone-faux-server, a server mocking library for Backbone. To bring this into a backbone-generator project, I pull it down via Bower at the command line:

# Get the package and update bower.json
bower install --save-dev backbone-faux-server

Now that it’s on disk, I can list it as a dependency in one of my module files:

// file: app/scripts/routes/mock-routes.js

require.config({&amp;lt;/pre&amp;gt;
  // Generally you'd want to define all of the paths in a central place (the default is
  // app/scripts/main.js), but let's keep things simple for this example and list it here.
  paths: {
    'backbone-faux-router': '../../bower_components/backbone-faux-router/backbone-faux-router'
  }
});

define(['backbone-faux-router'], function (fauxRouter) {
  fauxRouter.addRoute('testEndpoint', 'endpoint/', 'POST', function (context) {
    // Mock API response here
    return response;
  });
});

This is much more scalable than laboriously managing a block of <script> tags. Even better: If a package properly supports the AMD format, no global variables are exposed, preventing many potential bugs. This workflow drastically cuts down the time it takes to pull in and try out a package. If I decide that I don’t want a package anymore, all I need to do is:

# `package-name` is the name of the Bower component to remove
bower uninstall --save-dev &amp;lt;package-name&amp;gt;

LiveReload and recompilation

At first, I was a non-believer when it came to using LiveReload in my development cycle. I was used to the edit-save-refresh cycle and didn’t see the need for all that live-updating fanciness. In hindsight, I’m not sure why I thought that way. I use LiveReload for all of my Jellyvision projects now and I love it. It goes a long way towards narrowing the cognitive gap between your input (the code) and the output (the rendered page).

Thankfully, backbone-generator sets up LiveReload for us, with no configuration necessary. You can see this on a fresh project by starting the server (grunt server) and making a code change. For starters, try modifying the background color on the body in app/styles/main.scss. After saving the file, the watch task (which powers LiveReload) will notice the change and refresh the page. It even handles the Sass compilation for you. It’s like magic, and it really helps to speed up your workflow.

A build process

Of all the tools that backbone-generator gives you, I feel that the most significant is the build process. Setting up a build process can be really hard and complex, but backbone-generator starts you off with a process that’s as easy as:

grunt build

backbone-generator’s build process does more than simply concatenate and minify your JavaScript. It makes transformations to your HTML to point to production-ready resources, it optimizes your images and CSS, and it gives the generated files unique names to prevent users from using cached resources. It basically gets all of your static files into a production-ready state, which is typically a laborious and time-consuming process. It even centralizes all of the optimized files into a single .gitignored location (dist/), so you easily zip up the files and hand them off to another process or team. There’s really not much more to ask from a build process.

But, in case you do need to ask for more from your build process, the configuration for the build task is completely customizable. In my case, I’ve had to add some particularly complex steps to my build configuration to meet the demands of the next version of ALEX. However, the initial build configuration that backbone-generator provided gave me valuable guidance and allowed me to spend time focusing on the unique requirements of my project, rather than wiring up a generic CSS optimization pipeline.

But wait, there’s more

I just covered some of the features of backbone-generator that I am most excited about. However, it provides a wealth of other tools that make the web development workflow faster, easier, and a lot more fun. The best way to see what this Yeoman generator gives you is to take it for a spin. backbone-generator doesn’t fit every project’s requirements, and it may be excessive for some people’s needs. However, I have found that having a robust development infrastructure is invaluable for getting productive quickly. There are a lot of powerful tools available to front end developers now, and generators like this make them more accessible than ever before.




Tagged with: