Brackets Turns 30 (Ditches the Minivan and Goes for the Jet Pack!)

Nearly one year ago, Jeffrey Way reviewed the open source Brackets project. In the time since that review Brackets has come quite far, recently celebrating it's 33rd Sprint release. In this article I'll talk about many of the updates as well as demonstrate why Brackets is my favorite editor.

Ok, What Is Brackets Again?

Brackets primary focus is on web development.

Just in case you aren't aware, Brackets is an open-source code editor focused on web development and built with web standards. Yes - an editor built with HTML, JavaScript, and CSS. It was originally released in July 2012 on GitHub (http://github.com/adobe/brackets). While launched by Adobe, the commiters behind Brackets include folks from numerous sources. (As an aside, the Brackets team makes it a priority to focus on non-Adobe pull requests.)

Brackets primary focus is on web development. You get the expected editing and code hinting for HTML, CSS, and JavaScript of course, but you also get some powerful features on top of this. The "Live Preview" feature connects your Brackets editor to your browser. As you edit CSS, updates happen in real time providing instant feedback. Just selecting CSS items will provide highlights within the browser so you know exactly what you are working with. Another feature, quick editing, let's you select an HTML tag and instantly get to the CSS code that applies to that part of the DOM. What isn't directly supported in Brackets can be achieved via a rich extension API (again using web standards) to let developers add whatever feature they want. Extensions have been created for CSS linting, HTML validation, GitHub integration, and more. (I'm writing this article in Markdown within my Brackets editor using a Markdown extension that gives me a live update of the display.)

That's where Brackets began. Now let's talk about where it has come and what we can expect in the future.

The Basics - Covered

Improvements have been made in all aspects (HTML, CSS, and JavaScript).

When Brackets first launched, it was something of an experiment. Could you use web standards to build an editor for web developers? Even more importantly, could you build something that would perform? Because this was something of an experiment and there were many low level architectural concerns, some things that you would expect in any decent editor, like renaming files for example, did not ship for a long time. Brackets was not marketed as being ready for prime time. Instead, the idea was to try something new and see what worked.

It is now fair to say that Brackets has all of the basics covered. Things like creating new files, deleting, opening from the file system, etc. are now baked in. While not necessarily something to crow about, if the lack of these basic features were the only thing keeping you from using Brackets, now is definitely the time to check it out. (And for those of you waiting for a Linux version - one is ready for you!)

Along with basic file operations, code hinting has been dramatically improved over time. Improvements have been made in all aspects (HTML, CSS, and JavaScript). Recently, Brackets added support for parsing and hinting of your own functions. Imagine that you've written two JavaScript functions. As you type your calls to these functions, Brackets tries to understand both the arguments and the types of arguments required and provide code support as you type. Here is a simple example:

/*
* @param {number} x First number
* @param {number} y Second number
*/
function ringTheBell(x, y) {
    'use strict';
    var total = x + y;
    return total;
}

function sayHello(name) {
    'use strict';
    return "Hello, " + name;
}

My code has two functions, one called ringTheBell and one called sayHello. I provided some additional metadata for ringTheBell, but that isn't required. Providing it though will make code hinting a bit nicer. Now I'm going to type a call to ringTheBell:

Notice how it detected the arguments and and type. If I enter a value for the first argument, notice how the code hinting bolds the second argument:

Even in cases where Bracket's can't determine the type of argument being used in a function, it will still provide you with the name of the argument which can be useful:

Live Connect for HTML

Recently Brackets added real support for HTML live connect.

Live Connect is probably one of the cooler aspects of Brackets. As I mentioned above, it lets you edit CSS and see updates in real time. Need to tweak padding or margins? You can use your editor and see the impact immediately. Browsers typically allow for this (Chrome Dev Tools), but don't normally provide an easy way to get those changes back out into source. Chrome has made strides in this area recently, but as much as I love Chrome, I'd rather write my code in an editor.

While that worked great for CSS, it did not support HTML. Brackets would automatically reload your browser on saving an HTML file, but if you wanted to preview your changes without a save, you were out of luck. Recently Brackets added real support for HTML live connect. As you modify your HTML code the browser will update in real time. You will also see highlights in the DOM for the area you're modifying. This doesn't really translate well to screenshots, but imagine the following HTML.

<!doctype html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>

        <h2>This is a Test</h2>
    
        <p>
        fooioikkkllklkkopkk
        </p>
        
    </body>
</html>

If I click in the h2 above, Chrome will render a highlight of that item:

If I modify text inside the h2, Chrome will reflect those changes immediately.

Working With Extensions

Another important update to Brackets involves extension support. Behind the scenes, what extensions can do and how they can do it have been progressively improving with each sprint. While not necessarily that important to an end user, for people writing extensions the improvements had made it much easier to add new features to Brackets. If you can spend less time on boilerplate code and more time on features, that's an all around win for extending Brackets. Brackets also exposes the ability to use Node.js itself for extensions. This feature gives your extensions the ability to make use of anything Node can - which by itself pretty much opens the entire world to you. This is a rather complex topic but if you want to learn more, read this guide: Brackets Node Process.

That's behind the scenes, but for the end user, Brackets has come a long way in making it easier to actually use extensions. Brackets now ships with a full-fledged Extension Manager. Available via the File menu or an icon in the right gutter, clicking it will launch the manager:

Notice that for each extension have installed, you can see details about the version, links for additional information, and even better, a quick way to remove the extension if it is causing problems. At the bottom of this manager is a button that lets you install extensions from a URL. That's handy if you know what extension you want (as well as the GitHub URL), but what if you don't? Simply click on the Available tab:

You can now browse (and even filter) through a long list of available extensions. Even better, installation is as simple as clicking a button. Note the Bracket's Extension Manager is even smart enough to recognize when an extension may not be compatible with your version of Brackets:

Theseus Integration

Probably the most exciting update to Brackets (at least for me) is the integration of the Theseus. Theseus is an open source project created by folks from both Adobe and MIT. It is focused on providing debugging support for both Chrome and Node.js applications. Imagine being able to debug a Node.js application made up of server-side JavaScript as well as client-side code. Theseus provides just that. While still early in development, Theseus is now integrated into Brackets and can be used within the editor itself.

Theseus currently provides three main features:

• Code coverage in real-time
• Retroactive inspection
• Asynchronous call tree

Let's look at a few examples of these. Theseus's code coverage support will show how often a function is called. It sounds simple, but can be powerful. I recently tried Theseus on a simple demo that made use of AJAX to call a server-side program. I noticed that my demo wasn't working, and the Theseus-integration in Brackets confirmed this. Notice the "0 calls" report by my callback:

Turns out my server-side code wasn't set up right and I didn't write my JavaScript code to support an error callback for the AJAX call. This was literally the first time I played with Theseus and it immediately helped point out a problem in my code. After modifying my front-end code, I could see the difference right away:

To be clear, this is all done in real-time. With Brackets open and Chrome open, I can click around in my application and see the updates in Brackets in sync with my actions in the browser.

On top of just seeing the call count, I can also click on an item and see what was passed to it. This is the retroactive inspection feature I mentioned above. Note that you can click into complex properties and really dig into the data.

Finally, for asynchronous calls that my occur at an undefined time after their initial call, Theseus has no problem handling and correctly organizing these calls under their initiator.

Adding New CSS Rules

One of the earliest features in Brackets was inline editing for CSS items. You could put your cursor in any HTML element, hit CMD/CTRL+E, and Brackets would scan your project to find relevant CSS files as well as the appropriate matching rule. This made it incredibly easy to quickly update the style sheets applicable for your content.

This worked well - as long as your content actually had a matching CSS rule. In the latest update to Brackets, the editor will now recognize when an element doesn't have a matching CSS rule.

You can now directly add a new CSS rule right from the inline editor.

New Theme

Finally, a new "shell" look is being added to Brackets. Currently available to Windows only (but will be in the OSX build soon), the "Dark" look is the future of the Brackets look and feel.

What Next?

Your primary editor is a very personal decision for a developer.

Your primary editor is a very personal decision for a developer. I found myself using Sublime Text a few months ago and noticed that something wasn't working right. Turns out, I was trying to use a Brackets feature. That day I switched from Sublime as my primary editor to Brackets. I still use Sublime (and to be clear, it is a pretty darn awesome editor!) but now my day to day work is done almost entirely in Brackets.

Obviously I'd love for you to go - right now - and download Brackets. But if you want to dig a bit more before you commit (hey, I understand, building a relationship with an editor is a serious undertaking), check out these resources:

• First and foremost, the Bracket's home page is your core location for everything about Brackets.
• Even if you have no plans on contributing to Brackets, looking at the source code on GitHub would be a great way to look at a seriously cool application built with web standards.
• Have a question or a problem with Brackets? Head over to the Google Group to post your question. That's where I go when I have problems and I typically get help pretty quickly.
• Finally, if you want to know what's coming next with Brackets, you can find everything at the Trello board.