[Ur] Live demo and tutorial for a simple autocomplete widget written using RxJS + Mithril + 6to5/Babel + HTML5 <datalist>. Could this provide a basis for a simple "native" autocomplete widget in Ur/Web?

Mon Jul 13 03:02:24 EDT 2015

[This message is almost identical to the previous message; but it fixes a
few typos.]

TL;DR: A data-bound autocomplete widget will finally make it really
practical to use Ur/Web as stated on its website:

"Ur/Web supports construction of dynamic web applications backed by SQL
databases."

It would be great if someone good at front-end programming using Ur/Web FRP
could contribute this kind of autocomplete widget.

And the example of the existing Mithril+RxJS autocomplete widget might be
able to provide some help.

===

(I) Live demo:

Here is a live demo of an autocomplete widget written using RxJS + Mithril
+ 6to5 aka Babel + HTML5 <datalist> [1]:

http://codepen.io/ericponto/pen/mJEyPL

The code can be downloaded by clicking on "Share" and then clicking on
"Export .zip" - and then it can be run in any browser, with no need for a
server.

It's tiny - just three files:

- index.html

- ../babel/index.babel - (written in babel aka 6to5) which compiles to =>

- ../js/index.js.

(II) Tutorial:

There is also a nice, "literate-programming-style" tutorial for the live
demo:

http://www.ericponto.com/blog/2015/05/31/rxjs-and-mithril/

So here we have a short, simple implementation of a basic autocomplete
widget written in the minimal, functional, FRP-friendly JavaScript
framework Mithril.

Specifically, this autocomplete widget is using:

(1) Mithril: the tiny-footprint (12k gzipped), high-performance,
FRP-friendly React-like JavaScript framework

http://lhorie.github.io/mithril/

(2) RxJS: reactive extensions for JavaScript

https://github.com/Reactive-Extensions/RxJS

(3) 6to5 or Babel: the compiler providing a layer of "functional" syntactic
sugar of JavaScript and allowing programmers to use the new, functional
ECMAscript 6 before its release

https://babeljs.io/

(Warning: The babel homepage sometimes doesn't open in Chrome.)

(III) Questions:

(1) Could this simple RxJS+Mithril+Babel autocomplete widget example
provide a short path towards implementing a simple autocomplete widget
"natively" in Ur/Web (using FRP)?

(2) Could Mithril be a good "fit" with Ur/Web somehow?

(3) If so, what would be the best way to leverage Mithril in Ur/Web?

(a) "wrap" Mithril using Ur/Web's JavaScript FFI?

(b) use Mithril's implementation as a reference and emulate / re-implement
some or all of it from scratch using Ur/Web FRP?

(c) or maybe Ur/Web's FRP already does what Mithril does, but better, so
Mithril has *nothing* to offer Ur/Web?

(IV) Conjectures:

Even if (3)(c) above is true, it seems that this might provide additional
support for the question asked in the subject of this message, ie:

Can the autocomplete widget implemented in RxJS + Mithril + 6to5 serve as
an inspiration or template for implementing a similar widget natively using
Ur/Web's FRP?

Intuitively, it seems that the "shape" of this RxJS + Mithril + 6to5
implementation of an autocomplete widget might somehow be "similar" to the
"shape" of some code which would implement the same widget in Ur/Web.

(V) Possibly related recent work in functional and functional-reactive
JavaScript libraries:

There has been a flurry of activity over the past couple years involving
functional programming and functional-reactive programming with JavaScript
libraries.

A short opinionated list (from a programmer who likes functional, strongly
typed languages) can be seen here.

http://doshitan.com/js-overview-early-2015/#mithril
(Ignore item 1 talking about Angular! - I think that's just what he has to
use at his job!)

It is also fascinating the read the ReadMe (really a bit of a manifesto) of
the Re-Frame project on GitHub (which uses React, a ClojureScript "wrapper"
over Facebook React):

https://github.com/Day8/re-frame

I would imagine it can be interesting for Ur/Web programmers to be aware of
these functional and functional-reactive tendencies in JavaScript
libraries, because:

(1) They may be somewhat related to Ur/Web FRP front-end programming, eg,
they may suggest useful algorithms or techniques; or

(2) It may be worth leveraging some of these functional and
functional-reactive JavaScript libraries by:

(a) "wrapping" them via Ur/Web's FFI; or

(b) "emulating" them by writing portions of either:

(i) their implementations; or

(ii) implementations of *examples written in them*

... "natively" from scratch using Ur/Web's FRP.

(VI) MithrilJS:

Mithril is an interesting JavaScript library because it's tiny and
functional-reactive and fast.

https://lhorie.github.io/mithril/benchmarks.html

It's also compact and expressive:

http://lhorie.github.io/mithril-blog/a-spreadsheet-in-60-lines-of-javascript.html

Its implementation is short enough that you can actually read and
understand the whole thing in a day:

https://github.com/lhorie/mithril

Perhaps the most convincing stuff to read on Mithril is posts on
news.ycombinator.com from other programmers:

https://news.ycombinator.com/item?id=8973867

https://www.google.com/?gws_rd=ssl#q=site:news.ycombinator.com+mithril

Finally, the tutorial for the autocomplete live demo using RxJS + Mithril +
6to5 even explains what to do "when pairing Mithril with a FRP library":

http://www.ericponto.com/blog/2015/05/31/rxjs-and-mithril/

So this suggests that Mithril may in some way be a good "fit" to use with
Ur/Web.

(VI) Mithril: Can it contribute to Ur/Web?

I am curious about how Mithril might be able to fit with or contribute to
Ur/Web.

Specifically I wonder if the Mitril + RxJS implementation of an
autocomplete widget can help towards implementing a similar widget natively
in Ur/Web using FRP.

Of course, I'm *not* saying that Mithril should somehow *replace* Ur/Web's
native front-end facilities.

But I *am* wondering if there could be some sort of cross-pollination here,
in some form.

For example, given ...

- the current lack of examples and demos of Ur/Web FRP programming*

- Mithril's functional approach, and FRP-friendliness

... I wonder if Mithril could serve as some kind of inspiration, in
particular for a back-end database programmer trying to learn how to do FRP
in Ur/Web.

---

* By the way, I would like to mention that the chat examples in this PDF
are amazing:

http://adam.chlipala.net/papers/UrWebPOPL15/UrWebPOPL15.pdf

This is some of the most inspiring web programming code I've ever seen.
Amazingly compact and expressive and helpful.

If there were more examples of such nice Ur/Web FRP idioms available, it
would be
immensely helpful for programmers learning Ur/Web.

(VIII) Why a (native or FFI) autocomplete widget (in particular) could be
very important for Ur/Web:

Having a community-contributed autocomplete widget for Ur/Web, implemented
either:

- "natively" using Ur/Web FRP, or

- as an FFI "wrapper" around an existing full-featured library such as
Select2 or twitter typeahead.js

... would finally make it really practical for Ur/Web to be used by more
application developers as a web database framework (particular those who
are good at back-end programming and not-so-good at front-end programming).

This is because an autocomplete widget is essential for providing a
friendly UI where users editing a "child" record can use a convenient menu
to select the value of a foreign-key field to link it to the appropriate
"parent" record - rather than having to manually find, memorize and enter
the parent record's autoincrement/surrogate integer primary key.

Developers who are good at data-modeling and SQL on the back-end (but might
not be so good at functional-reactive programming on the front end) would
benefit greatly if some Ur/Web programmer(s) who are good at front-end
programming could provide a "native" implementation of an autocomplete
 using Ur/Web's FRP - perhaps inspired by the Mithril+RxJS+Babel
autocomplete example described in this post.

===

Source code or the RxJS + Mithril + 6to5 + Html5 DataList autocomplete
widget example:

Below are just the 2 human-written files index.html and index.babel.

File index.babel is quite similar to third file (not shown): index.js -
which is output by the compiler. However, index.babel uses a more
"functional" syntax.

I hope that if the brief code below implementing an autocomplete widget is
read by some Ur/Web programmers (who are also good at front-end
development) some might will think: "This looks a lot like something I could
implement 'natively' in Ur/Web".

It would probably only take a page of code (for an Ur/Web programmer who is
good at front-end development) to implement a simple data-bound
autocomplete widget using Ur/Web's FRP.

===

###  this file:
###  index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>RxJS and Mithril Autocomplete Example</title>
  </head>
  <body>

    <div id="autocomplete"></div>

    <script src='
https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.2/rx.all.min.js'></script>
    <script src='
https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js
'></script>

    <script src="js/index.js"></script>

  </body>
</html>

===

###  this file:
### ../babel/index.babel

###  compiles to:
###  ../js/index.js

var pluck = Rx.helpers.pluck;

var searchGithub = function(term) {
return m.request({
    method: "GET",
    url: `https://api.github.com/search/repositories?q=${term}`
  });
};

var el = document.querySelector("#autocomplete");

var AutoComplete = {
  controller() {
    this.data = m.prop({});

    Rx.Observable.fromEvent(el, "keyup")
     .map(pluck("target")) /* get element */
     .filter(el => el.matches("input")) /* make sure it is the input */
     .map(pluck("value")) /* get element's value */
     .filter(val => val.length > 2) /* at least 3 chars */
     .debounce(250) /* debounce it */
     .distinctUntilChanged() /* ignore non character keyups */
     .flatMapLatest(searchGithub) /* fire request */
     .subscribe(this.data); /* set data prop with results */
  },
  view(ctrl) {
    var data = ctrl.data();

    return m(".autocomplete", [
      m("label[for=search]", ["Search for Github repo: "]),
      m("input#search[list=results]"),
      m("datalist#results", [
        data.items && data.items.map(item => m("option[value=" + item.name
+ "]"))
      ])
    ]);
}
};

m.mount(el, AutoComplete);

===

Again, the complete source for the above demo can be downloaded from the
link below, and can be run locally without a webserver (ie by simply
opening the index.html file directly in a browser):

http://codepen.io/ericponto/pen/mJEyPL

The source can be downloaded by clicking on "Share" > "Export .zip"

===

[1] Caveat: This RxJS + Mithril + 6to5 aka Babel + HTML5 DataList
autocomplete relies on the HTML5 DataList element - which has a couple of
limitations:

- only usable in newer browsers

- also some limitation about the DOM which I can't remember (?) -

These limitations suggest that it may also be necessary to provide
additional implementations of an autocomplete widget in Ur/Web which do
*not*
rely on on HTML5 <datalist>.

###
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.impredicative.com/pipermail/ur/attachments/20150713/c5d6cc08/attachment-0001.html>