Advertisement

Check Out Atom, GitHub's New Development Editor

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

It's been awhile since we've seen any updates in the editor space. The last big splash was made by Sublime Text which took the web development community by storm, especially once Package Control came around to serve as the package manager for the editor.

Well, GitHub is looking to shake things up with the beta launch of a new editor called Atom. I got my hands on a beta and wanted to give you a rundown of what it offers. One thing to note is that the documentation is a bit sparse, so it was tough trying to determine what every feature did, but I'll be touching on the important aspects below.

A Hackable Text Editor for the 21st Century

The first thing to keep in mind is that this is a beta version; things are going to change and some things aren't going to be in this release. For example, I didn't find a way to create a project out of a directory, which is kind of important to me. It's not ideal, but I'm also being realistic about the status of the product.

The next thing to bring up is that this editor was created completely with web technology. For example, the underlying architecture relies on Chromium (yes the basis for Google Chrome), making every window a locally-rendered web page. Why didn't they just build it as a browser-based IDE like Cloud9IDE? Because, despite a lot of progress in file APIs for the browser, there are still limitations in terms of file system access, so building it as a desktop app made a lot of sense.

atom-developer-tools

Yep, that's the Chromium Developer Tools running within the editor and I'm highlighting an element with it. It's pretty freaky to be able to modify the code within my editor with the Chrome DevTools, but it goes to show that the underlying engine is web-based.

They also leveraged Node.js to allow for file system access and provide tremendous flexibility and extensibility in their packaging system basically making Atom highly customizable and giving it incredible access to a ton of npms.

Ultimately, this statement explains best why they leveraged web technologies:

With the entire industry pushing web technology forward, we're confident that we're building Atom on fertile ground. Native UI technologies come and go, but the web is a standard that can only becomes more capable and ubiquitous with every passing year. We're excited to dig deeper into its toolbox.

When you first drop into Atom, it looks strikingly similar to Sublime, making it easy from a visual perspective to slide into it.

atom-full

One of the first things I wanted to check was language support. While I primarily work in JavaScript, I have a burning desire to get into Ruby on Rails so ensuring broad language support. Not only does it support Ruby syntax but also the Rails framework along with:

  • Python
  • CoffeeScript
  • Go
  • Sass
  • YAML

and a ton of others.

atom-languages

The breadth of coverage is very comprehensive and on par with any editor I've seen.

But it's more than just supporting languages. Atom also supports syntax shortcuts (called snippets) that allow you to quickly create code blocks with minimal typing.

atom-js

For example, if I type in ife followed by a tab, I'll get the following:

if (true) {

} else {

}

And simply typing in a lower case "f" followed by a tab gives me a skeleton for an anonymous function:

function () {

}

Products like TextExpander and other editors have done these for some time, so it's good to see GitHub including it day one.

It's Customizable

One of the things that still irks me about Sublime (even v3), is that many of the configuration settings need to be adjusted manually. In Atom, it looks like all settings are available and customizable via a settings panel, giving you the ability to update things such as:

  • Font family and size
  • Line numbers
  • Themes
  • Packages

As well as easily disable packages that you've installed.

atom-settings

Personalizing an editor is one of the first things any program does, especially the theme since it's what you'll look at every day. Atom comes with five themes by default, in both light and dark variations, but via it's packages manager, you can add more to suit your taste:

atom-themes

I was happy to see the "Monokai" theme in there since it's my personal favorite.

Now, remember how I mentioned previously that you had access to the developer tools and that Atom editor windows are basically rendered web pages? Well, what this means is that you have a ton of flexibility in customizing the look and feel of things, because you're able to inspect DOM nodes and see what styles have been applied to them. Atom allows you to define your own styles in a LESS stylesheet called styles.less, giving you really granular control over the look of specific types of elements. Getting to the stylesheet is as simple as going to Atom > Open Your Stylesheet and making your changes in the appropriate section.

.editor {

  .meta.tag.sgml.doctype.html { font-size: 26px; }

}

In this case, I updated the .editor class by adding the classes that define how the DOCTYPE of a file will look inside the editor. I made the font size 26px to be purposely large. The following image shows how this update affected the rendering of my HTML code:

atom-less

As you can see, you can really dig deep into Atom and customize it to your heart's content since it's basically HTML and DOM under the hood.

Along with being able to install new themes, Atom also provides a built-in package manager that allows you to extend the functionality of the editor. This is analogous to Sublime Package Control, except it's already baked into the editor itself as opposed to being forced to install a separate script to get it.

atom-packages

Installing a package is as easy as clicking the Install button. The editor provides a list of "featured" packages along with a search functionality that pulls from the main package registry.

If you want to do this via the command-line, Atom provides a CLI for it called apm (Atom Package Manager) that allows you to install any package with the following command:

apm install <package name>

So installing the autocomplete package would look like this:

atom-apm-install

Currently, the number of packages available is small, but that's to be expected at this stage.

atom-packages-registry

You'll be able to find great packages though for things like:

And many more. I can't imagine it'll be long before GitHub recruits all of the Sublime package creators to port their work over. In fact, there's already documentation showing how you can convert your TextMate Bundle over to Atom. Since many TextMate Bundles are compatible with Sublime, it seems conceivable that some Sublime packages may be able to be converted over, but don't hold me to that since I haven't tested it out myself.

This is also a good opportunity for contributors to jump in and offer up new packages. While Atom has most of the basics, it's missing some important ones, like linters and syntax highlighters. That's a void that needs to be filled and I can imagine it happening in short order.

Key bindings are also customizable using the local ~/.atom/keymap.cson. You can open this file manually or by going to the Atom > Open Your Keymap menu option. Opening the file will show you some examples of how to edit the key bindings.

The one key binding you'll need to remember is Command-Shift-P, which pops up the command palette and displays all of the possible key bindings with associated functionality.

atom-command-palette

The Getting Started guide offers you some basic guidance on how to use Atom and is worth the read. But just know that the project site is a bit sparse on documentation right now, so some of the editor's capabilities you'll have to learn by trial and error.

Stacking Up Against Other Editors

Many of you are probably asking how it stacks up against your favorite editor. Since Sublime is my personal choice, I can say that Atom is a fairly decent beta product, but not something I'd switch to immediately. Sublime's built-in functionality plus extensive package ecosystem makes it a very mature editor to work with.

Having said that, Atom is backed by GitHub and that holds a ton of weight. There's major geek cred there and I'm pretty confident we're going to see a major run on new packages, especially considering the extensibility that Atom provides via Chromium and Node.

For now, GitHub is offering Atom free during the beta period, giving developers a chance to tinker with it and get their hands dirty. If they can keep pricing competitive and rapidly build up the package ecosystem, I think Atom will end up being my new editor of choice.

Advertisement