Hyperfiddle · Docs · Community · Company · Github

Turn Your Databases Into Dashboards

Interactive web framework for Clojure/Script and Datomic

A web framework that is different

Hyperfiddle is a re-think of what web programming could be like with Clojure everywhere and Datomic at the center. We think this combination has disruptive potential to do things fundamentally simpler than the way we do things today. The end result is a web framework which is maximally data-driven to, we think, an unprecedented extent.

Hyperfiddle lets programmers without web experience make web dashboards (full-stack and API), because Hyperfiddle handles the hard part: data-sync. There is no “backend” or “frontend”, only logic: portable, functional, data-oriented, simple and easy. A smart child can program like this.

Hyperfiddle has innovative properties that derive from:

immutability in the database
storing functions in databases instead of files
entire application codebase portable and running everywhere – database, jvm, node, edge, browser
and of course Clojure itself – the calculus of data.

Hyperfiddle dances dangerously close to past failures to abstract data sync — for example the failures of ORM, “the Vietnam of computer science” — but as you can see, those failures pre-date Datomic.

Connect to a Datomic URI

and start making fiddles in real time. How quickly can you think Datomic?

Interactive query explorer

Fiddle with queries in the live app. Live schema editor too!

Experiment fearlessly

Datomic's git-like staging area lets you revert when you make mistakes.

Progressive enhancement

Convention over configuration. Low-code at the start, gracefully scale into proper software later.

Designer friendly

Views are as simple as possible, just Reagent/React and CSS.

No frontend/backend dichotomy

No HTTP requests and headers, routing, cookies, services, database access, ORM, SPAs, PWAs, DOM, SSR, XHR, CDN, etc.

Fiddles are real software

Fiddles are secure multi-user CLJC applications and can do anything real software can do.

Invisible data sync with immutability

If React.js is managed DOM, Hyperfiddle is managed database and network.

Doesn't break the web

Links work, tabs work, back button works.

A simple fiddle

Fiddles have a Datomic query which fetch data from their database. This example query is a Datomic "pull", which fetches a single record. This fiddle's view here is automatic – it is data-driven from Datomic schema, which captures exactly the right information necessary to do this.

Result: EDN?

email^†

name^†

age^†

birthdate^†

Interactive Hyperfiddle editor: EDN?

pull^†

[:db/id 
 :reg/email 
 :reg/name 
 :reg/age 
 :reg/birthdate]

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 view uses markdown, because good software is self-documenting, so inline documentation should be easy.

Result: EDN?

My first fiddle

email^†

alice@example.com

name^†

Alice Doe

age^†

birthdate^†

1989-10-2

Interactive Hyperfiddle editor: EDN?

pull^†

[:db/id :reg/email :reg/name :reg/age :reg/birthdate]

schema: $

markdown^†

The !field directive is for customizing forms. The argument in brackets, e.g. str, is the value renderer, a ClojureScript function.
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.

Result: EDN?

My first fiddle

email^†

name^†

age^†

birthdate^†

### My first fiddle

!result[]

{:db/id 17592186046533, :reg/email "alice@example.com", :reg/name "Alice Doe", :reg/age 28, :reg/birthdate #inst "1989-10-02T00:00:00.000-00:00"}

Interactive Hyperfiddle editor: EDN?

pull^†

[:db/id :reg/email :reg/name :reg/age :reg/birthdate]

schema: $

markdown^†

renderer^†

(let [{:keys [:hypercrud.browser/result
              :hypercrud.browser/fiddle]} ctx]
  [:div {:class class}
   [hyperfiddle.ui/markdown (:fiddle/markdown @fiddle) ctx]
   [:pre (:fiddle/markdown @fiddle)]
   [:pre (with-out-str (cljs.pprint/pprint @result))]])

#_ is a structural comment. Try uncommenting lines 5 and 6.
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, button, embed (like HTML anchor, form, iframe)
Hyperfiddle provides default links for basic CRUD structure. The below links are automatic.

Result: EDN?

Admin dashboard

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

Interactive Hyperfiddle editor: EDN?

query^†

[:find 
 (pull ?e [:db/id :reg/email :reg/name 
           :reg/age :reg/birthdate])
 :where 
 [?e :reg/email]]

schema: $

markdown^†

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 the third type of link: embeds. We've added a new attribute: :reg/shirt-size, and a link to the options query.

Result: EDN?

Event registration form

email^†

name^†

age^†

birthdate^†

Would you like a tee-shirt with that?

shirt-size^†

Interactive Hyperfiddle editor: EDN?

pull^†

[:db/id :reg/email :reg/name :reg/age
 :reg/birthdate :reg/shirt-size]

schema: $

markdown^†

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\")"}

Due to an issue in the live embed, the links are shown as EDN until we fix it.

:link/rel :options is a semantic hint for the view (like HTML rels). If you were to clear the link/rel (which you can't due to the issue), the select would go away.
:link/path "0 :reg/shirt-size" positions the link in the right place
Use the !browse directive to render an embed like an iframe: !browse(:options 0 :reg/shirt-size).

Next up:

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

Continue tutorial →

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 service 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

Framework or library? Neither: Hyperfiddle is more like Apache or Nginx, it's part of your infra stack. There is a server library for making custom servers (e.g. integrations and control over data sync) and a client library for talking to it.

https://github.com/hyperfiddle/hyperfiddle