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

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
Sublime Text is a sophisticated text editor for code, markup and prose. You'll love the slick user interface, extraordinary features and amazing performance.

LightTable
www.lighttable.com
Light Table is a new interactive IDE that lets you modify running programs and embed anything from websites to games. It provides the real time feedback we need to not only answer questions about our code, but to understand how our programs really work.

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

View all WebStorm videos and tutorials on JetBrains TV.

Vim
www.vim.org
Vim is an advanced text editor that seeks to provide the power of the de-facto Unix editor 'Vi', with a more complete feature set. It's useful whether you're already using vi or using a different editor. Vim is a highly configurable text editor built to enable efficient text editing. It is an improved version of the vi editor distributed with most UNIX systems. Vim is often called a "programmer's editor," and so useful for programming that many consider it an entire IDE. It's not just for programmers, though. Vim is perfect for all kinds of text editing, from composing email to editing configuration files. Despite what the above comic suggests, Vim can be configured to work in a very simple (Notepad-like) way, called evim or Easy Vim.

Brackets
brackets.io
Brackets is an open-source editor for web design and development built on top of web technologies such as HTML, CSS and JavaScript. The project was created and is maintained by Adobe, and is released under an MIT License.
Brackets is built using HTML, CSS and JavaScript. If you can code in Brackets, you can code on Brackets.
Brackets, is a fully open-source, community-driven project. Want to influence its direction? Join the developer list and start contributing.
Rather than clutter your workspace with floating panels, toolbars and icons, Brackets focuses on providing “Quick Edit” in-line views that provide context-sensitive access to your content, without taking you away from your code.
The browser is your design view. Brackets hooks up directly to the browser, allowing you to design and develop in the same environment that you deploy.

JAVASCRIPT FRAMEWORKS

Backbone
backbonejs.org
Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. The project is hosted on GitHub, and the annotated source code is available, as well as an online test suite, an example application, a list of tutorials and a long list of real-world projects that use Backbone. Backbone is available for use under the MIT software license.

Ember.js
emberjs.com
Ember is the successor to SproutCore, a powerful open source JavaScript framework that attempted to port Apple’s Cocoa user interface to the web.
Ember, is a 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
AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running what are known as single-page applications. Its goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier. The library reads in HTML that contains additional custom tag attributes; it then obeys the directives in those custom attributes, and binds input or output parts of the page to a model represented by standard JavaScript variables. The values of those JavaScript variables can be manually set, or retrieved from static or dynamic JSON resources.

Knockout.js
knockoutjs.com
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

Headline features:

• Elegant dependency tracking - automatically updates the right parts of your UI whenever your data model changes.
• Declarative bindings - a simple and obvious way to connect parts of your UI to your data model. You can construct a complex dynamic UIs easily using arbitrarily nested binding contexts.
• Trivially extensible - implement custom behaviors as new declarative bindings for easy reuse in just a few lines of code.

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. Meteor is an open-source platform for building top-quality web apps in afraction of the time, whether you're an expert developer or just getting started.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.