Select or build Scala.js-based UI framework for Form Builder

[ebruchez]

We started implementing the UI for #2256 using Scala.js a while back. The UI is not huge in terms of the surface it uses, but it's not a plain form: it is very dynamic and it even has a recursive aspect to it!

Ideas which we implemented:

• use React.js via scala-js-react
• model workflow configuration data via a tree of immutable case classes
• use Monocle to update the data model
• functional data binding using lens "paths" into the data
• mini-framework to build components with data binding
• higher-level components like
  • reusable repeater
  • type-based (ADT-based) switch/case/tabview
• some XForms inspiration

We have the following issues:

• incomplete and not type-safe enough
• needs massive cleanup
• missing features
  • labels, hints, alerts, validations calculations
  • update values from the outside
  • i18n
  • ...
• type-safety
  • use HList-based paths to enforce type-safety

There are a few frameworks we would like to research before investing more on our own:

• Scala.js
  • Diode
  • Scala-JS-Binding
  • Udash
  • Binding.scala
  • Scales
• JavaScript
  • Redux
  • Vue.js 2
  • Angular 2

The idea is to:

• understand better the patterns supported by these frameworks
• to see whether what we would like to achieve is already done by somebody else
• or whether we should just adopt one or more of these frameworks

[ebruchez]

• Diode
  • for managing app state (model)
  • immutable case classes
  • action objects
  • helper lenses ("zoom")
  • can be used with ScalaTags, React, etc.
  • evaluation
  • negatives
    • seems too minimal for what we have in mind
    • don't think action classes help us at all
    • we would need much more help with a lens-like / data-binding system to reduce boilerplate
  • positives
    • the frameworks seems relatively small
• Binding.scala
  • data-binding
  • XHTML syntax
  • replaces ReactJS
  • precise data-binding
  • React components-like @dom methods
  • open questions
  • does it handle recursion (like our recursive iTunes-like workflow UI?)
  • are inserts/deletes into data working as we would like to? (https://github.com/ThoughtWorksInc/Binding.scala/issues/9)
  • would we be able to write a reusable repeater or switch?
  • evaluation
  • negatives
    • the data model must contain Var values so cannot be an arbitrary hierarhcy of case classes and ADTs
  • positives
    • the frameworks seems relatively small
  • TODO
• Scala-JS-Binding
  • uses Scala.rx
  • HTML support with data- attributes
  • evaluation
  • positives
  • negatives
    • probably not a good fit
• Udash
  • bigger framework: routing, client/server RPC, etc.
  • data model: Property, can be case class, enables change listening and validation
  • evaluation
  • negatives
    • is more complex, and view code looks fairly complex
  • positives
    • two-way form binding seems nice
    • has validation, i18n
    • integrates Bootstrap components
• Scales
  • based on Web Components
  • no MVC/binding/etc. yet
  • not mature enough yet
• Redux
  • state container
  • store, actions to change store (reducers), friendly to immutable state (encouraged, e.g. with Immutable.js)
  • can be used with Rx, React, etc.
  • evaluation
  • negatives
    • appropriate for JavaScript but not adapted to our needs
  • positives
    • simple
    • a lot of doc and learning material!
• Vue.js
  • 2.0 RC
  • "just works" they say, "all DOM manipulations are handled by Vue"
  • virtual DOM
  • 2-way data binding for form elements
  • bigger framework
  • bind view and model and things automatically linked (or via id)
  • conditionals and repeats in view
  • components
  • evaluation
  • negatives
    • yet another MVC framework
    • doesn't do as much as we'd like
    • very much JavaScript-oriented
  • positives
    • seems to have a good following
    • emphasis on reducing boilerplate
• scalajs-react / scalajs-react [neo]
  • bindings to React with a lot of static typing
  • "neo" redesign in progress as of 2016-09-21
  • nice: "A separate .raw package that contains the React JS facade"
  • and other nice stuff coming
  • evaluation
  • negatives
    • "neo" not done yet
    • older version a bit messy
    • doesn't handle state / bindings in a particular way
  • positives
    • well-maintained (so far, and only 1 guy)
    • basing on React means the underlying stuff is solid
• Angular 2
  • evaluation
  • negatives
    • not strong on the data model side of things? doc?
    • TODO
  • positives
    • big community of users
    • 2-way data binding
    • has required validation, dirty/pristine, touched/untouched, custom validators
    • TODO

[Atry]

FYI: Binding.scala does support recursive workflow UI See https://thoughtworksinc.github.io/Binding.scala/#3

Though I don't know if it is iTunes-like

[ebruchez]

For Orbeon Forms 2016.3, we will build that UI with XForms as usual. For the future, we are considering a few options.