Boost your web development productivity with these rapid scaffolding tools
Recently, scaffolding tools in web development are becoming more and more popular. These tools can help you build your web application more quickly, providing you with shortcuts like an automated build process, image compresson, javascript minification and an integrated lightweight web server.
I’m gonna present four of these tools today, going a bit deeper into how they can help kick-start the development process of your project, which technologies they support and how they can assist you during the life cycle of your application.
Yeoman - Modern workflow for modern webapps
The first candidate comes from the likes of Paul Irish, Addy Osmany and other community fellows that work hard on making the web a better place.
Yeoman uses Grunt.js in the background to accomplish a majority of its tasks and during installation, it might prompt you to install some additional dependencies such as OptiPNG or PhantomJS, which Yeoman uses as little helpers to accomplish tasks while compiling.
After that, you can fire up a command line process that sets up a skeleton for your application. This can be based on commonly used web frameworks such as the popular HTML5 Boilerplate or Twitter Bootstrap for Compass. They’ll give you a proper starting point for setting up your work on well established community conventions regarding folder structure, cross-browser normalization and equip you with several pre-defined components.
Furthermore, Yeoman comes with so called generators that allow you to extend your projects’ scaffold by using predefined javascript application templates. These are available in several flavors, such as Backbone.js, Ember.js or Angular.js . They extend your application infrastructure by adding a basic programming scaffold and testing suites that can then be filled with your own sugar.
When you’re ready to deploy your app, the build command comes in very handy, as it takes care of all the heavy lifting that many of us are still doing manually: Image compression, compiling preprocessor code like Coffeescript or SASS as well as javascript and CSS minification.
Almost identically works the built-in server command,which will deploy your readily compiled application files and create a lightweight server process, allowing you to instantly open and test your application in the web browser. In the background, the process will keep on watching for changes, that means, if you change a CSS style or something in your HTML document, it will immediately get updated without you having to refresh the browser.
To sum it up, Yeoman is a great all-rounder to cover the essential scaffolding and automation techniques used by today’s web development community. Especially the quite extensive topic of generators (as seen in the documentation) allows for highly customized and tailormade application templates.
Middleman - Makes developing websites simple
The next tool comes from Thomas Reynolds, the Technical Lead at Instrument, a creative design agency from Portland, Oregon. It’s essentially a command-line tool for creating static websites, the main difference to Yeoman being that it’s based on Ruby.
In order to install Middleman, you have to install the middleman gem, which requires you to have RubyGems installed. Mac OS X ships with these by default.
You can create projects based on pre-defined project templates, which beside the popular HTML5 Boilerplate include a starter kit based on HAML/SCSS or SMACSS (Scalable and Modular Architecture for CSS) scaffold.
Similar to Yeoman, you can have a local web server fired up which reacts to code changes instantly.
An interesting feature of Middleman is that inside your templates you can use the built-in templating language ERb to take advantage of programming concepts such as if-statements, variables, loops and custom layouts. The latter for instance allows you to use different layouts for each view, based on a specific route that you define in your configuration file.
Let’s look into some more advanced features of Middleman:
Local data makes it possible to have the data of a page separated from its implementation. This only requires you to set up a separate data folder, where you put YAML files which define certain content variables. In the actual template code, you can use “placeholders" to access their values.
Rack middleware is a feature that provides a way to hook libraries and plugins into the system before the Middleman server processes them. For example, a tidy markup cleaner which indents and formats HTML code the right way or a validator that checks if your markup is in compliance with the W3C established rules.
Custom extensions are another method of hooking into the Middleman ecosystem, and need to be activated from your ruby configuration file. Supposing you’re familiar with the language, you can write your own methods that provide additional features and extensions for your application. An example would be a simple link helper for your view or a sitemap generator for building an XML representation of your site’s structure with every build.
Brunch - HTML5 application assembler
Brunch is the perfect tool for the sophisticated JS developer that wants to build single-page web applications based on advanced script languages/frameworks.
By default, Brunch comes with Chaplin, a Backbone.js based architecture written in Coffeescript. There are numerous alternative application templates which include different preprocessors and javascript frameworks.
The actual Brunch assembler functions the same way as the before-mentioned tools, providing a server and watch process which wraps all scripts and templates in common.js modules**,** thus protecting them from public access and facilitate code encapsulation. One nice feature is that when you have a desktop tool like growl installed, brunch will automatically let notifications pop up when build errors occur.
Accompanying the flexible nature and language independency of the framework you have an extensive plugin repository at your disposal. It includes compilers for script and style languages such as IcedCoffeeScript and Livescript, template engines like Handlebars, or Mustache, plus various minifiers and linters.
One feature that distinguishes brunch from its competitors is compilation speed. Unlike Grunt (which Yeoman is built on), it recognizes which parts of your application have changed and compiles things a little bit faster.
Luckily, for those who are completely undecided, the brunch guys were nice enough to provide a comprehensive compare table with other scaffolding tools that points out its advantages and inconveniences to others.
CodeKit - The Mac app for web developers
For those that are not so familiar with the command line, here comes a tool that is actually a desktop application and can be downloaded directly from their website. It’s important to mention however that it is Mac only.
CodeKit comes by default with CSS preprocessors SASS and Compass, allowing you to easily set up new projects of this kind in a matter of seconds by using the predefined folder structure. It also supports other preprocessors and frameworks such as Less, Stylus and Bless for CSS or Jade, Haml and Kit for HTML, the latter being Codekit’s very own templating solution.
In the preferences settings, you can change the parameters for each language, telling the program how it should render the output (regular, compressed), check the syntax (JSHint, JSLint), and where to put the resulting output. It’s like a user interface for your configuration file, a thing which in Yeoman (gruntfile.js) or Middleman (config.rb) has to be accomplished manually.
Once you’ve got your project up and running, it will be watching for changes and render preprocessor code to the configured folders. Whenever you update something in your file structure, CodeKit will notice it and process the according changes. It’s running subtly in the background and gives advice when necessary, e.g. when there’s a javascript error that doesn’t pass the JS Linter test.
In order to collaborate with your team, CodeKit can also export your project specific configuration file in order to easily pass it on to your teammates, so they don’t have to set up everything again manually.
Compared to the other candidates, CodeKit is not a free tool. After the free trial period of 10 days you’ll have to pay (at least) 25$ to continue using it.
Conclusion
As you can see, it’s almost impossible for us as modern web developers to ignore the tools that are created around our work in order to accomplish things in new and innovative ways.
The purists among us who have already established certain methods and guidelines are gonna say they’ll not achieve results any faster this way. I admit that this is usually not the case in the short-term, since you need to change your habits and get familiar with some new techniques.
Depending on the complexity of your project however, you might want to familiarize yourself with some preprocessors and frameworks and notice the difference coming slowly but surely. The learning curve is usually quite steep but after a few month, you might not want to miss out your newly integrated tools anymore.
Hope you enjoyed reading this post and gained some new insights that will help boost your producitiy in the long run.