Editor's Note: We're thrilled to have Ham Fancher, Rapt Media's senior product engineer, as our guest blogger.

A year ago today, we launched our revamped project authoring platform, known as the Composer, for all customers. The new Composer largely aimed to modernize our project publishing workflow from both a user experience and technology standpoint. This effort included rewriting code for a majority of the existing Composer application, minus a few pieces that were a bit more of a challenge at the time.

Today is exciting because we have finally addressed those remaining “challenges” by releasing an entirely rewritten version of our project Composer’s path editor.

This represents a major milestone for a few reasons, the biggest of which is that we have now replaced all legacy parts to our old authoring platform. This post is intended to give you a quick rundown of the whys, hows, and what is new for anyone logging in to check it out.

Why we are replacing the old path editor

The Rapt Media path editor represents the biggest time investment for any project author on our platform. It's where customers are constantly revising and creating new interactive experiences via our intuitive drag-and-drop builder. When we set out to rebuild the authoring platform last year, we didn’t want to address the path editor’s massive amount of functionality while also changing the underlying framework at the same time. Instead, we wanted to keep users somewhat anchored during an otherwise huge UX change and keep the scope of the refactor reasonable.

So, while we avoided dealing with any hiccups during last year's new platform release, we still knew that there were some issues to tackle in the future, specifically around performance problems and “compatibility” concerns around forcing our old path editor into the new Composer’s technology framework.

Performance

Performance issues are by far the biggest reason for the rewrite, as they were starting to become a barrier for some of our clients. Given that Rapt has seen an evolution in our audience over the past few years, we were starting to have some projects that were reaching previously unplanned limits—picture 350 nodes with hundreds of paths between them.

While the Rapt player still handled these larger projects and provided cohesive experiences, the path editor suffered exponentially as projects grew into the 200+ node range. While the average project (less than 100 nodes) never encountered any problems, these larger projects sometimes experienced slower load times and laggy interactions—for example, when dragging paths and nodes—within the path editor.

Cohesion

Code compatibility represented another major driver for our refactor. While less noticeable to users, having a code base that was “tacked on” to the new underlying framework (instead of built within) was causing us its own share of problems internal to our development team. Not only did it slow down new feature development for the path editor, but it also created many edge cases that our automated test suite and QA team had to account for.

The new Rapt Media path editor

With those issues in mind, we set out to lay a new foundation for the underlying technology powering our path editor. This technology stack would mirror the rest of our Composer, making use of React and Redux, to synchronize and manage all the interactions and workflows of the old path editor. Building this foundation involved a lot of time and experimentation to ensure we met our performance needs, testing the tech against larger projects throughout the entire process.

We also introduced a few new changes along the way, which you'll learn about by the end of the post.

The main benefits that users should expect out of the new path editor include:

• Consistent performance from small to larger projects
• Performance that scales better with the performance of the computer accessing the editor
• A foundation that will let us continue to build more features that better serve the needs of larger projects (think node grouping or multi-layered projects)

Below represents the relative speed increases for the new path editor vs. the old, across project sizes:

Better pan & zoom functionality:

One of the main differences between the new and old Composer is that we are minimizing the amount of elements on the path editor per given node and path by about 30 percent. This decrease isn’t a huge deal for most projects, but when you are dealing with tens of thousands of elements versus only thousands for a larger project the browser will start to suffer.

In order to minimize the amount of elements per project, we rebuilt all of the path editors core visual UI using SVGs, or scalable vector graphics. Along with this change, and the nature of SVGs, we were able to add in some much more useful canvas zooming and panning features. This not only means you can zoom further in and out than before (once again, helping larger projects), but we also added a few more utility functions as well, such as centering your view on the start node of a project and fitting the project contents into the screen at once.

Updated visual design and UX:

We also took this opportunity to introduce a new set of styles for all the elements and interactions in the path editor. While the majority of the old node/path dragging-and-dropping behavior remains mostly the same, the styles represent a look and feel more in line with the rest of our new authoring platform. But these updates aren't all for the aesthetics; we felt many of the changes would help make larger projects “clearer” in what the behavior of the paths was, and offer a more tactile feel for drag-and-drop operations than before.

While most users should be able to transition seamlessly from the old Composer to the new, it is important to note that some minor UX interactions may be slightly different than before. Feel free to reach out and let us know if you feel like you expected something to work in a way that it didn’t.

Introducing the legend:

With the previous change, we also added a new legend to the path editor. This legend highlights the meaning of visual elements on the path editor and will become increasingly important as we add new features, such as node grouping, in the future.

Start node updates:

One other update of note is that we got rid of the idea of a “start node” with its own path pointing to the initial entry point of a project. Instead, we replaced it with a “start icon” indicator that can be dragged and dropped to change entry points to the project instead of a path representing that.

Welcome to the new Rapt Media path editor!

As mentioned before, please let us know if you run into problems as you explore the new path editor. We hope you find the new Composer more robust and user-friendly than ever before. Welcome!