[pgadmin-hackers] [Proof-of-Concept] React implementation of a simpletree 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.

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