1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-10-18 20:09:08 +02:00
unleash.unleash/website/docs/contributing/frontend/ADR/preferred-form-architecture.md
Fredrik Strand Oseberg 50fb671b66
Docs/dev docs (#2134)
* docs: add ADRs

* docs/adrs

* fix: update developer guide

* fix: add space

* Update website/docs/contributing/backend/overview.md

Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>

* docs: remove auto-generated sidebar

This should've been in .gitignore, but has only been ignored to the
ignore file for the website subdirectory. (This has been fixed on main.)

* docs: delete empty file

* Revert "docs: delete empty file"

This reverts commit 2435f173ff.

* docs: add frontmatter to new dev docs

* Docs(fix): add quotes around page titles

In yaml, the colon is a special character, so we need to use quotes.

* docs: fix remaining titles

* Update website/docs/contributing/backend/overview.md

Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>

* fix: update empty ADR

* fix: update text to reflect postgres 12

* fix: update backend overview

* fix: remove link

* fix: add form ADR

Co-authored-by: Ivar Conradi Østhus <ivar@getunleash.ai>
Co-authored-by: Thomas Heartman <thomas@getunleash.ai>
2022-10-19 14:32:37 +02:00

1.1 KiB

title
ADR: Preferred form architecture

Background

Forms can be tricky. In software, we often want to write DRY components, repeating as little as possible. Yet we also want a clear separation of concerns. Forms represent a challenge in this way because you have to choose which principle is the most important. You can't both have it DRY and completely separated.

Decision

We have decided to architecture our forms in the following way:

  • Create a hook that contains all the logic for the form. This hook will return a form object that contains all the form state and functions to update the state.
  • Create a reusable form component that does not contain any logic
  • Create separate Create and Edit components that use the form component and the form hook to create the form and implements it's own logic for submitting the form.

In this way, we keep as much of the form as possible DRY, but we avoid passing state internally in the form so the form doesn't need to know wheter it is in create or edit mode. This allows us to keep one thing in mind when working, and not have to worry about dual states of the component.