[Ur] Trying to create a data-bound typeahead/autocomplete drop-down menu

[Adam Chlipala]

On 07/08/2015 10:13 AM, Stefan Scott Alexander wrote:
> In many CRUD applications, when displaying a foreign-key field (eg, 
> the field 'customer_id' in table 'invoice'), it is typical to use a 
> data-bound drop-down menu or combo-box.
>
> And in cases there there are many values, it is convenient if the 
> drop-down menu or combo-box also has typeahead or autocomplete.
>
> There are several JavaScript libraries which provide typeahead or 
> autocomplete for drop-down menus and combo-boxes, including some based 
> on the very popular ReactJS library, eg:
>
> https://github.com/fmoo/react-typeahead
>
> Another popular, lightweight JavaScript library is Mithril 
> https://lhorie.github.io/mithril/ - which also apparently has some 
> simple code implementing autocomplete: 
> https://github.com/jsguy/mithril-extensions/blob/master/autocompleter2.htm
>
> I understand that Ur/Web's FFI can be used to call JavaScript, but I'm 
> unsure how to get started - particularly in the case of JavaScript 
> library such as ReactJS or Mithril, which have their own approach 
> towards UI (based on a "virtual DOM") - which might conflict with 
> Ur/Web's functional-reactive approach.

Here's my opinion: Ur/Web was doing reactive GUIs for years before 
ReactJS or Mithril existed, and Ur/Web still does reactive GUIs better 
than those frameworks do.  My vote is for building a native Ur/Web 
implementation of the functionality.

> (1) Would it make sense to try to use Ur/Web's JavaScript FFI 
> specifically with a ReactJS or Mithril library - or would there be 
> conflicts (overlaps) between React's / Mithril's "virtual DOM" 
> approach to UI and Ur/Web's functional-reactive approach?

It sounds like a royal mess to integrate two different reactive GUI 
systems.  I wouldn't bother with it myself.

> (2) If it's better to avoid ReactJS, Mithril etc. in order to avoid 
> conflicts/overlaps between React's virtual DOM approach and Ur/Web's 
> functional-reactive approach (and instead just use Ur/Web plus an FFI 
> call to some plain JavaScript in order to create a data-bound 
> typeahead/autocomplete drop-down menu), does anyone have any pointers 
> on how to get started in this direction?

It seems that various bits of Ur/Web documentation and example haven't 
been enough to convey the details of the GUI approach.  I think it's a 
very simple approach that is easy to learn in full, so I'll suggest some 
other resources.  Have you read this paper, which introduces the whole 
Ur/Web approach to web apps?
     http://adam.chlipala.net/papers/UrWebPOPL15/

Ur/Web's GUI system involves just a few primitive ingredients, such that 
I expect any experienced functional programmer to have no trouble 
composing them into the particular widget you have in mind, with no need 
for broad Ur/Web-specific tips.

> Finally, I am unsure whether the "timing" which Ur/Web would use for 
> this kind of code would be efficient, the same way ReactJS efficiently 
> diffs its virtual DOM.

It won't surprise me if more widely used libraries like ReactJS 
incorporate more serious optimization, but Ur/Web's runtime system is 
doing basically reasonable things in these cases.  I don't think you'll 
run into performance problems.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.impredicative.com/pipermail/ur/attachments/20150708/ca1110a8/attachment.html>