The orginal motivation behind daybed was to replace Google Forms, and for that, appart from the storage and validation service (what Daybed is), we are in need of a form builder.
A form builder is the tool you're using to generate forms so that users can then enter data trough them.
For that, we are using React.js as it allows us to keep things separated in a clear and nice way.
If you want to work with the formbuilder, or hack on it, then you'll need to install it. To do so, it's easy:
$ npm install
$ npm start
… and you should see your favorite browser open with the app running there for you.
Here are some notes about the overall design we're using for this form builder.
Here is an overview of how the react components work together:
<FormBuilderApp>
<FieldList />
<FormHeader />
<FormContainer>
<FormElement>
<TextAreaEditor />
<TextAreaRenderer />
</FormElement>
<FormElement>
<CheckboxesEditor />
<CheckboxesRenderer />
</FormElement>
</FormContainer>
</FormBuilderApp>
We're using Flux to dispatch the actions, meaning that the FormBuilderApp contains a reference to a store where we store all the form elements that had been added / configured to the app.
When an action takes place, any of the elements can trigger it and it will update the data, and the elements will be re-rendered.
———| Action |<——— triggers ———
updates | |
——>| Store | — updates ——> | App | ——> | Component2 |
|
——————> | Component2 |
Cool, have a look at the pad we're using to track what still needs to be done.
The theme was provided by Cocoon Development Ltd, which released the code behind http://www.former.io/ code under an MIT licence.
We rewrote all the logic behind the code to use react in order to have something easier to maintain.