ashubham

❤️	😭
Uses the web platform, with a thin abstraction layer. No new DOM implementation.	Need to setup a separate webserver with specialized DNS config
All DOM APIs are supported, no need to change the code	Only supported in Chromium based browsers (Chrome/Edge) as of today.
First class support to parallelize any React component

ashubham

❤️	😭
Performance benefits both for first render and subsequent mutations	The complexity of maintaining a parallel DOM implementation, which will lag behind the browser's implementation
Uses the familiar WebWorker API	Some APIs need a workaround to work. Some APIs cannot be supported

ashubham

❤️	😭
Create and Mutate visual elements from a Worker thread	Canvas is a very low level API, need to use an abstraction layer
Simple API	Not too many feature rich Canvas libraries exist vs SVG/HTML rendering (React, D3, Highcharts etc)
WebGL/WebGPU support	Canvas is not responsive, need to redraw when resized
	Need to handle DOM events from the Main thread, as workers do not have DOM access
	Canvas is stateless, so state updates/interactivity requires full redraw vs surgical updates

ashubham

❤️	😭
Simple to use if you already use the latest React versions	No benefit to the initial render performance
	Dependency on React as a framework for everything
	Single threaded, so low end CPU devices do not benefit
	Repriotizes existing work, the strategy will fail when there is just more work to do like data visualizations

ashubham

❤️	😭
Fast initial render performance, as DOM can be precreated on the server	Hydration on the client might be complex/expensive
	No perf benefits beyond the first render
	Need to maintain a server side DOM implementation
	Not all features are supported in server side rendering

ashubham

❤️	😭
Supported by the platform OOTB	Limited to compute, no access to DOM
Workers threads are lightweight	API is a bit clunky in some cases
Workers can make HTTP calls	Transferring data between workers can be expensive, cannot transfer functions.

ashubham

// Upgrade to the latest Visual Embed SDK version 1.5.0
// Also ensure your TS cluster is on October cloud release.
import { PinboardEmbed, HostEvent } from '@thoughtspot/visual-embed-sdk';

const embed = new PinboardEmbed({ /* config */ });

embed.render();

// To set the visible vizs after the pinboard has rendered.
// Note the the original order of the vizs will be maintained, the vizs not in this list will just be hidden.

ashubham

import { SearchEmbed, EmbedEvent } from "@thoughtspot/visual-embed-sdk";
...
React.useEffect(() => {
  ...
  tsSearch
    .on(EmbedEvent.CustomAction, (payload: any) => {
        const data = payload.data;
        if(data.id === 'send-email') {
          sendEmail(data); // Call your own method here.
        }

ashubham

import { SearchEmbed, EmbedEvent } from "@thoughtspot/visual-embed-sdk";

...

React.useEffect(() => {
  ...
  tsSearch
    .on(EmbedEvent.Init, () => setIsLoading(true)) // Listen to `init` event.
    .on(EmbedEvent.Load, () => setIsLoading(false)) // Listen to 'load` event.
    .render();

ashubham

import { init, AuthType } from "@thoughtspot/visual-embed-sdk";

init({
  thoughtSpotHost: "https://try-everywhere.thoughtspot.cloud", // Your instance here.
  authType: AuthType.None // Your Auth scheme, SAML or AuthToken
});

export const App = ...