Vertical Slice Architecture

Vertical Slice Architecture or Feature Driven Architecture, organizes code into vertical slices where each use case is self-contained. From request to response, the code from use cases are made as independent as possible, so changes in one feature wouldn’t affect another. Although some sharing is inevitable, we try our best.

Each slice may contain code from different layers, and could contain frontend, backend, & e2e tests. But they are all code to achieve a feature.

You’ll often see folders named as the feature, with supporting files within that top level folder. By organizing code this way, we keep features independent such that changing 1 feature doesn’t affect another.

Functional Data Pipeline

From the database to the UI is a stream of data getting piped through various data transformations. In our case, it is a graph from our graph database to a DOM tree graph. You can think of this pipeline as a graph transformation pipeline.

You'll see this approach in our props pipeline, where we transform and map the shape of the data through different requirements at each stage.

Graph Theory

Graph traversal algorithms, or graph search, are algorithms that act on a graph. So how do we render a tree data structure as the DOM tree? We use a Bread First Search (BFS) traversal algorithm, which builds the leaf nodes first, then progressively towards the root node.

We are required to start from the outer most nodes, because those children need to be passed to their parents to be rendered. So each child gets combined with the parent recursively until we reach the root node.

More about it here

Graph Theory

Smart vs Dumb Components

Or container vs stateless components. We use MobX and rely on services, for a container we can depend on services. In those cases using a hook to access the service is fine.

For stateless components, we would want to depend on methods & properties. So we would want to destructure the service class more. This makes testing easier.