This story was written by Keith Dawson for UBM DeusM’s community Web site Develop in the Cloud, sponsored by AT&T. It is archived here for informational purposes only because the Develop in the Cloud site is no more. This material is Copyright 2012 by UBM DeusM.

From Artisan to Engineer

People working on the interface side of Web applications and sites are on a journey from artisan to software engineer.

Let's take a look at some of the tools and techniques, inspired by software engineering, with which front-end developers are increasingly becoming familiar.

What front-end developers do has been changing rapidly and continuously since early in this century. From design in Photoshop and layout in HTML tables, to fully cross-platform CSS sites, to AJAX and increasing use of Javascript, to jQuery and its thousands of plug-ins, to Node.js and GitHub and the cloud: this is the journey we have traversed in less than a decade. Those who have kept up have been on a path of transformation from artisans into software engineers.

Here are some of the engineering techniques with which front-end developers are increasingly becoming conversant.

Source-code control:
Also known as file versioning, revision control, and configuration management. This discipline is essential for teams working in distributed fashion on a project, but it also repays the investment in learning for an individual working alone on his or her own computer. The essential version-control tool is Git (created by Linux kernel innovator Linus Torvalds). Git is command-line focused, but a number of GUI tools have been introduced for it -- this page list nine of them. Git also underlies the highly successful social development network GitHub, which just raised a $100 million investment.

Not so long ago, Web developers used to type in pretty much the same characters that View Source would later show to a site visitor. More often than not now, HTML is generated by another program or is served out of a database. And more and more CSS developers are working with tools that enhance the capabilities of standard CSS. SASS and Less are among the most widely used such tools.

Modular development:
Increasingly, Javascript and CSS are developed in small, individual files, the better to enable unit testing. Tools such as RequireJS facilitate this modularity. RequireJS also has an optimizer component that concatenates and compresses these files into a small and production-ready form.

The concept of writing formal tests for one's Web code has been a foreign one to many front-end developers. Rebecca Murphey, a developer who has walked the artisan-engineer path over the years, sympathizes; in this video screencast she confesses to coming slowly to clarity about what exactly might need to be tested. The video explains how to approach using Jasmine to test Javascript modules and functions.

A few months back the selfsame Rebecca Murphey put together an invaluable list of the things a modern front-end developer needs to be familiar with, in order to keep up with the ongoing global conversation. She calls it a baseline for front-end developers, and it makes an excellent starting point for discovering and learning about the tools you need to know.