[Proof-of-Concept] React implementation of a simple tree browser

As per
https://www.postgresql.org/message-id/CAG7mmoxkYtqcQyVk140gsrx0FsnUAw-uy7GusmFypRi9D9DwCA%40mail.gmail.com
we
have built a proof-of-concept of a tree browser using the React framework.

Current Challenges Facing pgAdmin4

1.

Frontend code with the same concern is spread across many functions.
This is a symptom of design patterns that jQuery encourages. In order to
effect external change, a component must explicitly refer to the component
it wants to impact, or modify some global state that is shared by many
components. This makes it hard to determine how the frontend code achieves
desired behavior.
2.

The testing patterns that exist in the backend aren’t repeatable with
the current frontend stack. Separating the two provides clear seams for
testing and refactoring.

These make it difficult to implement new features and make changes to
existing functionality in a timely manner.

Benefits of Including React to pgAdmin4

1.

By having isolated components with clear boundaries and concerns,
developers will be able to make changes to existing code more easily.
2.

React encourages us to inject dependencies into components.
1.

This makes testing much easier by simplifying mocking external
behavior.
2.

It also encourages good patterns for single-responsibility and code
reuse.
3.

It encourages us to keep components closed to modification, so that
new functionality will tend to be built as new components rather than
growing the scope of existing components. This leads to components whose
purpose and behavior is clear and easier to understand than
large entities
with many responsibilities.
3.

Bound behavior is contained within components. For example: within a
single component definition, you will find the onClick handler function and
a single line of javascript binding that function to an event.
4.

React components should only make changes to their own state.
Communication about state happens between a parent and a child and not
between siblings. There is a one-directional flow for state change. This
makes reasoning about state changes easier.
5.

React can be brought into the project one behavior at a time; we don’t
need to rewrite the entire application in React to benefit from using it.

Check out:

https://facebook.github.io/react/docs/thinking-in-react.html

Patch

As a proof-of-concept for React in the codebase, we have implemented a
basic tree browser. Currently the displayed nodes are Server Groups and
Servers. The nodes can be opened and closed when clicked on. This
proof-of-concept contains only some of the features of the existing tree;
the patch’s purpose is to allow for a comparison between React code and the
previous implementation. The behavior on this branch so far is in our
acceptance environment:
http://plumadmin-squashed-react-tree.cfapps.io/browser/

We would appreciate feedback about the introduction of this framework into
the codebase.

- The Team at Pivotal