Essential Tools For A Modern Front-end Development Workflow
When you think about it, the phrase, "modern front-end development" is a relatively new thing! When compared to competing platforms and industries, the web is still in its infancy stage. That being said, one only needs to read a development-specific Twitter feed, or say hello on a few applicable IRC channels to realize just how quickly our techniques and processes are advancing into a modern age of front-end development.
Hand-code some HTML (in all caps, of course), add a touch of inline CSS, insert your favorite animated GIF, and you're done!
It's fun to reminisce back to the days, not too long ago, when the process of building a simple website involved little more than a text editor (possibly even Notepad), and a bit of HTML and CSS understanding. Not a fan of Internet Explorer 7? Well back then, in the late nineties, we were wrangling Internet Explorer 3 into shape, if you can imagine! Though the ecosystem wasn't nearly as mature as it is today, the process was simpler. Hand-code some HTML (in all caps, of course), add a touch of inline CSS, insert your favorite animated GIF, and you're done! Upload that bad-boy to Geocities, and wait for the traffic to come rolling in!
In an ocean of tools, libraries, and frameworks, which ones should you use?
While all of this may seem overwhelming at first (don't worry, it should; we've all felt that way at one point or another), each of the items listed above are prerequisites for building modern, cross-browser applications. The only question is: in an ocean of tools, libraries, and frameworks, which ones should you use? Or, put more directly, how do you separate the abandonware from the cream of the crop? This article will provide a somewhat opionated stance on what tools you should be using, along with a few alternatives for each category.
Let's put it this way: if you don't know the ins and outs of your code editor, then you're doing it wrong. If you hold a position that virtually mandates eight hours a day of work within one code editor (let's be honest; it's way more than that), shouldn't you dedicate the necessary resources to optimize your workflow as much as possible? Even a five second reduction to a task in your daily workflow can add up to a significant time savings, over the course of a year.
If you've stagnantly rested on your laurels in the same editor for the last decade, perhaps it's time to consider some alternatives.
Even a few years ago, you'd struggle to find a developer who knew what Sublime Text was. Fast forward to today, and it's easily the most evangelized code editor in our industry. The reason why is obvious; while competing editors, such as TextMate and Coda, have either fallen by the wayside or disappointed its userbase with underwhelming updates, the Sublime Text team (consisting of one person, believe it or not) focuses the bulk of their efforts on the most important aspect of your development workflow: speed. And, boy oh boy is Sublime fast. With a simple keystroke, you'll find yourself switching from file to file with such ease and finesse to the point that you'll cringe at the thought of manually browsing through a file tree, like your former self once did.
As with most things in life, there's a reason for Sublime's popularity. Though not free, it's the best code editor available today. Period.
"There's a reason for Sublime's popularity."
"Could LightTable surpass Sublime Text in 2013? We'll have to wait and see!"
While there's certainly been a movement away from full IDEs in recent years, nonetheless, many continue to champion their benefits. Luckily, there's a variety of options to choose from! Most notably, the JetBrains team has been doing a wonderful job in recent years of maintaining a variety of platform-specific IDEs, including WebStorm, PHPStorm, and RubyMine.
If you're one who prefers such an IDE, place JetBrains' offering at the top of your "to review" list. You won't be disappointed.
"If you're one who prefers such an IDE, place JetBrains' offering at the top of your "to review" list."
You might be thinking to yourself, "why would Vim be included in a list of modern tools?" While Vim, or originally Vi, has, indeed, been around for decades, the truth is that it's very much a modern editor that remains in active development. In terms of sheer extendability and speed, it's difficult to top Vim. Keep in mind, though, that if you do give it a chance, you should plan on months of training. It's a notoriously difficult editor to use. However, once you do commit those keybindings to memory, you'll be unstoppable!
"Vim is a notoriously difficult editor to use."
Though it's still in need of some polish, Brackets is very much in active development. Expect to see this one give Sublime Text a run for its money this year!
"Expect to see Brackets give Sublime Text a run for its money this year!"
As the industry continues to evolve, we're beginning to see widespread adoption of a new methodology for providing highly responsive experiences on the web: SPAs, or single page web applications. While, in the past, an effort this ambitious would have required an overwhelming amount of code, luckily, thanks to various frameworks, the process is easier than it's ever been! The following tools will jumpstart your process.
Though it may require a bit of rethinking, when it comes to your understanding of a client-side MVC (or MV*) framework (especially, if you're coming from a server-side framework, such as Rails or Laravel), once you fully grasp the essentials, you'll find yourself writing clean, modular, down-right elegant code.
Hoping for a crash-course in Backbone? Check out Tuts+ Premium and CodeSchool; they'll have you prepped in record time.
"Backbone provides structure for your sloppy spaghetti jQuery code!"
As the Ember teams put it, the success of Backbone proved to them that the development community indeed wanted the ability to build responsive, client-side apps, however, they also had years of experience crafting custom UIs with HTML and CSS. SproutCore's attempt to replace this, in favor of its Cocoa-like UI, wasn't the correct path.
From this failure came Ember, a new framework that's sparking its way through the development community at record speeds. If Backbone doesn't quite fit the bill, move up to Ember.
"If Backbone doesn't quite fit the bill, move up to Ember."
Angular, developed and backed by Google, takes a different path, by providing the necessary tools you to extend HTML's vocabulary for your applications, as needed. While some feel that this sort of data binding makes for messy, non-separated code, others champion its flexibility and ease of development.
As the Angular team puts it, HTML was not designed to manage dynamic views. Angular fills in this glaring gap. What's your opinion?
"HTML was not designed to manage dynamic views. Angular fills in this glaring gap."
While, again, countless developers have argued against this approach, there's no denying that it has its merits. What may require hundreds of lines of code in Backbone can be accomplished with but a few dozen in Knockout. The only question is: can you sleep at night, with all of that data binding in your HTML? There's no correct answer to this question. Only preference.
"What may require hundreds of lines of code in Backbone can be accomplished with but a few dozen in Knockout."
While the framework has not yet reached version 1.0, as long as development remains active, you should absolutely investigate this new approach to writing applications.
While there are a variety of test frameworks to choose from, including Jasmine and QUnit, in this author's opinion, experiment with Mocha first, which was created by the same person who is behind Stylus and the Express framework: TJ Holowaychuk.
"Mocha was built by the same person who is behind Stylus and the Express framework: TJ Holowaychuk."
For years, the front-end community debated over whether CSS preprocessing was necessary. The language is a simple one; why are we complicating it? Thankfully, over time, and as the web stack matured, the majority of front-end developers came to terms with the fact that, until the language, itself, matures a bit more, preprocessing is a necessity for all but the most trivial of websites. Don't worry: many of these preprocessor conveniences are slowly but surely working their way into the language. These things simply take time.
As its website so boldy declares, Sass makes CSS fun again. Variables, nesting, mixins...Sass has it all. More importantly, if your goal is to learn the most popular preprocessor available, as well as various frameworks built on top of it, such as Compass, Sass should be your choice.
Sass can even mold itself to fit your needs. If the indent-specific style of the original
.sass syntax feels foreign to you, then simply switch to the alternate
.scss format, and continue writing your stylesheets in the same fashion that you've done for years.
Chances are, if you join a development team in the near future, Sass will be their preprocessor of choice, and the one that you will be asked to learn.
"Sass makes CSS fun again."
"Traditionally, LESS has appealed more to web designers than Sass."
A relative newcomer to the scene, Stylus perhaps offers the most flexibility of all three preprocesors in this list. Prefer semicolons? Keep them. Hate using colons to separate properties and values? Remove them! The key is in the fact that Stylus provides you with the ability to customize your stylesheets how you see fit. Configurability at its best!
The only downside (and a significant one, at that) is that, due to its age, it's more than likely that members on your development team, or community contributors if you happen to be developing an open source application, will likely not yet be familiar with Stylus.
"Configurability at its best."
Thanks to increased adoption and improvements to source maps, many of the downsides to using such a preprocessor are rapidly becoming non-issues. If you question the need for yet another preprocessor, never fear; like Sass, many of CoffeeScript's innovations will be implemented into future version of ECMAScript.
CodeKit, created by the always funny Bryan Jones, exploded onto the front-end world in 2012, and is now used by such sites as BarackObama.com and Engadget. Like steroids for web developers, it merges various compilers, minifiers, and optimizations into one beautiful Mac application. If the Terminal feels like a black box to you, limiting your ability to embrace and harness the previously mentioned preprocessors, then CodeKit is your solution.
"CodeKit exploded onto the front-end world in 2012."
LiveReload is quite similar to CodeKit. In fact, disregarding some UI differences, and a few of CodeKit's unique features, both apps will equally allow you to get from point A to Z, so to speak.
Like CodeKit, LiveReload allows you to monitor a file system for changes, and perform the necessary preprocessing and compiling in response. It also will auto-update the browser upon saving each file.
Unlike CodeKit, however, LiveReload is available for both Mac and Windows. In translation, if you're a Windows users, LiveReload is, by default, your only choice. Don't worry; it's a good one!
"LiveReload is available for both Mac and Windows."
"When it comes to manipulating the DOM, there's no better tool."
shuffle? If so, you certainly wouldn't be the first. Luckily, the popular Underscore library provides this missing functionality. Think of it as a utility belt that offers a few dozen helper functions that you would, otherwise, code from scratch, like for each new project.
If you happen to be using Backbone, then you're likely already familiar with Underscore, as it's a hard dependency of the framework.
Tools and Utilities
Once you optimize your coding workflow, it quickly becomes apparent that additional tooling and functionality might be necessary. Such tools include everything from module loaders, to test runners.
"RequireJS is easily the most popular module loader available today."
One significant barrier to testing is the simple fact that it can sometimes take a considerable amount of setup to get up and running. The longer it takes, the more likely it is that the developer simply won’t bother. That’s why Testem is so fantastic; it makes testing as effortless as possible, and, more importantly, fun!
We've all experienced it; your website displays beautifully in Chrome and Firefox, but, then, you view it in Internet Explorer, and come to terms with the fact that you'll be dedicating the next several hours to cross-browser support.
Normalize makes all browsers render elements in as consistent a fashion as possible. Have you ever experienced the annoyance of debugging a three pixel input height inconsistency, from browser to browser? With Normalize, you'll never deal with that again!
"Normalize makes all browsers render elements in as consistent a fashion as possible."
HTML5 Boilerplate is the product of years and years of experience and tinkering. It's the ultimate project kick-starter, and is used by such companies as Google, Microsoft, and NASA. The best part is that, even if you never fully embrace the project, it remains a fantastic resource, if only for copy and paste purposes.
"The product of years and years of experience and tinkering."
While the development world often preaches the necessity for reusable code, the truth is that, when it comes to CSS, this advice is, more often than not, ignored. How many times have you found yourself writing the necessary styling for a blog post or message box? If only someone would provide a clean package with these reusable components, we could scaffold new applications with incredible speed!
"Particularly for the non-designers among you, Bootstrap is a fantastic choice."
"If Twitter Bootstrap doesn't quite tickle your fancy, then your second choice should most definitely be Foundation 4."
It's true: as our ecosystem matures, so does the necessity for continued education and experimentation with the latest tools and frameworks. But, hey, we signed up for this; no fussing allowed! We have the unique opportunity of being, in the grand scheme of things, the flagship development crew in the most revolutionary innovation in our history: the internet.