Formlets are composable UI Inputs.

1. FORMLETS
A better way to create forms?

2. 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

5. TextBox
TextBox
TextBox
TextBox
TextBox
TextBox
CancelSubmit

6. TextBox
TextBox
TextBox
TextBox
TextBox
TextBox
CancelSubmit

8. Design Patterns to the rescue?

15. Formlets
Composable UI Inputs

16. Formlet<string>
TextBox  string

17. Formlet<string * string>
TextBox * TextBox  string * string

18. 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

19. Demo

20. Formlets
Composable UI Inputs

21. “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

22. “The key feature of formlets is that
they are composable”
Formaggio

23. Formlets
Composable UI Inputs

24. 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")

25. 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

26. Questions?