[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?

[ml at extensibl.com]

Stefan, it seems that you have done some research already.
Why would you not start writing the widget?

It is likely, that the easiest solution will be to implement
everything in Ur/Web, without third-party libraries.

Best regards,
Alex


On Mon, Jul 13, 2015 at 04:02:24AM -0300, Stefan Scott Alexander wrote:
> [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>.
> 
> ###

> _______________________________________________
> Ur mailing list
> Ur at impredicative.com
> http://www.impredicative.com/cgi-bin/mailman/listinfo/ur