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 > [email protected] > http://www.impredicative.com/cgi-bin/mailman/listinfo/ur _______________________________________________ Ur mailing list [email protected] http://www.impredicative.com/cgi-bin/mailman/listinfo/ur
