Instant feedback with the Visualization SDK

Speed of feedback is important. Being a front end engineer, reducing the time it takes to see the results of my code change increases the pace of development and the satisfaction involved in the task. It’s not just me, tools like browsersync, which trigger a rebuild when the code changes, are popular for this very reason. It should be no surprise, when I interview potential front end engineers and ask the question: ‘What is the one thing you most like about front end development?’; Their answer almost always revolves around the immediate visual feedback.

This preference is not limited to developers. In fact in economics it has its own name: Temporal Discounting. It explains how we generally apply more value to things that will arrive sooner and ‘discount’ the value of things that come later. This is why Amazon is confident you will be willing to pay more for prime in order to get next day delivery.

Knowing how important this immediate feedback is we have created the Visualization SDK so you can supercharge your visualizations. Now, every change made to the content form will trigger an event you can use to re-render your content. You don’t even have to save your content before you start rendering. 

Introducing the Visualization SDK

The Visualization SDK is a client-side TypeScript library, which like the extensions SDK allows you to connect to Dynamic Content. Once connected you can fetch content from the content-form, subscribe to any changes that happen as well as give you some other updates such as when visualization controls are used.

1import { init } from 'dc-visualization-sdk'; 
2//... 
3const sdk = await init(); // initiate the connection 
4let content = await sdk.form.get(); // get the current content 
5const unsubscribe = sdk.form.changed(update => content = update); // subscribe to content form changes.

Using the above, content will be assigned the in-progress content and update whenever the form is changed. The update object will be shaped exactly like the delivery API and you can use the same options (i.e. depth and format).

Deciding where to put this code will depend on the use case, in general SPAs are straightforward as they run entirely in the client. For server side rendering and static site generation you need to find the relevant lifecycle hook to execute the SDK connection and subscribe to content updates. For example, componentDidMount in react (Next.js, Gatsby) or mounted in vue (Nuxt), or onMount in svelte (SvelteKit / Sapper).

Once you have your visualization updated to include this new source of content you can enable the real time behavior by adding the URL parameter realtime=true to the visualization URL.

The Visualization SDK has a number of other capabilities: 

• Subscribe to form save events. 
• Fetch the chosen locale and subscribe to changes. This will be quicker than relying on a reload when using the Url parameter. 
• Get the chosen visualization device and subscribe to changes. 
• Get the delivery-key and subscribe to changes. 
• Fetch the visualization settings (all devices set up on the hub and your vse url). 

Delivery Preview Visualization

The Delivery Preview Visualization is a hosted visualization that lets you see your JSON being created in real time. It makes full use of all the Visualization SDK capabilities and can be a useful debugging tool. It can also be used for comparing your published, staged and in progress content using the handy diff view. 

To use, open the application, it has a URL you can copy; You can then use this as a visualization in one of your content types.