Read my book

I wrote books about Webpack and React. Check them out!

Monday, August 4, 2014

A Quick Look at Modern Text Editors for Web Development

Even though there have been text editors for a very long time it seems there is still room for innovation. You might think that perhaps Vim, Emacs, is enough. Regardless new alternatives seem to be popping up. In this post I'll take a brief glance at a few to give you some idea of what's going on in the field.

Editors

Some OS X users might still remember TextMate (now open source). You could say Sublime Text pretty much replaced it. I tend to use both Vim and SublimeText with Vim bindings these days. There are a few interesting alternatives around the corner, though. Particularly Light Table, Adobe Brackets and GitHub Atom have gained publicity and I'll take a better look at those.

Light Table

Light Table is perhaps one of the most hyped new editors out there. It provides an interactive programming environment. You can execute your code within the editor, modify and inspect it as it runs. You can see the concept in action in the video below.

Besides being suitable for interactive work it is possible to extend and customize Light Table somewhat as seems to be true for the newest generation of editors.




Adobe Brackets

Inline editing in Brackets
Brackets is an editor specifically designed for web development. Rather than just being a fancy text editor it provides an integrated approach for web developers.

For instance instead of having to modify HTML and CSS files separately it allows you to open CSS related to given HTML tag within the view itself.

It also provides live editing as a built-in feature. This way the changes you make are visible in the browser instantly without having to refresh it explicitly. Currently this works with Chrome only.

There are also advanced debugging capabilities that are not available in regular editors.

The video below illustrates the basic ideas well.



GitHub Atom

Just like Brackets, GitHub's Atom is built on web technologies itself. It comes with a package manager built-in and is easy to extend. You could say it has been very inspired by Sublime Text and it is likely easy to adopt if you use ST already. In addition there's Node.js integration available. That's another handy feature for plugin authors.

It's probably not an earth shattering editor yet but given its modularity and backing it would not surprise me if it became very popular within a year or two as it develops.

Again, check out a video to understand some of the basic ideas behind the editor.



Other Editors

Besides the editors discussed above there are entire IDEs to check out. WebStorm is definitely worth checking out if you are into that sort of thing. Angular support in particular might be of interest for some.

Dart programming language comes with an environment of its own. Dart editor benefits from optional typing supported by the language and makes it easier to catch certain category of errors earlier than in vanilla JavaScript without a runtime hit.

Besides "traditional" editors there's a whole category of a web based ones. Cloud9 and Codebox provide good examples of these. These type of tools allow collaboration (ie. pair coding and such) in a way that might be difficult or impossible to achieve using some other editors.

Lighter web based editors such as JSbin, jsFiddle or jsdo.it have their place as well. They might not have as strong collaboration features (ie. realtime) but are often enough for illustrating a specific problem or implementing small demos.

Conclusion

Overall it seems editors are specializing and provide more support for interactive editing than before. Older editors will still retain a following. Newer alternatives might be easier to modify and some even provide special functionality that has been developed particularly web developers in mind.

For now I'll stick with my Vim/Sublime combo and keep an eye on the newcomers. Transition from Sublime to Atom should be straightforward for instance. As long as there's support GitGutter (git diff in gutter), EditorConfig (enforces coding style), formatting and interactive linting I should be a happy camper.

Live editing, as provided by Brackets, can be provided externally. These days I prefer to use BrowserSync and invoke it through a Gulp based build. Broccoli might be a good alternative longer term but I'm waiting for it to mature for now.

The next step, bi-directional editing, is mostly handled with Tincr. Of course editing pre-processed files (SASS, LESS, ...) remains a problem but you can't get it all, at least yet.