Legacy – Hyperfiddle github copy, Dec 2017

Hyperfiddle data model

Hyperfiddle interprets fiddles which form a graph. The fiddle graph captures API inter-dependencies as data (I need query-X and also query-Y which depends query-Z). This graph lets the I/O runtime understand the structure and data flows of the application, which permits interesting optimization opportunities.
  • Fiddles have a query, a view, and links to other fiddles
  • Three types of link: anchors, iframes, and buttons


All fiddles are url addressable, as text/HTML (application) or application/transit+json (API). If the query takes input arguments, it's the link's job to decide the parameters with a forumla and put them in the url. Buttons execute effects which are specified by transaction functions. Formulas and tx-tns for basic CRUD scaffolding are automatic, you get a "CRUD admin dashboard" as a starting point and sculpt it from there.
Links (graph edges) are pink. Select options are iframes with style. Live fiddle
:link/rel has semantic meaning like html, :options matches up with the :db.type/ref renderer which is a data driven extension point. If you override the :db.type/ref renderer, you may care to use :link/rel :options as semantic hint to render like select options, or not.
[:link/rel :hf/new] is a system provided button. Hyperfiddle provides sensible default anchors & buttons for basic CRUD. The ident :hf/new is semantic; the system knows to auto-generate the trivial transaction function to make a Datomic transaction for the new record. We have shadowed the autolink here in order to specify the popover fiddle's d/pull, which is used to generate the form for a new record. Transaction functions are coded in CLJC.
:link/formula is how Datomic query arguments are filled at the link site. Noteworthy: (fn [ctx] @(contrib.reactive/cursor (:hypercrud.browser/data (:hypercrud.browser/parent ctx)) [:reg/gender])) (this is cumbersome and will get simpler it should reduce to :reg/gender). Why is it reactive? Because in a live UI, if a dependency updates then the arguments need to be recomputed and the query re-run. Why shim a contrib.reactive namespace? Formulas also evaluate inside Datomic Peer, to coordinate data dependencies before the downstream API consumer asks for them. Hyperfiddle has enough semantic hints to auto-generate most formulas, this one is specified to declare the dependency.

Reflective (data-driven) user interface

All Hyperfiddle APIs must resolve to a single function. The fiddle graph interpreter function is Hyperfiddle Browser. You can of course provide your own function, but the Browser is special because it is a hypermedia function:
The Browser is coded in CLJC and evaluates simultaneously in jvm, browser and node, which is how the service knows in advance what the UI will ask for.
Views are rendered through eval, progressive enhancement at any layer
  • Datomic type #{string keyword bool inst long ref ...}
  • Datomic attribute #{:post/content :post/title :post/date ...}
  • Table, form, label, value, etc
  • Markdown extensions
  • Fiddle (page) renderer
  • Hyperfiddle Browser - you can replace the interpreter itself

TodoMVC with a markdown fiddle renderer:

This list item template is defined by markdown extensions. Inject view-specific renderers through markdown !result[foo.bar/my-table-renderer], or even your own markdown implementation with eval. http://sandbox.hyperfiddle.net/:tbd!all/

TodoMVC default UI, no progressive enhancement:

It is a fully functional application though, this view always works even when you break your custom views

Reagent fiddle renderer for the blog:

On the left, we see the fiddle's final rendering. It is no longer a form at all, we've rendered the data as HTML. On the right, we see the Reagent expression. The data/view toggles the fiddle renderer, so you can always get to the admin dashboard.

Attribute renderer:

On the left, we see :post/content attribute is a Datomic :db.type/string, being rendered as a CodeMirror with markdown syntax highlighting. On the right, we see it wired up. Renderers can be any ClojureScript expression and are eval'ed at runtime.

Hyperfiddle is built in Hyperfiddle

Since hyperfiddle apps are graphs, it is straightforward to build an editor for those graphs, almost trivial. 90% of the work is a single reagent view. The backend and API is auto-generated like any other hyperfiddle app.
The radio control on :fiddle/type is a custom attribute renderer, qe-picker-control, which is eval'ed at runtime. :fiddle/query's custom renderer is a CodeMirror. The fiddle's own layout (including button labels and local state) is a fiddle renderer, about 100 lines of Reagent markup eval'ed at runtime. Each menu is a link to another fiddle, with its own data dependencies and renderers.