Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
14th May 2013

10 Front-end developer tools you can’t live without

As the web matures, so does the necessity for modern tools, frameworks and applications. Ever wondered what the pros use in their day-to-day workflows?

10 Front-end developer tools you can't live without

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 realise just how quickly our techniques and processes are advancing into a modern age of front-end development.

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 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! 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 favourite animated GIF and you’re done! Upload that bad-boy to Geocities and wait for the traffic to come rolling in!

Ah, 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 evangelising 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 gentlemen, it’s a very good time to be a front-end developer!

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), all of the items listed above are prerequisites for building modern, cross-browser web 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 opinionated stance on what tools you should be using, along with a few alternatives for each category. So let’s get started with those essential tools…

EDITORS

Sublime Text 3
www.sublimetext.com/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 evangelised 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 their user base with underwhelming updates, the Sublime Text team (consisting of one person, believe it or not) focuses the bulk of its 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.


LightTable
www.lighttable.com

If Sublime Text offers the pinnacle traditional code editor, then LightTable hopes to completely revolutionise 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!

WebStorm
www.jetbrains.com/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.

Vim
www.vim.org

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!

Brackets
brackets.io

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!

JAVASCRIPT FRAMEWORKS

Backbone
backbonejs.org

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, downright elegant code.
Hoping for a crash-course in Backbone? Check out Tuts+ Premium and CodeSchool; they’ll have you prepped in record time.

Ember.js
emberjs.com

Ember is the spiritual successor to SproutCore, a powerful open source JavaScript framework that attempted to port Apple’s Cocoa user interface to the web. The reason for the name change stems from
the fact that the code base was completely rewritten from scratch, in an attempt to break away from a considerable amount of legacy code and some ‘faulty’ ways of thinking.
As the Ember team puts 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 favour 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.

AngularJS
angularjs.org

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?

Knockout.js
knockoutjs.com

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.

Meteor
meteor.com

Meteor is a new full-stack JavaScript, powered by Node.js. It will revolutionise 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.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.