JSCatalyst Tutorial: screen sharing

Here's a situation. You're running JSCatalyst, and you've pulled up a page full of data visualizations and tables. You've customized the filters and styling so it represents exactly the information you need to convey. There are enough different components that the scroll height is too tall for a single screenshot - and then your conversation partner wouldn't get the full interactive experience.

In the past, you might've had to call/IM/email your colleagues and say "okay, go to the Stock Performance page, choose TCKR, filter by volume of sales on Thursdays in 2016 - the button for that is on the lower left hand corner - no the Left side. Maybe it's covered by your sticky notes. Forget it, let's do the screenshot."

Now, there's a simpler way. We've implemented a system where, with one button click, you can share your entire reactive view with anyone else using the application. This works across browsers, operating systems, runtimes, and networks. As long as both parties are connected to the internet, you can send or receive an entire page, content, and context. The two key technologies in this process are Vue's dynamic components and WebSockets.

Below is a video demonstration. On watching the video, you can see a page from Chrome on a Mac appear on two different Windows runtimes (Chrome and OpenFin).

I knew that I wanted to use WebSockets for this functionality because we did not want the receiving user to have to do anything (besides have the receiver open). In the more common HTTP protocol, the client/receiver must initiate all communication, which is great for many situations; you wouldn't want the New York Times' servers to just beam news through the air towards you without you or your phone app seeking info. But for something like this, or an instant messenger, it's best to leave the communication pathways open at all times. Then, since it's always listening, it's able to start taking action as soon as it hears the relevant keyword.

Our Vue

If you've been reading our blog (or the front-end framework buzz around the web), you're familiar with Vue; if not, I'll wait while you catch up on our archives.

The dynamic component feature can range from basic to super powered, especially in conjunction with asynchronous component imports. The key breakthrough for this project occurred when I came across this blog post by @codetheorist, which taught me that async components could be defined as computed properties.

Once you combine the parameters from the WebSocket message with these flexible computed asynchronous components, it's astonishingly simple to recreate the Vue view. The receiving page is completely naive about what it might be rendering until it hears the message. It just knows it's ready to render some amount of dynamic components, the specifics of which are completely undefined.

While this description is simplified, there is a considerable amount of work done under the hood to gather the implementation details of each component - in addition to the page styles and application themes. It's difficult to go further in depth without taking into account things like repository structure, or setting up a WebSocket server (with the relevant event listeners and emitters).

One possibility we've considered is encapsulating this functionality in a Vue plugin that we could publish and open source. However, there are a lot of configuration considerations before we can move down that path. Would you be interested in using this plugin if we made it? Let us know in the comments below!