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!
Ahh, those were the days. Thankfully, though, the web has matured immensely since then. In fact, as a community, we've agreed upon a plethora of best practices and tooling. We use version control to collaborate on open source projects. We embrace test-driven development for JavaScript (using tools, like Mocha and Jasmine). We prevent "reinvent the wheel"-itus, by instead harnessing our efforts into contributing to highly tested libraries, such as jQuery. We've broken free from untestable, spaghetti code, by evangelizing the necessity for dedicated frameworks, such as Backbone and Ember. We've even applied the principles of object-oriented programming to our CSS (OOCSS)! Yes, ladies and gentleman, it's a very good time to be a front-end developer!
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.
Editors
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.
Sublime Text 3
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."
LightTable
If Sublime Text offers the pinnacle traditional code editor, then LightTable hopes to completely revolutionize the coding experience. While it's still very much in an alpha state, the progress so far has been incredibly promising. Imagine having the ability to evaluate your JavaScript in real time, without ever leaving the editor. This level of real-time feedback is unprecedented. Combine the speed and configurability of Vim, with the elegance that we've come to expect from modern apps; LightTable offers this and more. Could it surpass Sublime Text in 2013? We'll have to wait and see! Until then, keep a close eye on this one!
"Could LightTable surpass Sublime Text in 2013? We'll have to wait and see!"
WebStorm
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."
Vim
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."
Brackets
Brackets is unique in that it's an open-source code editor developed by Adobe, that takes HTML, CSS, and JavaScript to the extreme: it’s built with those very technologies! As a result, as long as you have a relatively basic understanding of JavaScript, you already have the necessary tools to extend the editor as you see fit. Front-end developers are doing this very thing every day, in fact.
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!"
JavaScript Frameworks
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.
Backbone
Currently the reigning champ of JavaScript frameworks (at least, in terms of popularity), Backbone provides structure for your sloppy spaghetti jQuery code!
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!"
Ember.js
Ember is the spiritual successor to SproutCore, a powerful JavaScript framework that attempted to port the Cocoa UI to the web. The reason for the name change stems from the fact that the codebase was completely rewritten from scratch, in an attempt to break away from a considerable amount of legacy code and faulty ways of thinking.
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."
AngularJS
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."
Knockout.js
One of the original modern JavaScript frameworks, Knockout, which preceded Angular, too, advocates a data-binding approach for building responsive applications with a minimal amount of code.
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."
Meteor
Meteor is a new full-stack JavaScript, powered by Node.js. It's guaranteed to revolutionize the way that you approach writing highly responsive and dynamic web applications.
Imagine writing your entire application in nothing but JavaScript; not just the client-side, but the persistence layer, as well! With every single API offered in one language, imagine the convenience and flexibility that this could provide!
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.
"Imagine writing your entire application in nothing but JavaScript."
Mocha
As noted earlier, the front-end world has matured immensely in the last half-decade. At one point, the community cringed at the though of writing even a single line of JavaScript. Fast-forward today, and not only is there a seemingly endless wave of JavaScript libraries and frameworks, but testing (and even the TDD pattern) has pushed to the front and center.
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."
Preprocessors
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.
Sass
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."
LESS
Mostly, you'll find that the three most popular CSS preprocessors, Sass, LESS, and Stylus are more or less the same. Only moderate syntax differences separate the three. In the past, LESS has been the more approachable option for web designers, as it offers a readable CSS-like syntax (something that Sass did not originally offer). As an added bonus, one only needs to import a single JavaScript file to enjoy the flexibility of dynamic stylesheets.
"Traditionally, LESS has appealed more to web designers than Sass."
Stylus
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."
CoffeeScript
CoffeeScript, as many might put it, makes JavaScript managable. It begins by removing the ugly bits. Semicolons? Gone. Braces? Those are stripped too. Parenthesis? Let's make them optional. It then provides a number of features, which, for all intents and purposes, translates to syntatic sugar. Lexical scope, splats, array comprehension, CoffeeScript offers it all, while ultimately compiling down to vanilla JavaScript.
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.
"CoffeeScript makes JavaScript managable."
TypeScript
For those who can't quite connect with CoffeeScript's Ruby-like syntax, TypeScript is an excellent alternative. It allows you to continue writing in a dialect of JavaScript, while embracing the latest additions to ECMAScript 6. Similar to CoffeeScript, ultimately, your code compiles down to simple JavaScript that can run in the browser.
"TypeScript allows you to continue writing in a dialect of JavaScript, while embracing the latest additions to ECMAScript 6."
CodeKit
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
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."
Libraries
Chances are, prior to the success of jQuery, you viewed JavaScript in the same light as Voldemort. Refrain from speaking its name, and avoid it at all costs. While jQuery wasn't the first library to provide a solution for the various cross-browser issues that existed at the time, it was, in fact, the first library to offer a solution that appealed to the every day front-end designer. Since then, countless developers have followed suit with their own excellent libraries.
jQuery
What is there to note about jQuery that hasn't already been said? jQuery made JavaScript approachable and sparked a new generation of enthusiastic client-side developers. That's perhaps the greatest compliment that one could ever pay to a library. While it's certainly not the answer to every problem, when it comes to manipulating the DOM, there's no better tool.
"When it comes to manipulating the DOM, there's no better tool."
Underscore
Have you ever felt that JavaScript lacked many obvious native functions, such as find, pluck, or 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.
"Have you ever felt that JavaScript lacked many obvious native functions?"
D3
d3js.org
D3 is a fantastic JavaScript-based data visualization library that allows you to bind data to the DOM, and then make transformations to the document. To learn more, refer to D3′s GitHub repository for a massive gallery of examples for visualizing various data sets.
"D3 is a fantastic JavaScript-based data visualization library."
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
At some point, you'll surely begin to pull away from the idea of nesting all of your JavaScript within a single file. When this day occurs, you'll quickly come across RequireJS, which is a file/module loader. Unfortunately, though, switching to a modular approach to writing JavaScript is a more difficult process than one might hope for. After you understand the concept of AMD, you then have to decode the logistics: how do you setup RequireJS? What about non-AMD libraries? What about dependency management? What about configuration and optimization? True, there is a learning curve involved, but it's absolutely worth it.
"RequireJS is easily the most popular module loader available today."
Testem
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!
Grunt
At its core, Grunt is a simple task-based command-line tool for building JavaScript applications. Think of it as a tool that can execute a variety of small, yet common operations. Compilation, minification, test running, deployment - each of these can and should be automated. With Grunt, lengthy processes such as this can be translated into a single command.
Normalize
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
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."
Twitter Bootstrap
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!
Enter Bootstrap. Developed by the team at Twitter, Bootstrap provides a plethora of components and classes (both CSS and JavaScript-based) to minimize the amount of boilerplate code that must be written for each new project. This includes everything from a reset stylesheet, to beautiful buttons, to JavaScript-activated modal boxes. Particularly for the non-designers among you, Bootstrap is a fantastic choice.
"Particularly for the non-designers among you, Bootstrap is a fantastic choice."
Foundation 4
If Twitter Bootstrap doesn't quite tickle your fancy, then your second choice should most definitely be Foundation 4, by the folks at Zurb. Similar to Bootstrap, Foundation offers a flexible grid, JavaScript plugins, and various CSS components for rapid scaffolding. The truth is that you can't go wrong with either choice. Ultimately, it comes down to one thing: personal preference. Which one feels right to you?
"If Twitter Bootstrap doesn't quite tickle your fancy, then your second choice should most definitely be Foundation 4."
Conclusion
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.
