March 8, 2016

Ungit: The Easiest Way to Use Git

JK Kim
Photo of coding on a computer screen

Ungit: The Easiest Way to Use Git

I love Git and think it’s one of the best tools that developers use on an everyday basis. Git is a fundamental development tool that powers many companies, including the company I work for, GoGuardian. Git is a version control system that has powerful features and is elegantly distributed, yet beautifully fault tolerant at the same time. However, it’s not perfect.

For example, Git is notorious for having a sharp learning curve and complex commands.

Even XKCD has commented on how difficult (yet amazing) the product is.

"This is Git. It tracks collaborative work on projects through a beautiful distributed graph theory tree model. Cool. How do we use it? No idea. Just memorize these shell commands and type them to sync up. If you get errors, save your work elsewhere, delete the project, and download a fresh copy.

Git developers were too focused on developing bulletproof features that user friendliness was compromised. Frankly, most powerful tools often struggle with this.

Meet Ungit, the answer to Git's friendliness problems.

What is Ungit?

Ungit is an open-source, node-based, interactive Git interface with rich visualization. Let’s dig a little deeper: When starting up, Ungit spawns a local web-server that listens to a specific port, which serves pageviews to display an interactive webpage for a Git repository. Ungit is agnostic of OS, IDE, and web browser; it’s incredibly flexible. If you are using Git, you can use Ungit.

It’s as simple as that.

Using Git with Ungit

using git with ungit

Feast your eyes. So majestic.

What we see is the current representation of Ungit's Git repository, according to Ungit (insert clever inception joke here).

At the top, there is a directory text box which shows the path of the Git repository currently selected. In the middle, we have nodes representing each commit, along with lines indicating each commit's Git lineage, as well as branch information, commit message, etc.

Oh, and did I mention that it’s interactive?


git commit gif

There is a lot happening here—but what we see are two modified files that are unstaged in Git.  We can see both "testfile.txt" that was edited, and the newly created "do_not_commit_me". We can review diffs by clicking on the names to see either the default linear view or a side-by-side comparison. After reviewing what was changed, we can unselect items that we don’t want to be committed. Changes are only committed after requesting so, by pressing the corresponding button. As always, the Git node refreshed itself to represent an accurate state of the current repository, by inserting the new node at the top which represents our newest commit. (For those of us that are picky about how synchronization works: Ungit refreshes on inactivity to active-state-transition based on focus and mouse events with throttling.)  

We don't have to constantly juggle between add, commit, push, or checkout. We can assess the entire repository state and where we are at, in one simple view, as well as interact with it real time.

But, what about branch operations?

Branch Checkout

git branch checkout

Ungit makes branch operations easier than ever. Above, we can see the switch from "abc" branch to "master" to "house_lion" and back to "abc" branch in just a few clicks. Once each checkout operation is done, commit nodes rearrange themselves to highlight the Git lineage of the currently checked out branch (branch tag "es6" is highlighted to indicate what is currently checked out). Not only can we check out branches, but we can push to remote, create, delete, and move—pretty much all we’ve ever dreamed of doing with a simple drag-and-drop and/or click.

This is great and all...but Git tools are kind of worthless without merge conflict resolution tools, right?

Merge/Rebase With Conflicts

git merge with conflicts

Merges and rebases happen often in a healthy, collaborative Git repo and, of course, conflict is bound to happen. Ungit allows you to see what you are doing and resolve these conflicts easily. Simply mark a conflict as resolved when you are done fixing it.

And More...

There are many other features that are not shown here: uncommit, cherrypick, remote repository management, submodule management, commit at line level, etc. Even with all these features, we are still adding more!

Have I mentioned that Ungit supports image diff for designers and front end engineers?

git for designers


Ungit is not perfect, but it removes many of the challenges of using Git. Obviously, it cannot do everything Git can, but I believe Ungit has satisfied a large majority of common-use cases. The UI is not yet ideal, including how it patches line-by-line commits. Without a doubt, Ungit has more room to grow.

But there is hope.

Ungit is a community-driven, open-source project with an MIT license that welcomes any and all contributions. The best part is: you don't have to be an expert in Javascript or Git to start contributing! In fact, when I started contributing to Ungit, I didn't know anything about Git or Javascript. I just wanted to learn both technologies.

Hopefully you can help us "Git" to a better world...  :D

Follow us on Twitter: @ungitui!

P.S. Special shoutouts to @FredrikNoren who started all this.