:index
Login

Hyperfiddle (beta)

Interactive Datomic micro-apps on a managed serverless platform

A simple fiddle

Fiddles have a Datomic query which fetch data from their database. Datomic "pull" fetches a single record.
Result:
Live Hyperfiddle editor:
cljs eval failed
schema: $
  • Try uncommenting :reg/birthdate and re-ordering the attributes.
  • Note the widgets are aware of the Datomic type, which is shown in the label tooltip.
  • Click $ to see the Datomic schema which defines the type. In Datomic, "$" is the default database's name.

Progressive enhancement

The default fiddle renderer uses markdown, because inline documentation should be really easy.
Result:

My first fiddle

alice@example.com
Alice Doe
28
1989-10-2
Live Hyperfiddle editor:
cljs eval failed
schema: $
cljs eval failed
  • Try changing str to pr-str on each field, especially :reg/birthdate
  • If you want to clear your changes and start over, clear the staging area – the yellow button in toolbar.
  • Ack, there is a bug! Syntax errors can break the live refresh – toggle data/view in the toolbar to force a refresh.

ClojureScript

Fiddles have a :fiddle/renderer, a Reagent expression for the fiddle. The renderer can render the markdown, or ignore it. The markdown is just really convenient for sketching really fast.
Result:

My first fiddle

Live Hyperfiddle editor:
cljs eval failed
schema: $
cljs eval failed
cljs eval failed
  • Comment out line 4 and uncomment line 5 to see the raw markdown.
  • Line 6 will show you the database result as EDN.
  • All fiddles get a default renderer, and some default markdown.
  • To revert something to the default, clear it.

Queries and Links

  • Fiddles compose recursively
  • Fiddles have links to other fiddles (a graph, like the world wide web).
  • Three types of link: anchor, embed, and button (like HTML anchor/iframe/form)
  • Hyperfiddle provides default links for basic CRUD structure
Result:

simple-query

Live Hyperfiddle editor:
cljs eval failed
schema: $
cljs eval failed
  • Links encode parameters into URLs
  • Hover a link to see any parameters in a tooltip.
  • Middle-click the edit anchor to go there in a new tab.
  • All fiddles are URL addressable, including embeds. To drill into an embed, alt-click the pink box.

Select options

Selects are simply embedded fiddles with a renderer.
We've added a new attribute: :reg/shirt-size, and a link to the options query.
Result:

Event registration form

Would you like a tee-shirt with that?
Live Hyperfiddle editor:
cljs eval failed
schema: $
cljs eval failed
  • :link/rel :options is a semantic hint to render as options and work are like same in HTML.
  • Try clearing the link/rel and see how it reacts.
  • :link/path "0 :reg/shirt-size" associates the options in the right place

Next up:

  • Dynamic dependencies
  • Database transactions
  • Users, accounts and security
  • Foreign integrations
  • Fiddle Graph and I/O Runtime

Example apps

Hyperfiddle scales gracefully from tiny static sites, to sophisticated dashboards.

hyperflddle.cljc

Clojure web infrastructure for managed data sync
The hardest part of web dev is I/O: data sync between database, various services, UI and then back to the database. An async, slow, failure-prone concern wired throughout the full stack, and the reason why we all code the same web boilerplate over and over again, year after year – a collosal, industry-wide failure to abstract.
Hyperfiddle makes data-sync invisible with immutability. If React.js is managed DOM, Hyperfiddle is managed database and network:
  • Fiddle graph captures API inter-dependencies as data (query X depends on queries Y and Z)
  • Fiddle graph captures application essense (API, UI, database) as one concern – no frontend/backend dichotemy
  • Managed data sync – Userland is not concerned with effects, async, errors or latency
  • Transport layer independence – swap transport stratgies (e.g. REST, websocket) without changing your app
  • Optimizing I/O runtime — dynamically adjust transport strategies to balance caching and latency
  • Platform independence – run on any platform (e.g. browser, Node, mobile) without changing your app
This foundation permits us to climb a few rungs higher on the ladder of abstraction.
  • Data driven UI: automatic admin dashboards that just work
  • Progressive enhancement – view concerns are optional and layered on top
  • Doesn't break the web – links work, tabs work, back button works
  • Live programming "REPL" for web development
Framework or library? Neither: Hyperfiddle is like an AWS product, it's part of your stack to be integrated with. There is a server (like apache or nginx) and a client library.