Create 2017-04-26.md (#26)

* Create 2017-04-26.md

Author: DovydasNavickas

docs/2017-04/2017-04-26.md

@@ -0,0 +1,128 @@
+## April 26 ([discuss](https://github.com/SimplrJS/simplr-forms/pull/26))
+
+### Attendees
+
+* [Dovydas](https://twitter.com/dovydasnav) (QuatroDev)
+* [Martynas](https://twitter.com/MartiogalaLT) (QuatroDev)
+
+### State of mind
+
+:tada: :clap: :tada: :clap: :tada: :clap: :tada: :clap: :tada: :clap: :tada: :clap: 
+
+### Sooooo... What happened?
+
+After quite a bit of work, a first e2e workflow now forks. Non-test, but a working browser example! 
+
+### So... 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 :smile:).
+
+### 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:
+```ts
+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:
+
+![image](https://cloud.githubusercontent.com/assets/7989797/25414223/08425d84-2a39-11e7-869a-be440991c688.png)
+
+And even html rendered is as plain as it can be:
+
+![image](https://cloud.githubusercontent.com/assets/7989797/25414636/420efba6-2a3b-11e7-886a-31542e057432.png)
+
+It's not "like" a `plain HTML form`. It IS a plain HTML form.
+
+But when filled and submitted, it prints this into console:
+
+![image](https://cloud.githubusercontent.com/assets/7989797/25414252/36c56c78-2a39-11e7-8831-cbcfdc4fcc2b.png)
+
+Can you see it already? :smile:
+
+Declarative form with an intuitive, almost default `onSubmit`, where getting an object of the whole form boils down to this:
+```ts
+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 monent, 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 :+1: 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](https://twitter.com/MartiogalaLT) for that one).
+
+Oh, riiight. Since the last post almost two weeks ago, [Martynas](https://twitter.com/MartiogalaLT) has already finished an initial version of `simplr-validation` and 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! :smile:
+
+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!
+
+------------
+
+The feedback and questions are more than welcome!
+
+------------
+
+Please feel free to discuss these notes in the [corresponding pull request](https://github.com/SimplrJS/simplr-forms/pull/26).