[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
