Unity in Diversity - React front-end consuming diverse micro-services for graph visualization and data transformations

Creating next-gen products e.g. Satellites and Electric vehicles require unifying data from various teams to build a digital thread. Our product Syndeia solves this problem with a React-based frontend with scalable microservices. Join us as we share our React story with data and visualization.

From satellites to supply chains, and energy to IoT and healthcare, organizations developing large complex products of the future are faced with the challenge of bringing diverse set of models and data from various engineering teams (systems, mechanical, electrical, manufacturing, and software) to build a unified definition of their product and track the complete lifecycle of that product - cradle to grave. Syndeia (www.syndeia.com) is a cloud-native platform backed by reactive microservices that makes it possible for engineering teams to connect to models/data in various enterprise engineering repositories and build a live digital thread of a product using that data. Syndeia users are in aerospace, automotive, defense, energy, healthcare, manufacturing, and other industry verticals.

Syndeia’s front-end web-dashboard is a React application that consumes and unifies the data/models coming from various microservices and presents them in a variety of ways - graph visualizations, tree-tables, D3 charts, plots, and more. In this talk, I will share lessons learned in building a React-based web-dashboard that works with microservices at scale.

Specifically, the audience will learn about:-

1. Embedding various forms of visualizations in React components, such as trees, tables, graphs (vertices & edges), and analytics plots.

2. Dealing with latency in service responses when rendering data in React components. This includes using PureComponent, using Redux to store the data that is accessible across the application, designing fit-for-purpose components, and presenting data incrementally to users for maximizing responsiveness.

3. Scaling the performance of React components, especially when rending a graph with 1000+ elements resulting from a graph query.

4. Robustly dealing with failure, e.g. managing states and exceptions when microservices go down. We have used Redux to manage application states.

I will also share learning resources on how to get started with building a new React-based web-dashboard that works with backend microservices and REST APIs at scale.

This talk is for all kinds of an audience who have basic to advance level understanding of ReactJS. The audience may or may not have any working experience with Graph visualization. I can clearly explain the in and outs of challenges, and learnings while I was working on React app + graph viz.