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!
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…
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 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.
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.
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!
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!
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.
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.
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?
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.
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.