Self Governance Design Pattern — Part 1 — Setting up UI

3 min readOct 1, 2018

--

In the previous Post, I have introduced you to the Self Governance Design Pattern (SGDP). As promised this post will be about setting up the UI for development.

Unlike other design patterns where the parent gives data to the child to render, SGDP will be letting the child take care of fetching the data and let the parent inform the child about where can it find itself.

Note: It is assumed that you have already setup a react project. You can use any one of the boilerplate generators like create-react-app or nwb to name couple.

Step 1 — Setting up the Project Workspace.

This is purely developer specific, feel free to modify the structure since it has nothing to do with SGDP.

We will be building a Registration Page with 9 fields:

First Name (Text Field)
Middle Name (Text Field)
Last Name (Text Field)
Address (Text Area)
Zip Code (Text Field)
City (Text Field)
State (Drop Down)
Country (Drop Down)
Phone Number with Country Code (Text Field)

Here is my workspace setup:

Views/RegistrationPage.js houses the view logic for the Registration Page.

Shared folder has the Self Governable / Sustainable components. We have 3 shared components Text Field, Phone Number Field and Drop Down Field (Text Area can be implemented using Text Field).

Step 2 — Laying out the User Interface

We will be using Office UI Fabric to build the UI and Components. Components themselves are mere wrappers of their counter parts from Office UI. In future articles we will be adding logic into Components to fetch and update data. For now they are dumb.