JSBlend

JSBlend is a cross-platform, web-based file comparison and merge tool written mostly in Javascript. The tool can display differences in two files and allow the user to selectively merge them by editing one of the files. The tool relies on a Python or PHP backend to load the initial differences between the two files and to save them after merging. The backend relies mostly on the GNU DiffUtils toolset which is available on Linux and Windows as open-source software. Specifically, the tool uses diff command to load the differences in a side-by-side format (-y option) initially. After this point, all the user edits are managed within the Javascript and no calls to the backend server is made except for saving the files. While JSBlend is a general purpose diff/merge tool, it is especially suitable for managing conflicts in configuration files on servers after an update. Many server machines do not have any GUI framework installed and are often run in headless mode on remote sites. Using desktop-based GUI tools for merging the conflicts is not always possible. JSBlend can be a very useful tool when either used standalone or embedded inside an existing administration console.

Details

Client-side

Javascript part of the tool relies on Scriptaculous and Prototype Javascript frameworks. It talks to the server backend using AJAX calls over HTTP or HTTPS. The tool allows the user to select two files for comparison. One of the files is designated as the left file and the other as right file. Both files can be edited independently of each other. JSBlend will allow you to move lines from one file to the other and add or delete lines. It is also possible to merge the files by treating either the left or the right file as the merge target. The two files can be present locally on the server or remotely transferred using either Secure Copy (scp), HTTP or HTTPS.

JSBlend highlights the lines that are different, added and deleted in the two files with different intuitive colors. In addition, it also displays the intraline differences down to a character-level by using jsdifflib tool. It uses the SequenceMatcher class within jsdifflib which is a direct translation of SequenceMatcher class in Python difflib module. All of this ships with the tool and no special installation is necessary.

JSBlend implements an auto-folding feature so that identical lines in the two files are folded into groups to help you concentrate on only the differences. This feature is mostly inspired by the folding feature of vimdiff.

JSBlend has a readonly mode that can only show the differences between the left and right files. The user will not be able edit or save the files in this mode.

JSBlend works with Firefox 2 or newer and Internet Explorer 7. Note that Firefox 2+ is the preferred browser for JSBlend.

Server-side

Server-side part of JSBlend is currently implemented in Python. The Python implementation includes a basic Web-server for quick and easy installation. The server side scripts are small in size and can be easily translated to any other language or runtime the user finds suitable.

The server side can run on either Linux or Windows.

Following functionality is supported on the server side.

  1. Specify local (on server) or remote file paths for diff. For remote files, Secury Copy (scp), HTTP, and HTTPS protocols are allowed. When getting files over scp, password will be prompted for each connection.
  2. Edit one or both files in browser and save them. The remote files are saved transparently to the remote system.
  3. Optionally merge the differences between the two files to either left or right file (and delete the other file). This will leave only one file on the system.

Screenshot

JSBlend in Action

View differences between two versions of Tomcat configuration file: server.xml. Both files have been retrieved from a remote machine called "wye" using the Secure Copy (scp) protocol. JSBlend will prompt you for password(s) when it tries to access a remote file. In this particular screenshot, the tool is running on Ubuntu Linux with Firefox 2.0.0.6.

Screenshot: View Screenshot here