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-\

Nicholas Cerminara

Only you can prevent forest fires.

View My Articles

Stay Connected With Us
hover these for magic

Follow

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

  • http://www.stepquick.net/ Stephen Quick

    That looks really promising. I’d really like to more about the git piece.

  • binaryphile

    Can it be run in a terminal, or is it gui-only?

    • haruspex

      It’s gui-only. The terminal command simply launches the gui via a particular directory or file.

  • gosukiwi

    As long as it’s free / open source, it sounds awesome, I’ll love to test the Vim mode, and if I feel it’s good enough I might consider the switch

    • Steven Sanders

      It is neither free nor open source.

      • gosukiwi

        Aw, as I saw some github repos I thought it might be open source, sad day.

        • haromaster

          Sad indeed, everything should be free at all times.

          • Maks

            Not free as in beer, free as in freedom, there’s a big difference, so yes sad indeed.

          • haruspex

            “free as in freedom” heh heh
            The typical turn of phrase is “free as in free beer” vs “free as in free speech” or gratis vs libre

  • guest

    none of the videos work (tried firefox, safari, chrome, opera)

    • Casey Webb

      Hover your mouse over them

    • ncerminara

      Hey guys. If the videos aren’t working try refreshing. I already know they aren’t compatible with most mobile devices. We’re working on a fix. Sorry about that in the meantime.

      • http://www.eclecticradio.nl Jasper

        They work, but playing them is counter inuitive. Hover makes ‘em play, click makes ‘em stop. That’s odd.

        • ncerminara

          Weird. What browser are you using? Video implementation on this blog is still experimental so bear with us. Clicking shouldn’t pause them. Here’s my current script for the hover, not much to it and no click:


          $('video').hover(function(){
          $(this).get(0).play();
          }, function(){
          $(this).get(0).pause();
          });

          • http://www.eclecticradio.nl Jasper

            The click was a lie! :) No sorry, I had that wrong. It plays on mouse over and stops on mouse out, just like your function states indeed. Stil prefer a click though, but that might’ve been 15 years of clicking on players to get them started ;)

          • ncerminara

            Ha! Lies! Yeah I know. I originally had them auto-playing. l liked how seamless that was, but it just required too much resources client-side. I didn’t want people’s fans blowing up from just visiting this page – and that’s how the hover implementation was born. I’m still looking for a creative and unique html5 video implementation so please let me know if you ever come across any.

          • http://www.eclecticradio.nl Jasper

            I really love how svbtle has done their “kudos button”, with a mouseover that countsdown and kinda orders you not to move. You then know something is happening and will probably give a result.

            Translated to this website, this could be implemented the same with the video playing after a full second or something? This could be a simple tap on handheld, or even a tap and hold, but that might give more problems than solutions.

            all in all, I still think a tap/click to play would be best, or if you prefer a mouseover a very transparent overlay with a notification like “hover to play” would be better? It’s just not very clear and especially when you display video’s like these, it took me a few seconds to find out that the video was indeed playing because most of the parts of the video don’t move.

          • ncerminara

            Hey Jasper. I decided to keep the hover effect as is. I also just added full screen support for when people click. Eventually, I’m going to make an extremely light weight jQuery plugin that will resolve the UI stuff you mentioned. So stay tuned. Just need to find the time

          • http://www.eclecticradio.nl Jasper

            okay :)

  • Maks

    Nicholas, you mention Brackets at the start, but have you used it, pretty much every feature you highlight in atom is already there in Brackets, plus its open source and developed in the open !! but adobe, is mature, has a big community and plenty of add-ons and is run like a proper, open source project instead, so what is the point of atom except as a cynical money-making exercise by Github corp?

    • haromaster

      Wow accusing Github of a ‘cynical money-making exercise’, haven’t they earned that right with what they give the community for free?, not to mention the irony of your comment in the light of Adobe’s history.

      • Maks

        I dont begrudge them earning money, but I’m judging them by their actions. They have a high bar set because of their status in the community and they are not meeting it. Have a look at how Adobe is running the Brackets project and you tell me which is the better…
        On the topic of what Github have given to the community? Well given they built their whole business on top of the open source stack built by the OS’s community and the good will of the OS’s community, I hardly think they have earned a free pass on anything. Irony, yes a company built on the efforts of the oss community releasing a closed SRC product whereas Adobe is running a completely open project, sure I see irony in *that*

        • haruspex

          They’re still in beta…

  • Conor Griffin

    Getting an HTTP 403 for the .mp4 videos so they don’t show up in Safari. The .webm ones work for Firefox though.

    • ncerminara

      Thanks. I’ve updated the code. Hope this helps for everyone.

      • Conor Griffin

        Yup, that fixed it. :o)

  • Hoonkodoonka

    It’s amazingly flexible. A real shame it’s so slow and jittery to use (at least on my mac pro 15)

  • http://www.deepbass.com/portfolio Brad Shaw

    Shame that it’s OS X only with no Windows or Linux version. Says those versions “are on the roadmap”, but that could mean just about anything.

    • Tihomir Valkanov

      They said on hackernews that they are working right now on linux and windows builds

    • Abid

      You can build it from source on Linux. The README in the git repo provides instructions.

      • SwagLord

        You can build it on Linux, Windows, or OS X…

  • Pingback: Weekly Design News (N.225)

  • Jon Carl

    Totally off topic here. Where did you get that background? It looks like the album cover to Return of the King by The Royal Royal. Where can I download it?

  • Pingback: 每周设计新闻040306 | 云下载官方技术博客-网站优化-网站推广

  • http://www.jashsayani.com/ Jash Sayani

    I can’t seem to find key bindings for switching between tabs. Since Atom is not native, I cannot use ctrl+tab to switch.

    • haruspex

      cmd+shift+[ and cmd+shift+], same as Chrome, Firefox, and Safari

    • soyuka

      Seems these shortcut are now part of Atom.io default shortcut (:

  • Damien Metcalf

    Does anyone have a spare atom invitation? I would love to try the editor out.

  • Christopher Sanders

    This didn’t work for me. Anyone know how to split the screen up into multiple screens?

    • haruspex

      You can split any editor pane horizontally or vertically by using cmd-k right or cmd-k down. Once you have a split pane, you can move focus between them with cmd-k cmd-right or cmd-k cmd-down.

  • phobos

    The thing that really worries me about Atom, and that I love about Sublime, is performance. How performant is a web-based node.js app going to be? Especially with many files open, or large files open, etc. Is it going to feel more like using Eclipse than a native desktop application?

    • haruspex

      It also currently can’t open files larger than 2mb.

  • soyuka

    Here’s how to set a better tab-switch shortcut :
    1) Open settings => Keybings => your keymap file
    2) add these :

    'body':
    'ctrl-shift-tab': 'pane:show-previous-item'
    'ctrl-tab': 'pane:show-next-item'

    Same as chrome, ff, sublime, etc.

    • haruspex

      It should also be mentioned that cmd+shift+[ and cmd+shift+] work out of the box and are the same hotkeys used in Chrome and Firefox.

      • soyuka

        Just tried and I’ve not these key bindings on Chrome.

        • haruspex

          These are standard keybindings from Chrome. There is no standard reason for you not to have access to them.

          • soyuka

            Oh my mistake you’re right but I’ve to press : ⌘+⌥+shift+) vs ctrl+tab… I just get used to it and wanted to share the setting that’s all :).

  • Cansian

    Atom is great. I have invite for atom. Ask

  • http://erikwoods.com Erik Woods

    It’s worth noting that tab switching can also be done with Cmd+Shift+[ for previous or Cmd+Shift+] for next.

  • Tihomir Valkanov

    I just wanted to note that it is based on Chromium and NodeJS not only NodeJS : ) I think that is important. It definitely will get faster :)

  • Pingback: The Complete Visual Guide to Sublime Text 3: Plugins Part 2 ♥ Scotch

  • Pingback: Articles for 2014-mar-31 | Readings for a day

  • Eric

    @ncerminara:disqus I actually loved the video interaction. Works really well for videos this short. What did you use to record with?

    • ncerminara

      Used Quicktime to record and Miro Video converter for HTML5 video formats. I don’t officially recommend the converter though since we’re having problems with the videos on mobile (but that could be a number of things).

  • Pingback: Notepad++ Users: Best way to manage project files? - Page 2

  • App sp

    thanks for the post.This is a really a good post.this post also good for help http://tipsyards.blogspot.com/2014/05/how-to-update-codes-using-browser.html
    like us on facebook http://facebook.com/tipshacks

  • Guest

    its the ultimate tradeoff, performance vs scalability…native vs web. sure, webkit apps are trendy live debugging is awesome but it feels like they showed up a bit too early to the game. You really need to be able to hack around with javascript to achieve the same response speed effect via animations etc until the hardware has time to catch up. Obviously JS is slower then native because it runs on native, but its much more fluid then anything native. I love seeing people pushing forward with the web app thing because cross platform unity is the future, its only a matter of time.