formlets
TRANSCRIPT
![Page 1: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/1.jpg)
FORMLETSA better way to create forms?
![Page 2: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/2.jpg)
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
![Page 3: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/3.jpg)
![Page 4: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/4.jpg)
![Page 5: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/5.jpg)
TextBox
TextBox
TextBox
TextBox
TextBox
TextBox
CancelSubmit
![Page 6: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/6.jpg)
TextBox
TextBox
TextBox
TextBox
TextBox
TextBox
CancelSubmit
![Page 7: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/7.jpg)
![Page 8: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/8.jpg)
Design Patterns to the rescue?
![Page 9: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/9.jpg)
![Page 10: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/10.jpg)
![Page 11: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/11.jpg)
![Page 12: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/12.jpg)
![Page 13: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/13.jpg)
![Page 14: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/14.jpg)
![Page 15: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/15.jpg)
Formlets
Composable UI Inputs
![Page 16: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/16.jpg)
Formlet<string>
TextBox string
![Page 17: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/17.jpg)
Formlet<string * string>
TextBox * TextBox string * string
![Page 18: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/18.jpg)
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
![Page 19: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/19.jpg)
Demo
![Page 20: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/20.jpg)
Formlets
Composable UI Inputs
![Page 21: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/21.jpg)
“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
![Page 22: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/22.jpg)
“The key feature of formlets is that
they are composable”
Formaggio
![Page 23: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/23.jpg)
Formlets
Composable UI Inputs
![Page 24: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/24.jpg)
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")
![Page 25: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/25.jpg)
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
![Page 26: Formlets](https://reader034.vdocument.in/reader034/viewer/2022051710/5a6d543f7f8b9a22428b536b/html5/thumbnails/26.jpg)
Questions?