<html>
<head>
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
On 07/08/2015 10:13 AM, Stefan Scott Alexander wrote:<br>
<blockquote
cite="mid:CAFwK6avq_QVheG4Fadf0Evn9r3fPwW_DScGedPXOEwUZLK2Wtg@mail.gmail.com"
type="cite">
<div dir="ltr">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.
<div><br>
</div>
<div>And in cases there there are many values, it is convenient
if the drop-down menu or combo-box also has typeahead or
autocomplete.</div>
<div><br>
</div>
<div>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:</div>
<div><br>
</div>
<div><a moz-do-not-send="true"
href="https://github.com/fmoo/react-typeahead">https://github.com/fmoo/react-typeahead</a></div>
<div><br>
</div>
<div>Another popular, lightweight JavaScript library is Mithril <a
moz-do-not-send="true"
href="https://lhorie.github.io/mithril/">https://lhorie.github.io/mithril/</a>
- which also apparently has some simple code implementing
autocomplete: <a moz-do-not-send="true"
href="https://github.com/jsguy/mithril-extensions/blob/master/autocompleter2.htm">https://github.com/jsguy/mithril-extensions/blob/master/autocompleter2.htm</a></div>
<div><br>
</div>
<div>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. <br>
</div>
</div>
</blockquote>
<br>
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.<br>
<br>
<blockquote
cite="mid:CAFwK6avq_QVheG4Fadf0Evn9r3fPwW_DScGedPXOEwUZLK2Wtg@mail.gmail.com"
type="cite">
<div dir="ltr">(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?</div>
</blockquote>
<br>
It sounds like a royal mess to integrate two different reactive GUI
systems. I wouldn't bother with it myself.<br>
<br>
<blockquote
cite="mid:CAFwK6avq_QVheG4Fadf0Evn9r3fPwW_DScGedPXOEwUZLK2Wtg@mail.gmail.com"
type="cite">
<div dir="ltr">
<div>(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?</div>
</div>
</blockquote>
<br>
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?<br>
<a class="moz-txt-link-freetext" href="http://adam.chlipala.net/papers/UrWebPOPL15/">http://adam.chlipala.net/papers/UrWebPOPL15/</a><br>
<br>
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.<br>
<br>
<blockquote type="cite"><font face="monospace, monospace">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.</font></blockquote>
<br>
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.<br>
</body>
</html>