Vaadin 24.4 integrates with React, unifies Flow and Hilla development, and more!
Blog

Building a real-time collaborative page editor with Vaadin

By  
Lilli Salo
Lilli Salo
·
On Mar 28, 2023 3:21:07 PM
·

In January 2023, we hosted a Collaboration Kit challenge for the Vaadin community. The goal was to use the Collaboration Kit to design or build a web application with real-time user collaboration. In this blog post series, we take a closer look at the winning applications!

Meet Roman Kovarík! He is the winner of the Development category in the Vaadin Collaboration Kit challenge. Roman is a software developer at Magnolia, a software company that provides a composable digital experience platform (DXP) and a content management system (CMS). Magnolia enables enterprises to create and manage personalized digital experiences in one unified platform and deliver them across multiple channels and devices. 

Check out all of the Collaboration Kit challenge winners.

Talk us through the collaborative app you built for the challenge.

Magnolia allows multiple content authors to edit the same page simultaneously. We use Soft Locking to help coordinate their activities. Soft Locking displays notifications when multiple authors edit the same page. 

For the challenge, I was thinking about using Vaadin Collaboration Kit to enable collaboration between Magnolia content authors on a form field level and add live chat. So, I integrated Magnolia’s visual editor into Vaadin Collaboration Kit as a hobby project. See the project on GitHub!

See the page editor in action.

How was your experience using the Vaadin Collaboration Kit?

Vaadin Collaboration Kit was easy to use and super quick to start. You can even generate a starting point for your application from start.vaadin.com. It has the building blocks like avatar groups, message lists, or form binders.

I struggled a little with CollaborationBinder because it has a dependency on a Java bean. In Magnolia, developers can change forms at runtime by modifying YAML definition files without restarting the application. So you never know how many and which fields the Java bean should have. But I understand that Magnolia is not a typical Vaadin application; it’s rather a framework on its own.

If you could do the challenge again, what would you change or improve in your application?

My application uses basic Magnolia features like editing web pages visually. The Magnolia DXP has many more capabilities and rich APIs, including personalization, digital asset management, and integrations with 3rd-party systems. So the possibilities for extending the Vaadin application are pretty much limitless. :-)

Do you plan on implementing other Collaboration Kit use cases or features?

Page editing is just a small part of a possible feature set. Future projects could use typical Vaadin grids and tree grids to edit different types of content. The interesting parts in terms of collaboration are the integration of Magnolia’s publication workflow and the Campaign Publisher module.

How do you see the future of collaborative apps evolving? 

Collaborative apps became popular during the pandemic. The trend of the integration of multiple collaborative apps into a single platform will likely continue. It’s actually been a Magnolia philosophy for years. We can expect more use of machine learning in collaborative apps (text field classification or rewrite, ranking, image recognition). It could help automate tasks, such as scheduling or organizing assets. The use of virtual and augmented reality may also shape the future of collaborative apps.

Congratulations, Roman, for winning the Development category in the Collaboration Kit Challenge!


Are you looking to enable real-time collaboration into your business app?

Learn more about Collaboration Kit -->

Lilli Salo
Lilli Salo
Lilli joined Vaadin in 2021 after delivering content for various international SaaS startups. She enjoys the creative challenge of transforming complicated topics into clear and concise written material that provide value to the reader.
Other posts by Lilli Salo