

Combining browser and desktop technology — Teamwork Document Editor
source link: https://medium.com/teamwork-engineering/combining-browser-and-desktop-technology-teamwork-document-editor-c8bb150ab8a2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Combining browser and desktop technology — Teamwork Document Editor
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!
Recommend
-
12
Blog Post PSPDFKit for Web 2021.4 Adds Undo and Redo and Document Editor Customization Today we’re thrilled to introduce PSPDFKit for Web 2021.4! In this release, we’re adding undo and redo capabiliti...
-
25
Deploying the TX Text Control Document Editor to LinuxWhen integrating the TX Text Control ASP.NET document editor into an ASP.NET Core Web Application, the editor requires two parts: NuGet package The ASP.NET...
-
9
JavaScript Object Availability and Order of Events The document editor can be programmatically accessed using the JavaScript object TXTextControl. When using ASP.NET MVC or Web Forms, this object exists directly after load...
-
13
ReSkriptPowerful collaborative workspace and document editor
-
14
Prerequisites There are two ways to evaluate the TX Text Control Document Editor. You can either host your own backend by downloading the trial version of TX Text Control .NET Server for ASP.NET or...
-
6
Deploying an ASP.NET Core Web Application using the Document Editor with Docker A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an applicati...
-
5
Prerequisites There are two ways to evaluate the TX Text Control Document Editor. You can either host your own backend by downloading the trial version of TX Text Control .NET Server for ASP.NET, o...
-
9
Slack’s new Canvas feature puts a document editor in your chat windowSlack’s new Canvas feature puts a document editor in your chat window / It’s not quite Google Docs, but it’s much more than a messenger
-
5
Sidekick launches Teams, the first "browser-based OS" for teamwork...
-
7
Arc Search combines browser, search engine, and AI into something new and different / ‘Browse for me’ is the new search engine, at least if The Browser Company is right about the future of the internet.
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK