Conceptual Overview

Hyperfiddle lets you make internal apps (dashboards and tools) in Datomic really quickly.
We accomplish this by specifying the maximum amount of behaviors from the smallest spec possible. The goal is to minimize the code surface area of CRUD apps down to the smallest possible specification of data and code, and thus build a tool that lets us move as fast as possible.
The big idea here is that there is no backend coding. You spec your API and the backend is done. There’s a user interface out of the box. The client/server data sync is taken care of, you’re not coding HTTP requests.

System components

It is a server, like nginx or apache. You run the server, then open Hyperfiddle in your web browser. First you configure URI to any Datomic database. Then start making Datomic queries right away. start querying Datomic right away in your web browser.

Data model

Hyperfiddle is like HTML for user interface and API.
API spec is like GraphQL (but an actual query for a concrete database)

EDN data model specification

  • Datomic query
  • view
  • links to other fiddles
Datomic data model
  • pull
  • :find
  • schema
  • anchors
  • buttons
  • portals
  • link/path
  • link/txfn
  • link/class
Buttons submit forms and invoke database transactions (a Clojure function). Works the way HTML works – forms and links

What is driven by the core spec

First lets show what a simple fiddle looks like
  • Working app, xray mode
  • Forms reflected from Datomic schema
  • routing
  • user interface scaffolding out of the box
  • managed serverless backend and database
Why Datomic?
  • Serverless
  • Immutable
  • Designed for functional programming
  • 96%
  • Do all the same stuff as SQL but simpler and no moving parts. "Solid state database"

Specification is open to extension

See how out of the box you get free user interface scaffolding. We say “scaffolding” because this UI is just a jumping-off point. Customize it with ClojureScript, or throw the whole thing away and bring your own frontend.
  • :fiddle/renderer – view, a ClojureScript Reagent function
    • For the time being, no Javascript
    • Hyperfiddle is about immutability and ClojureScript has much richer idioms for this
  • :fiddle/markdown
  • :fiddle/cljs-ns

Managed I/O

  • amazon
  • facebook
  • REST CRUD app
  • APIs

GUI for manipulating fiddle EDN faster

  • Your app on the left, Hyperfiddle IDE on the right
  • Staging Area
  • data/edn/view
!render[(vector :video {:src "//"})]
0m20s Modeling a form. Note Datomic schema in the bottom right.
(you can drive it with EDN, of course)

Hypercrud – open source web framework

This is powered by the open source Hypercrud web framework.
  • Tooling first
  • Hyperfiddle is the flagship product built with Hypercrud. Hyperfiddle is entirely built in userland Hypercrud, it is nothing but Datomic queries, Reagent views and CSS.

What can you make?

Triage, for a guide or something

  • Tables have a :head and a :body. Forms do too, but sideways. Structurally equivalent

API spec is like GraphQL (but an actual query for a concrete database)

  • All fiddles have a Datomic query
  • Datomic is a database, immutable model, specifically designed for functional programming
  • Hyperfiddle is functional programming and needs first-class immutabilty in the database
    • Cannot be built on mutable datastores like Postgres, MongoDB, Neo4j
    • Leaky database abstraction is the deep reason that all "app-builders" fail
0m20s Datomic is like GraphQL

Select options are iframes with style

Any UI can be broken down into fiddles

HTML has scaled amazingly well to vastly more complicated applications than it was originally intended for. We designed Hyperfiddle to scale APIs the same way. Efficient composition of APIs has profound implications.

A 25-screen app built for a client

Back in Q1'18 we built this MVP in 2-3 man-weeks? Would take less than a week, now.
  • user accounts and profiles
  • user onboarding and other workflow states
  • business logic
  • hooks for third-party integrations (identity verification, bank verification, blockchain wallets)
  • customer service dashboard
  • admin interfaces
Essential complexity is:
  • Understanding the requirements
  • Modeling the database
  • Figuring the queries
Hyperfiddle provides sensible defaults for everything else, which you can customize with code, later.

Automatic backend and web service

  • Every fiddle is URL addressable
  • Every fiddle has a UI view, an Admin view and an API view
  • The API view shows what information was sent over the wire.
Your fiddle API view will not necessarily match the information in your web browser's network inspector
  • auto UI, if you are using it, also depends on your fiddle metadata, your Datomic schema, etc.
  • hyperfiddle editor (toolbar) also has dependencies
  • transport is optimized
We compose (batch) your fiddle APIs with any other APIs where sensible. That is deeply interesting so I will say it again:
Hyperfiddle APIs compose
(automatic batching is a byproduct of this). A good way to intuit this is to recognize that the server rendered text/html representation of your API composes too.
API view shows set of API endpoints that were automatically loaded for this page
Hyperfiddle's data loader
  1. Traverses the fiddle-graph to find the connected components for this page
  2. Runs the queries, accumulating a resultset
  3. syncs them to the view
  4. refreshes the right subgraphs when a dependency changes
This is all automatic, and it's faster than you could have coded it by hand (like an optimizing C compiler).

Managed cloud platform, managed database, no ops

  • designed from day zero for Datomic Cloud Ions
  • hyperfiddle.jar slots right into your own Datomic Cloud Ions
  • or run it as a Pedestal service, or a Node/Express.js service, or both, or whatever
  • all infrastructure will soon be open source (we are decoupling from our own cloud in Q3)

UI coding is Real Functional Programming

  • All fiddles have a frontend view
  • For the time being, this is ClojureScript only, no Javascript
  • Hyperfiddle is about immutability and ClojureScript has much richer idioms for this
value renderers are just functions

Markdown is first class, because good software is self-documenting

  • AWS UI is 50% inline docs, 40% tables and forms, 10% custom stuff
  • Format text cleanly and rapidly without thinking about HTML
  • PMs can edit the copy, live in the app, without risk of breaking things
when doing cookie-cutter things, markdown constrains the surface area of what can break
I am a strong Clojure/Script developer, yet still I sketch faster in Markdown.
Is there code here? Yes of course, there's always a little bit. Have your web designer google "how to format a date in hyperfiddle" and copy/paste. There's not a lot that can go wrong.

Fiddle graph

Your specification captures API and it's interdependencies (query-X depends on query-Y and query-Z) as a graph. We call this the fiddle graph.
Hyperfiddle : fiddle graph :: Chrome : HTML
The page (top left) is actually a composite; here it is exploded into the underlying graph.

Technology – how it works

Immutability makes data loading really fast
  • Your user interface essentially evaluates as a stored procedure in the database, which means exact and optimal data responses
  • After data is loaded, browser retraces on the frontend to render the views
  • Arbitrarily deep nesting, recursive super-forms
    • no abstraction loss
    • no object/relational impedance mismatch
    • no performance loss
    • no JOIN pain
    • no REST client/server round trips
    • no async / latency / failure
Hyperfiddle’s I/O layer is intelligent.
  • API-as-graph means data sync is just a graph partitioning problem – find the connected components
  • Fiddle graph is abstract data, so concrete I/O implementation is unspecified
  • Business logic decoupled from I/O
  • Like an optimizing compiler, it can optimize in ways that hard-coded I/O cannot
For more tech stuff, see Technology.
  1. Getting Started
  2. Overview
  3. Tutorial
    1. Simple blog
    2. Seattle
  4. Concepts
    1. Design
    2. Technology Vision
    3. Data model
    4. Semantics
    5. Staging area
    6. I/O Runtime
    7. Transactions
    8. Foreign integrations
    9. ctx
  5. Guides
    1. Links
    2. Transactions
    3. Dependent queries
    4. Iframes
    5. Select options
    6. Semantic admin console
    7. hyperfiddle.ui
    8. Markdown
    9. CSS
    10. Users and permissions
    11. Migrations
    12. Bulk import
  6. Triage
    1. Architecture braindump
    2. Technical braindumps
    3. hyperfiddle.jar