Part 3: simplr-forms — declarative forms for React . First e2e flow, FormStore.ToObject()

This is series of posts documenting the development of simplr-forms library. All posts can be found in GitHub.

• Part 1: Why are we doing this?
• Part 2: Core, validation, testing.
• Part 3: First e2e flow, FormStore.ToObject()
• Part 4: Normalizers and Modifiers
• Part 4.X: Status report

April 26th notes.

Attendees

• Dovydas (QuatroDev)
• Martynas (QuatroDev)

State of mind

🎉 👏 🎉 👏 🎉 👏 🎉 👏 🎉 👏 🎉 👏

Sooooo… What happened?

After quite a bit of work, a first e2e workflow now forks. Non-test, but a working browser example!

How does it look?

Technical. No styles, no nothing, just two text fields and a form. And you can submit the form (this one is big for the library 😄).

And if we spoke code?

Right. So the exciting part is that everything works as planned:

A declarative and intuitive way to build forms.

The whole react application including the form looks like this:

import * as React from "react";
import * as ReactDOM from "react-dom";
import "tslib";
import { FormStore } from "simplr-forms-core/stores";
import { Form, Text, Submit } from "simplr-forms-dom";
export class MyForm extends React.Component<{}, { formId: string }> {
    protected onSubmit: any = (event: React.FormEvent<HTMLFormElement>, store: FormStore) => {
        console.log("Submitting...");
        console.log(store.ToObject());
    };
    render() {
        return <Form onSubmit={this.onSubmit}>
            <label>
                Full name:
                <Text name="FullName" />
            </label>
            <label>
                Email:
                <Text name="Email" />
            </label>
            <Submit>Submit</Submit>
        </Form>;
    }
}
ReactDOM.render(<MyForm />, document.getElementById("react-root"));

When rendered, it’s a plain form:

And even html rendered is as plain as it can be:

It’s not “like” a plain HTML form. It IS a plain HTML form.

But when filled and submitted, it prints this into console:

Can you see it already? 😄

Declarative form with an intuitive, almost default onSubmit, where getting an object of the whole form boils down to this:

store.ToObject()

The only difference from the “default” onSubmit is that you get FormStore as a second parameter into the handler. And that is only for your convenience. You can take it in a few different ways, if you want.

And what FormStore gives you is simplicity. The ToObject() method takes care of knowing how to transform data in the store into a plain object. You don't have to take care of any refs, values, nothing. Name your fields with.. Well, name. And you're good to go!

Easy? Super easy!

That’s amazing? But… Where’s everything else?

This simple example shows what works e2e at this very moment, but even here, quite a lot of things are handled behind the scenes:

• Form is registered with FormStoresHandler and FormStore is initiated.
• formId is not given, therefore it is generated automatically for you.
• Both text fields are registered with the same store with the same generated formId and you didn't have to do anything!
• Submit button used here is from simplr-forms-dom, but no custom logic is being used in this example. It's basically your default <button type="submit">Submit</button> and it could be one. Because effectively this one is, as you can see in the HTML shown above 👍 No custom click handlers, nothing. Plain button of type submit.
• Everything behind the scenes updates data in the FormStore for you and you can already listen to actions coming from FormStore and do what you need accordingly.

Also, I’m pretty sure Modifiers and Normalizers would work already, but did not test that yet. Validators with simplr-validation package also do what they are supposed to do (kudos to Martynas for that one).

Oh, riiight. Since the last post almost two weeks ago, Martynas has already finished an initial version of simplr-validationand we will test it out soon and make the forms ready for it.

So the validation is tightly coupled with forms and not externalized…

No! Well, yes, but no! 😄

It is coupled only by a public API that simplr-forms-core exposes and that's it.

You already can create your own validation library and just use the same public API and you’re good to go!

Why am I so sure? Because, simplr-validation does just that.

Awesome. What’s next?

Until we can ship a solid alpha, we need to have:

• Most commonly used HTML components covered in simplr-forms-dom.
• Modifiers and Normalizers working.
• Validation working with simplr-forms-dom.

Until we can ship a solid beta, we need to have:

• All HTML components covered in simplr-forms-dom.
• Reliably working FieldsGroup.

As soon as we have something solid, we will ask a few people to test it out. And for the mean time, yay for a first e2e flow!

Next in series

Part 4: Normalizers and Modifiers