phlox/README.md

A frontend architecture that's easy to visualize

# The Phlox Architecture

> *"A picture is worth a thousand words"*

...but yet, we often write tens of thousands of lines of code without any visual documentation.

The Phlox architecture helps you build a frontend in a way that is easy to **visualize**.
The goal is that you should be able to draw a simple "box and line" diagram showing the components and dependencies in your code.

By looking at such a diagram you should be able to answer questions like:

- From how many places are we calling the create-user endpoint in the REST-api?
- How many views in our app are using any user-related data?
- ...

The diagram below is from the example in [examples/restaurant-reviewer](...)
[example picture]


*This repo is both a description of the phlox architecture as well as a simple implementation of the architecture. It also contains react-bindnings so you can use it in a react project.*

# How does it work?
A phlox arcitecture is made up of 4 different concepts; *ui*, *queries*, *lifters*, and *invokers*. These four things can be written in a fairly declarative way and because of this, it's possible to visualize them and their dependencies in a diagram.