atom
Bar Talk

Hands-on with GitHub’s New Text Editor Atom

This morning I received an invite to GitHub’s new text editor, Atom. Besides opening and closing it, I really didn’t have much time to play with it because I was busy with work projects. As I go through and experiment with it tonight, I thought I write this post side-by-side and highlight some of the things about it I find interesting and cool.

Another day, another text editor

I’m sure some (a ton of) people are thinking this. I’m definitely thinking it. It seems with the wild success of Sublime Text 2/3, there’s some sort of race to achieve the perfect editor. I really can’t complain about it though. I’m really looking forward to what the future holds as development becomes more and more advance. There’s a ton of text editors already out there, but check out some of these newer ones that I’ve just learned about in the last year or so:

There’s so many different little things that these code editors are doing to improve a developer’s coding experience. I generally think it’s these little things that make a good editor. It’s also probably largely why Sublime is so successful and favorable by many. Sublime Text is the current king of the little things. Sublime Text comes with an API for creating packages which allow developers from all over the world to hook into the editor and share their custom plugin. These “little things” or plugins/packages are what makes Sublime Text a great editor. I get to customize and tailor it to my needs.

The problem is that the Sublime Text 3 API and packages are custom, not well documented and tested, and Python based (I can’t vouch for the validity of that claim having never having written Python or a Sublime Text plugin, only stating what I’ve read/heard). Here’s a good summary I found on Hacker News by user Kansface of his opinion:

In practice, the ST3 API is extremely limiting and poorly implemented. The docs are both lacking and dated (read incorrect). It is trivial to crash ST3 by making the incorrect sequence of correct API calls. It is also common to resort to polling the editor to make up for other deficiencies. The API also only allows for extremely limited UI choices forcing highly unintuitive interfaces on end users. The ST3 runtime also features such gems as not shipping the ssl module on linux (while ST2 stripped out even more stuff).

I also expect NPM to be much better in practice than the sublime package manager which frequently ships broken code. JS is a better choice than python for async code which will make writing plugins easier.

Furthermore, ST is 3 people who largely ignore all feedback from the community regarding bugs and features. It won’t be hard to out compete ST in the long run.

Atom on the other hand is a web-based desktop application built on top of Node.js. This allows developers of the “little things” to use Node/NPM and browser APIs all in one fluid motion. So in short, being web and node based, it’s likely going to be easier for developers to write plugins for Atom and extend its core than for other editors. This of course means more of the little things for you and me.

Command Palette

First thing you’ll notice when you power this bad-boy up is how closely it resembles Sublime. I’m sure as it develops and grows it will head down it’s own path, but it’s really, really similar in most regards. You can definitely tell where its inspiration came from. For example, all commands are available via Atom’s Command Palette. The Command Palette allows you to access key commands of the editor or any plugin. Sound familiar? The keyboard shortcut for this is even the same as Sublime’s. Nevertheless, check out the cool video below:

File Switching

Again, just like Sublime Text’s amazing quick file switch and search, Atom has implemented almost identical functionality. Atom’s keyboard shortcut for this is cmd-t, but Sublime’s keyboard shortcut also works for it: cmd-p. You also can instead just do cmd-b to search only open files. Check the video below to see it in action:

Atom CLI Tool

You can open any file or folder with Atom by just typing the following command in your terminal:

        
        $ atom 'filename'
        
        

Current Git Integration

Git integration is pretty neat. I can’t seem to find out how to commit from within the editor, but I’m sure that is coming. In a very visually appealing way, it keeps tracks of files added and modified with color markings. It also tells you what branch you’re on and how many commits you have done in the bottom on the status bar. Lastly, you’re able to navigate to previous and next diffs quickly. Watch the video below:

Update: I just read that the shortcut cmd-shift-b searches only untracked files. Pretty neat as well.

Multi-Select with Atom

You can use your mouse cursor to select multiple edit points. Video below:

Markdown Live Preview

This lets you edit your markdown files and see the result live. Quick demo below:

Themes and Syntax Highlighting

This is awesome. Being web-based, you’re given a lot of control without having to do very much. You can easily browse themes, swap out colors, and even modify colors with pure CSS (or LESS that compiles down to CSS). Watch the video below:

Packages

I’m very impressed with how easy it is to install packages. I’m also impressed with how nice everything is presented in the editor. I wouldn’t be surprised if a marketplace is spawned out of this similar to the Google Chrome App Store. It seems like the right idea for GitHub to facilitate that so developers can potentially earn some money for work. Check the video below of how nicely integrated it is with the editor.

Web versus Native

Update Atom has since moved to React by default. Performance is said to be considerably better. I haven’t had the opportunity to test.

I noticed that some of my clicks weren’t registering and that the speed of certain things were lagging. Ultimately, I found the overall responsiveness to be a little slow – similar to tapping when you’re in the browser on your mobile phone. I made a video to compare Atom’s responsiveness with Sublime’s. The video is comparing a Beta version of Atom to Sublime Text 3, so it’s probably irrelevant (or possibly relevant).

Settings

As I wrap-up my exploration of this new editor, I’d like to share one last quick video of what the settings look like. They’re very clean and easy to use. Toggling settings is a breeze. It’s pretty obvious that a lot of thought went into the UX and UI. I like that the CSS is Bootstrap based because who doesn’t love Bootstrap? Lastly, at the very end of the video below, you’ll see the insides of what a “Package” looks like. Hopefully it gives you a general idea of how awesome plugin development is for the editor.

Conclusion

Everything I tested and demoed is in Beta, and I have to admit, it’s a very impressive Beta. Congratulations to all the developers involved on this project. The concept of being web-based with tons of packages is extremely appealing; however, hopefully the performance of the editor will increase in time. Using things that feel laggy, especially in a code editor, will never feel right or complete to me.

Some other things about it:

  • Learn how-to create a package
  • Learn how-to create your own theme
  • It’s extremely similar to Sublime – all the way down to keyboard shortcuts.
  • When uninstalling and reinstalling applications, the editor sometimes required a reboot to register the events.
  • You can navigate to symbols using cmd-r and cmd-shift-r.
  • I couldn’t find a way to switch tabs with my keyboard. [UPDATED BELOW]
  • I couldn’t get splitting of Windows Panes to work (side-by-side files). [UPDATED BELOW]

Overall, this is an amazing application. With GitHub backing it, I could definitely see it taking off in the future. I also see the possibility of an Atom Marketplace in our near future. Either way, this is easily one of my new favorite text editors in the making.

Post Updates

Tab Switching

cmd-option-arrow


Splitting Window Pane / Side-By-Side Files

ctrl-shift-\

Stay Connected With Us
hover these for magic

Get valuable tips, articles, and resources straight to your inbox. Every Tuesday.

Read MOAAAAR (more articles)