Design and build a collaborative user experience for a chance to win cool prizes!
Blog

Meet Collaboration Engine: The simplest way to build collaborative web apps

By  
Kavish Weerawardane
Kavish Weerawardane
·
On Oct 8, 2020 6:56:35 PM
·
In Product

Frame 20-1

(Part 2 of 4)

Today, we launch the first iteration of Collaboration Engine: The world’s simplest solution for building powerful, real-time collaboration features into web applications. 

Read on to learn more about the problems we set out to solve, how Collaboration Engine works, and how you can start using it.

The problems we aim to solve with Collaboration Engine

Businesses are becoming increasingly distributed (or fully remote), as they seek the best talent, customers and partners from across the globe. COVID-19 only accelerated this trend.

Most companies currently rely on a combination of 3rd-party tools, temporary workarounds and internal business applications to enable real-time collaboration within their newly-digitized distributed workflows. 

Think: Slack, Google Docs, ClickUp and Trello. 

Individually, these are all excellent tools. Combined, they can result in complicated, inefficient and rigid workflows, despite their excellent integration capabilities. 

For example, think about the last time you had to move a file across multiple platforms, communicate back and forth with a colleague in another app to finalize a form, and log in to a separate project management software to update a task. 

Wouldn’t it be great to have a single, well-designed custom business application that allows you to do all of this securely, and in one place?

Collaboration Engine was built to do precisely that: It simplifies distributed workflows and consolidates IT infrastructure into secure, cost-effective and UX-first business web applications.

For more information about building collaboration experiences in business environments, we recommend part 1 of this blog post series available here. This is part 2 of a series of blog posts on enabling collaboration experiences in business web applications. See part 1 here.

What do you get with Collaboration Engine?

  • Collaboration Engine that provides the server-side logic necessary to synchronize data and user state across multiple client instances of a web application.
  • Intuitive high-level APIs that allow developers to access various predefined Collaboration Engine functionalities, based on specific use cases. Currently, we provide:
    • CollaborationAvatarGroup: A special collaborative extension of the regular AvatarGroup component. It automatically makes use of Collaboration Engine to populate an avatar group with all the people in the same view. 
    • CollaborationBinder: A collaborative extension of Vaadin’s regular form binder. It adds field value synchronization and field highlighting functionalities, that synchronize values between users, and indicate the presence of other active users in the same field.
  • A low-level Topic API that offers more fine-grained control over Collaboration Engine’s features, and allows the construction of functionalities, such as “audit trails”, that have yet to be implemented in the high-level APIs.

What can developers build now with Collaboration Engine?

Collaboration Engine will ultimately allow developers to easily build complete collaborative workflows that incorporate:

  • Real-time co-editing that allows multiple end users to edit the same form.
  • Live discussion features, such as audit trails and real-time commenting, that allow end users to actively communicate and keep track of changes in real time.
  • Live-notification features that allow end users to subscribe to selective push (or email) notifications about changes of interest.

However, the initial version of Collaboration Engine will focus solely on powering real-time co-editing features. This means that developers can:

  • Make users aware of the presence of other active participants in the same view.
  • Share and synchronize form field data in real time between all users in the same view.
  • Encourage conflict avoidance when editing by showing who is editing which field.

Despite the absence of high-level APIs, certain other functionalities, such as audit trails or revision history, can be manually enabled, using the low level Topic API, in this initial version of Collaboration Engine.

How Collaboration Engine works

Collaboration between users is managed by collecting data in “topic” instances that are then shared between all users interacting with the same part of the application. Each topic instance stores data in named maps, and essentially serves as a “stream”, in which users can collaborate. 

This is how you could use the low-level Topic API to update a topic that contains a map named “fieldValues” with the values from a checkbox called isFriday,

topic -> {
    // ...
    Registration registration = checkbox
        .addValueChangeListener(valueChangeEvent -> {
            fieldValues.put("isFriday", valueChangeEvent.getValue());
        });

 

This would result in a topic with a structure that looks like this:

Topic maps
|_ fieldValues
  |_ isFriday: true/false

 

After creating a topic instance, developers need to connect and subscribe users to it. This is accomplished through a shared CollaborationEngine instance that opens up and assigns each user a separate connection to a specific topic. This connection is called TopicConnection, and is used to update the collaboration state and to subscribe to state changes initiated by other users.

How Collaboration Engine is distributed and hosted?

We will release Collaboration Engine in two phases. The first phase is a closed beta, which launches today. It runs in-memory in the application server itself and works for applications hosted on single servers that do not utilize a clustered deployment.

During the second phase, Collaboration Engine will be available as a Docker image that can be hosted on any supported private or cloud server. This distribution will also support applications hosted in clustered environments. Phase 2 is scheduled for release in Q2 2021.

Phase 1’s primary “in-memory” mode will continue to exist as a “development” mode.

How much does Collaboration Engine cost?

Collaboration Engine has a run-time pricing model that is simple and scalable: $1 / end user / month. In other words, you pay based on the number of users per month.

The Collaboration Engine feature is available to all Plus, Pro, Prime or Enterprise subscribers. In addition, each subscription tier gets a generous number of free monthly users. For more information, visit the pricing section of the official landing page.

How can I try Collaboration Engine?

Collaboration Engine is supported by the latest Vaadin LTS version (14.6), as well as the latest non-LTS release, Vaadin 19.

Try out a collaborative web application demo built with Collaboration Engine.

Get started with Collaboration Engine for free. All Vaadin subscribers get a free quota of users.

The Collaboration Engine launch webinar by Marcus Hellberg and Jens Jansson provides an excellent overview of the capabilities of Collaboration Engine. Watch it here.

 

Kavish Weerawardane
Kavish Weerawardane
Kavish leads our product marketing team in bringing exceptional developer and enterprise focused products to market. He is particularly passionate about design systems, UX & real-time collaboration technologies.
Other posts by Kavish Weerawardane