News

The content has been bookmarked!

There was an error bookmarking this content! Please retry.

GitHub Adds Web-Based File Edit and Commit Feature

Posted by Werner Schuster on Aug 16, 2011

Sections: Operations & Infrastructure,; Development
Topics: Ruby ,; Java ,; Dynamic Languages ,; Git ,; .NET ,; Languages ,; Source Control ,; Programming ,; EGit ,; Architecture ,; orion ,; github ,; Eclipse ,; Web based IDEs ,; IDEs ,; git

New feature on GitHub: files in repositories can now be edited and committed right in the browser. Before committing, the differences can be previewd.

The feature appears as a button for logged-in GitHub users and comes in two versions: "Edit" and "Fork And Edit this file". Members of a project can edit and commit a file right away. If the user is not associated with the repository, the button becomes "Fork and Edit this file", which forks the project and and then opens the file in the editor.

The editing feature is implemented using the ACE editor, which brings many features like syntax highlighting, line wrapping, etc to the browser. ACE is the editor that powers the Cloud9 IDE among other projects, and replaced the Canvas-based editing component in Mozilla's Bespin/Skywriter project.

ACE was introduced in late 2010, and uses a different rendering approach than the old Bespin/Skywriter which drew its text component using Canvas or other editors like CodeMirror 1 that use the contentEditable attribute that makes DOM elements editable.
ACE draws itself by assembling the currently visible text as an HTML string and setting that as the contents of its DOM element and it does so for every change as well as every scrolling and cursor movement. Sounds inefficient, but as it turns out: these kinds of DOM updates are very fast on modern browsers.
A similar approach has been adopted by CodeMirror 2, the successor to CodeMirror 1. CodeMirror's creator Marijn Haverbeke wrote up a detailed explanation for dropping contentEditable. In addition, a problem that currently plagues contentEditable is that mobile browsers fail to show on-screen keyboards for editable elements, although some like the Eclipse Orion project have experimented with workarounds.

GitHub isn't the first code hoster to implement a feature like this; earlier this year Google Code gained a browser based editor for files in source repositories.

At the moment these editor features come in addition to other Git clients like GitHub's GitHub For Mac application or the JGit-based EGit for Eclipse. The lines between plain Git client and IDE start to blur when it comes to Web-based IDEs like the already mentiond Cloud9 which comes with tight Git integration which allows to point the IDE to a GitHub repository and start working right away. Eclipse's web-based IDE Orion also comes with Git support which is based on JGit/EGit (implemented in Orion's server component), and is steadily improving, as can be seen in the features added to the latest Orion 0.3 milestone.