Self Governance Design Pattern – Hacker Noon

Ideology is quite simple. Every entity in a Software System should do only 1 thing and they have to do it utmost precision and elegance. A UI element should only render UI and update itself when interacted with and not worry about handling field interaction rules or state management. At the same time SGDP does not mandate developer to fix on to a certain technology while choosing one for the task. It doesn’t ask the developer to use Redux as state management tool in the UI nor does it ask you to use Rails in the back to build your services. All it says is, make things functional and make sure they stay functional though-out the life of the project.

Let look at how this system spans out from a UI perspective. Do not tell the fields how to render and what to render. Let them decide what to do when someone interacts with the field. Let them decide how to fetch the data to render, only tell them where to fetch the data from. Equip them to fetch and update themselves when required information is given.

For instance if there is a page with 10 text fields, just give those fields style to render, path to fetch the value from state and a callback to call when interacted with. So in the future if the project management team decides to change the look of the components them selves, all you got to do it change the Shared Components that are rendering your UI.

Also since each field maintains itself, in case of Redux or React Context as state management tool, only the fields that have changed will re-render. This will increase the responsiveness of the UI since the JS Engine has less elements to update. This by itself is a major advantage of the SGDP.

There is another benefit of this pattern. Have you ever wondered how New UI and Old UI structures work (like Flickr, Meetup). We come across UIs where there will be an experimental UI or new UI that they want the users to use but if the users are not happy they can switch back to older UI. With SGDP since the UI, Actions, Rules Management and Data flow are separated out, switching between UIs is very simple.

Don’t believe me? Check out this codesandbox to see my claims in action.

In future articles you will be receiving in depth view into how such UI is built and how you can build one yourself.

read original article here