State synchronization and exploratory analytics
Adobe will acquire Figma. Like many of you, I frantically searched "Free figma alternatives" and later reluctantly "How does figma work" (No offense to both Adobe and Figma). I did the same when I saw Hans Rosling TED Talk on "The best stats you've ever seen" (Full Video here). No I didn't search "How to present numbers". I searched "How does GapMinder work". With the fear of sounding Lexiphanic, both the search graphs concluded on same system technique called State Synchronization. This article attempts to explain the overall approach, propose target architecture and general use cases.
SumApp Studio: Open, Modular and Extensible Design Tool
SumApp Studio allows designers to build content in a WYSIWYG environment. The studio can be extended to create content like but not limited to web components, architecture documents, resumes' and 3D assets. The underlying architecture is build upon plugins (extensions) that contributes artifacts. Each artifact is responsible for specific task (e.g. Content Templates, Components, Shell Panels, Model definition and Rendering Templates). Studio being a data driven tool allow extracting / share any component of the model. (Like in the above video - Content and Rendered View). This plugin based architecture allows power users to contribute utility plugins. For example,
An edit session at its core runs in an isolated process at server. This allows using the language and environment specialized for this purpose. Not limited by the capabilities of the client platform or browser. SumApp Studio uses NodeJS for the server process. NodeJS provides modularization, distribution and discovery of node modules. A plugin is modelled as a node module with its manifest (aka Package.json)
Every model update in the edit process must be synchronized to all connected clients. A simple approach could be to retransmit the whole model irrespective of the change and the segment client is interested in listening to. I better engineered approach is to first record each client's preferences (Why not have preferences also a synchronized model). A model update (along with all of its side effects) is preprocessed with a diffing algorithm. The delta is then transported (choice of transport protocol is independent to the core architecture) to all clients (capped by their individual preferences). Client would then render the received deltas. References for further details -
领英推荐
Exploratory Analytics
The embedded dashboard allows user to analyze transactional data to observe, monitor and analyze data. Business documents as they are transacted upon are collected in data sources (in form of dimensions and measures). User can add cards visualizing and linking any set of dimensions and measures. The below diagram explains the target architecture.
Data is ingested in real time from transaction processing systems and other data sources like IoT devices into a columnar data store. Stored data can further undergo transformation (both periodic and near real time) using strong python libraries like pandas, numpy, scipy back into the columnar data stores.
Every user analysis context results into a running server session (leveraging the same set of python libraries). Any client server communication is merely state synchronization calls. The frontend is responsible of plotting the client model using charting libraries. References for further details -
Future Roadmap: Bokeh currently works with canvas based rendering. A nice addition would be to allow SVG, CSS 3D rendering for more immersive viewing experience. Also, the bokeh assumes no layout engine available at client side (Owing to its usage in Jupyter Notebooks). Optionally leveraging CSS Grid or Flex layout could make it natively responsive.
Next stop: Streaming VRML (Web3D.org)