Survey WYSIWYG Editor

Our client is an online survey platform provider with thousands of users, mostly from the EU countries. The platform enables distributing regular surveys, as well as Case Management, 360, and E-Assessment surveys. Each survey type is supported by a unique workflow, the last step of which is delivering a powerful online analysis tool that extracts the necessary data and presents it in a user-friendly way.

One of the most crucial part of the system is the survey creation module. End users spend a lot of time every day to create and configure surveys, whether they are complex or not.

The end users have a lot of various setting options. The big advantage of the system is the powerful WYSIWYG survey editor that displays all applied visual survey settings and indications of behaviour settings. The screen capture below shows a typical customer survey created with WYSIWYG:

After years of development, the editor became very complex and slow when it comes to large surveys. We tried to improve the performance but reached the limit of Knockout, the JavaScript UI framework that was in use. This brought us to reimplementing the entire editor using the up-to-date React library.

The overall process of rewriting took about six months, while we had to keep everything in shape for end customers during this process.

First, we copied the existing Knockout solution to a new page and made it invisible for regular users.

Then, we included the React library to the copied page and started migrating Knockout templates to React components. Knockout templates were well isolated, so we just passed the same input viewmodel to React control, implemented rendering and behaviour. Such hybrid approach worked perfectly, as we had Knockout and React features in one page.

Under the hood, first, we rewrote the survey view in read-only mode. Then, we added an option to modify a survey, add, delete, and move questions, options, and everything else. Finally, we recreated all dialogs that manage the existing settings and mirrored those settings to the survey editor. During that process, we were able to verify that no existing functionality was lost because we had the previous and new version available at the same time.

Once the migration was completed, we switched all users to work with the new version of WYSIWYG editor.

We redesigned and reimplemented a significant piece of functionality from the outdated Knockout library to the modern React framework. WYSIWYG editor now opens almost immediately for small and medium surveys (one to five pages with one to five questions on each), and reasonably fast for large and extra large surveys (dozens of pages and questions on each). This allowed our client to win multiple bids by various government institutions that required fast and smooth process of creating large surveys.

Apart from that, our development team did also get a few benefits. Now, the code is much more structured and maintainable for further customer requests. Currently, we keep migrating the existing features from Knockout to React, while new features get implemented with React only.