Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Formlets

131 views

Published on

Formlets are composable UI Inputs.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Formlets

  1. 1. FORMLETS A better way to create forms?
  2. 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
  3. 3. TextBox TextBox TextBox TextBox TextBox TextBox CancelSubmit
  4. 4. TextBox TextBox TextBox TextBox TextBox TextBox CancelSubmit
  5. 5. Design Patterns to the rescue?
  6. 6. Formlets Composable UI Inputs
  7. 7. Formlet<string> TextBox  string
  8. 8. Formlet<string * string> TextBox * TextBox  string * string
  9. 9. 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
  10. 10. Demo
  11. 11. Formlets Composable UI Inputs
  12. 12. “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
  13. 13. “The key feature of formlets is that they are composable” Formaggio
  14. 14. Formlets Composable UI Inputs
  15. 15. 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")
  16. 16. 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
  17. 17. Questions?

×