Way to Combine GUI and CLI

Graphical command-line interface we are using in programming

6 min readSep 7, 2013


Yes, Command-line interface(CLI) is very powerfull in dealing with tasks we face in programming word. GUI just looks cool, it slows down developers and maintainers send commands to the computer. And yes, CLI are always tricky in order to be typd faster. Well, GUI is not that bad.

Google is kind like a CLI tool on a web page. It has to be convenient enough for billions of users to search every day. So Google designed features like autocomplete and Instant Search to make it faster.

Google Search

With autocomplete, users don’t have to type character by character, but by selecting, which saves a lot of time. CLI tools use that trick too. Tab is used in showing autocompletion in nearly every Shell. Modern Shells like Fish even learns to display instantly each time one types a character.

Fish Shell

But, well, like Gracoli said(the CLI),

Despite its simplicity, it has some limitations in terms of user experience. For example, sometimes it is hard to understand and interpret the textual output of the command.

Gracoli trid its own was of exploring add graphical interface to CLI tools, the Terminal. I believe(I searched and found some instances before but I losted the links.) there were a bunch of explorations on this. And as a better implementation than Gracoli, Termkit just surperised all of us by its colorful UI on a Terminal:

Termkit based on Webkit

It’s based on Webkit, which reminds usof a Browser. The command is like URL, and the page is the return value. As the value returned is displayed as a page, or something well designed, it could be much more intuitive then what we usually see in a text-based Terminal. Here’s Chrome’s Omnibox, it implements autocomplete too:

Chrome Omnibox

Well, there’s also another attempt called Ubiquity, a Firefox addon, which enables users to open a command box and typing words in it. And, Ubiquity just returns things back, like Weather, Wiki, sending Email, posting Tweets… you name it.

Firefox Ubiquity

This is very like opening a console like a CoffeeScript developer and, write code to achive anything a browser can do by calling functions. Yeah, it’s powerful. Well, I think writing code is quite different from commands. By writing code we have to stop and debug to make sure it works, while writing commands people just want something to be finished as quickly as possible. That’s why Bash is still here, JS is still living is editors and consoles:

Chrome JavaScript Consle

Firefox has commands too, called Developer Toolbar with a long post on Mozilla Hacks introducing how to use it. With this command-line developers may activate many features of the devTools, which brings a lot of convenience. And, it’s called Graphical Command Line Interface (GCLI).

Firefox Toolbars, the GCLI

We use GCLI on other tools in programming too, like opening files. Some IDEs or Vim even use this right after the caret while one is typing. Here are just examples showing how to open files in editors in a simpler way.

Chrome DevTools, quick open files

And Brackets, although it has enabled autocomplete of filenames right in the text since version 30.

Brackets, quick open files

For Sublime Text, the command palette not only make opening files much more faster, but also add commands here. Plugins could add commands here too, which leads to the big amount of commands appearing in this small box. There are commands on managing packages, running automations, changing layouts, accessing the buffer and do syntax stuffs, etc. I think this is really a good example of how GCLI makes things quick, meanwhile dead simle to learn and quick to use. Becides, instant preview of GotoAnything accelerated file navgating a lot.

Command Palette of Sublime Text

Later, Light Table also add support for file navigating and commands in a box. It might be even better than Sublime Text’s, the menu floating at right wouldn’t cover the file content like Sublime does. You may have noticed that there are options like ”Window: Maxmize”, which means more possibilies are added here.

Light Table’s commans

The OS also have such menus, for example Spotlight on OS X, lauching apps made fast. Linux communies learned a lot from this, desktops like Unity and GNOME3 adds this feature. There are even apps like Alfred, Synapse doing that. App launching becomes more efficient that clicking on a start menu:

Spotlight in OS X

We have this too on Windows 8, and this is only about opening apps, which are like running command(without arguments) in a Terminal like people usually do on a Linux dekstop. Windows finds its own simplicity:

Windows 8, searching configs

Then let’s talk about menus, in OS X,we have the feature of seaching through menu options. It’s very helpful when we have tens of and event hundreds of options to select. Google also adds this to many of ts products like Docs and Analysis. I don’t quite use Windows, I suppose there are examples too.

OS X’s searching for menus

Actually I spent a lot time on Ubuntu and I know HUD long before I started using Mac. With 13.04 released, HUD becomes really useful, it’s much instant that OS X’s, and more commands could be searched here.With such feature, users don’t have to read long pages of README or guides to start playing with a software. That’s very appealling.

Ubuntu Head-Up Display Menu (HUD)

OK let’s think about the workflow we many have in the future:

  1. Langding OS and search to load apps of contents.
  2. Just select anything to activate a box to search among actions.
  3. Name windows and workspaces, then search to navigate.
  4. Bookmark any text or any position, search to find back.

At any given situations, available actions are listed with a box, the users just search, or goes though that list. This could be very fast, frequent used options are right on top of the list, maybe just 2 or 3 taps away. This is simple, commands are autocompleted, one doesn’t make mistakes like typing commands in a Terminal. And the UI could be nice, opacities, rounded borders, shadows, animations, a text-based thing only have fonts within the some typeface and size.

The Flat Design trends shows that icons are not the most important part of UI. While Flat Design lack of complexity for the sophisticated tasks software develop needs, I suppose GCLI might be the direction we head of in the next years. For programming, it’s the world of strctured text, we need such pattern to get all the power right on our tips.