Hyperfiddle · Docs · Community · Company · Github

Hyperfiddle (beta)

Interactive Datomic micro-apps on a managed serverless platform

Get Started

A simple fiddle

Fiddles have a Datomic query which fetch data from their database. Datomic "pull" fetches a single record.

Result:

email^†

name^†

age^†

Live Hyperfiddle editor:

pull^†

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

email^†

alice@example.com

name^†

Alice Doe

age^†

birthdate^†

1989-10-2

Live Hyperfiddle editor:

pull^†

cljs eval failed

schema: $

markdown^†

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

email^†

name^†

age^†

birthdate^†

Live Hyperfiddle editor:

pull^†

cljs eval failed

schema: $

markdown^†

cljs eval failed

renderer^†

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

email^†	name^†	age^†	birthdate^†
			1989 Oct 02	edit
			1970 Oct 18	edit
			1985 Sep 21	edit
			1987 Jan 01	edit
			2018 May 26	edit

Live Hyperfiddle editor:

query^†

cljs eval failed

schema: $

markdown^†

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

email^†

name^†

age^†

birthdate^†

Would you like a tee-shirt with that?

shirt-size^†

Live Hyperfiddle editor:

pull^†

cljs eval failed

schema: $

markdown^†

cljs eval failed

links^†

{:link/rel :options, :link/path "0 :reg/shirt-size", :link/fiddle :builtin/idents-by-ns, :link/render-inline? true, :link/formula "(constantly \"shirt-size\")"}

Hacked link renderer – due to an issue in the live embed, the links are shown as EDN until we fix it 😞. However, you can alt-click any pink box to navigate, including this one - if you load this embed directly in its own tab, you can stage changes that way which will work. Try it out!

: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

Continue tutorial →

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.

https://github.com/hyperfiddle/hyperfiddle