FORMLETSA better way to create forms?

FORMS

• Forms are used to accept input from the user

• Forms benefit from structure and predictability

• Forms should provide feedback to the user on the data quality (validation)

• Once sufficient quality is reached the user submits the data

• Some applications may have 100+ different forms

TextBox

TextBox

TextBox

TextBox

TextBox

TextBox

CancelSubmit

TextBox

TextBox

TextBox

TextBox

TextBox

TextBox

CancelSubmit

Design Patterns to the rescue?

Formlets

Composable UI Inputs

Formlet<string>

TextBox string

Formlet<string * string>

TextBox * TextBox string * string

FORMLETS

• We need some kind of flexible way to bind two Formlets into a new Formlet

• As the result of the binding operation is a Formlet the result can be bound as well

• This gives endless composability

• Like integers are composable: 1 + 2 + 3 + 4

• Like IEnumerables are composable: l.Select (...).Where (...).OrderBy ()

• Our Formlets are composable: TextBox + TextBox + TextBox + TextBox

Demo

Formlets

Composable UI Inputs

“Formlets are a way of building

[HTML] forms that are type-safe,

handle errors, abstract and are easy to

combine into bigger forms”

Haskell Wiki

“The key feature of formlets is that

they are composable”

Formaggio

Formlets

Composable UI Inputs

function notEmpty(lbl: string): IFormlet<string> {

return enhanceWithLabel(lbl, enhanceWithErrorVisualizer(

ensureNotEmpty(input(""))))

}

function createAddress(vs: string[]): IAddress;

function address(lbl: string): IFormlet<IAddress> {

return enhanceWithGroup(lbl, map(createAddress, many(

[

notEmpty("Street"),

notEmpty("Zip"),

notEmpty("City"),

notEmpty("State")

])))

}

let invoiceAddress = address("Invoice Address")

LINKS

• WebSharper Formlets

• http://websharper.com/docs/formlets

• WebSharper Piglets

• http://websharper.com/docs/piglets

• WPF Formlet gist

• https://gist.github.com/mrange/f5fbc34da14b34d4064f536de60e026b

• Great Scott!

• http://www.slideshare.net/ScottWlaschin/railway-oriented-programming

• http://www.slideshare.net/ScottWlaschin/fp-patterns-ndc-london2014

• The essence of Form Abstraction (Wadler obviously)

• http://homepages.inf.ed.ac.uk/wadler/papers/formlets-aplas/formlets-aplas.pdf

Questions?