Combining browser and desktop technology – Teamwork Document Editor

Posted

Our recent addition for Enterprise and Small Business customers is our Document Editor. We´d like to tell you a few of the things we had to overcome while developing our newest tool.

What´s this all about?

One of the most popular features in Teamwork Projects is the Files feature in each project. People can upload any file they want to a project and link it to tasks, comments or messages. However, editing those files wasn’t that easy. People needed to download the file, make the changes and re-upload the file manually.

We wanted to have an easier way for people to update files and we didn’t want to limit it to any special application, so we created our Teamwork Projects Document Editor.

With Teamwork Projects Document Editor people can just click on “edit” next to editable files, the file gets downloaded in the background and opened in the editor the user has set as default for the respective file type. E.g. “.docx” files will be opened in Microsoft Word, “.psd” in Photoshop, etc. Currently the only files people can´t edit are executable files, videos and zip archives.

But how did we do that? How can we tell a desktop application to download a file and start it? The answer is pretty simple:

custom domain protocol

Once the user installs the Teamwork Projects Document Editor for either Windows or Mac, the installer registers a new protocol in the browser simply called “Teamwork”. One of the main functionalities of a browser is to navigate to different URLs. The browser knows what to do when a user clicks on any http or https link. This behaviour can be extended and customized as you can add your own url protocols and decide what they should do. So next to everything that’s already there, like https://, http://, ftp://, mail:// etc,. there´s also teamwork:// now. This allows us to add links or redirect to a new type of hyperlink.

For example: “teamwork://”

During registration of the new “browser-protocol” we tell the system what to do when a browser tries to navigate to this type of URL. This is the so called “Default” command.

In our case, we told the system to redirect the call to our Document Editor every time a user tries to navigate to one of these URLs. During launch, the whole URL gets passed as a startup argument to the application allowing us to pass data to the application.

This technology is used by many popular applications these days. Github, for example, is one popular candidate using custom protocols to interact with its desktop client. Also the Steam client heavily relies on custom protocols to start games and chat with friends.

Unfortunately, there’s one downside with using custom protocols. You cannot build something like that with node.js or any other multi-platform technology. Most of them are not capable of the native functionality needed.

Native applications needed

To make things work, we needed to build a native Mac and a native Windows version of our Teamwork Projects Document Editor. Custom protocol handlers need to be registered – something that can’t be done with multi-platform tools (at least not on a Windows machine). Also, we wanted to support at least Windows 7. Users might only need to install the .Net Framework for Windows. It wasn’t a hard choice to use native technologies as integrations into the user’s file system can be done a lot faster and easier with native tools.

Detecting file changes

When we started working on the Teamwork Projects Document Editor – we still thought it’d be an easy task to achieve – we quickly realised it wasn´t. It is by far not enough to see whether a file had been changed or not. Different applications have different ways of saving a file.

If we take MS Office as an example the file isn’t just saved as we expected but it’s renamed, deleted and re-created. MS Office never has the original file loaded but a temporary copy of the file while the original file is write protected. Thus, watching just for file changes isn´t enough. We also need to look for rename & delete events. Lucky enough, the filename stays the same so events can be filtered on a specific filename to detect changes on that file.

Now that we´re able to detect changes in a file we need to make sure that the file really got changed and not only re-saved. Just looking for last modified dates is not enough to perform this.

While downloading the file, we create a hash of the file contents and size. When a potential change is detected a new hash is created and compared with the old one. If the hash differs…well we have a changed file we can upload.

A hash function is any function that can be used to map data of arbitrary size to data of fixed size.

Publishing Teamwork Document Editor

As we planned to publish the MAC version on Apple´s App Store, we wanted to have a similar, slim, easy to use installation process for our users running Microsoft Windows. Users should not be required to click through any old fashioned setup. At the end there was only one suitable solution for that left. Click Once.

Click Once is a setup and deployment mechanism developed by Microsoft. Used by Chrome Installer, GitHub and other famous companies, it’s a very easy and user-friendly way to get software installed. It has a few downsides, like incompatibilities with various Anti-Virus tools, but nothing that couldn’t be solved.

Last but not least, we´re hiring!

By the way, did you know that Teamwork.com is an awesome place to work? There’s always time to improve something that annoys you, or to just learn that new open source language we might use in future.

We have big plans for the next few years, always improving our three applications with a lot of interesting challenges to face.

Want to join us? Come and drop us a line!