dustingetz

Live-coding demo of #Hyperfiddle UI modeling language

• forms, tables, hyperlinks, routing
• queries on backend, rendering on frontend
• dynamic query dependencies
• WYSIWYG in-browser live editor

Strong composition – it's a functional expression! Compiler-managed network

dustingetz

Direct recursion over file system from the frontend — Electric Clojure (2022 June)

This video demonstrates traversing a filesystem tree from the frontend. The filesystem tree exists only on the server, and the HTML view exists only on the client. Nonetheless, we are able to unify the query/view logic into a single recursion in the simple, direct style of PHP, despite network. The Electric compiler automatically coordinates fine-grained reactive network sync.

Code note: in this video from last year, ~@ is the legacy syntax for client/server transfer, it has since been superseded by e/client and e/server markers.

20220621.photon.treeview.with.managed.nework.mp4

• No API, no client side database, no frontend state at all (except DOM)
• Literally all accidental complexity GONE

dustingetz

virtual scroll over node_modules v2 — Electric Clojure

• Direct filesystem reads from the view
• Direct function composition in the style of PHP, despite network
• No API, no client side database, no frontend state at all (except DOM), no frontend/backend.
• Literally all accidental complexity GONE
• 100% of server data sync is managed by Electric
• Rows have arbitrary server local data access, here querying file metadata #clojure
• Optimized and no scroll jank – DOM elements are fixed in place and reused

dustingetz

Photon demo: database branching (time travel)

• This demo uses DataScript's API for speculative transactions, not sure if can be done with sql read transactions.
• DataScript is on the server; code is network-transparent.
• 100 LOC for everything (table, query, popover, css, page)

20220910.branched.popover.staging.area.2.mp4

dustingetz

Photon demo: infinite scroll over node-modules

• 100% of server data sync is managed by Photon
• Rows have arbitrary server local data access, here querying file metadata #clojure

20220906.infinite.scroll.node.modules.mp4

Below is the approximate code (I've removed all the table/file stuff to just see the essential scroll logic)

dustingetz

(ns dustingetz.datafy-fs
  "nav implementation for java file system traversals"
  (:require [clojure.core.protocols :as ccp :refer [nav]]
            [clojure.datafy :refer [datafy]] ; tests only
            [clojure.spec.alpha :as s]
            [contrib.assert :refer [check]]
            [dustingetz.datafy-fs :as fs]
            [hyperfiddle.rcf :refer [tests]]
            [clojure.java.io :as io])
  (:import [java.nio.file Path Paths Files]

dustingetz

TodoMVC Composed (it's just a for loop!!!) — Electric Clojure

• An early demonstration "Compiler Managed Network" and the extreme dynamic composition it makes possible
• TodoMVC Composed merely calls the previous TodoMVC function inside a for loop.

20220822.Todomvc.Composed.mp4

dustingetz

10k dom elements with Photon

• Plus free multiplayer of course
• 25 LOC of which 48% are requires, CSS and whitespace. Count it!

20220823.10k.dom.elements.pixel.game.multiplayer.mp4

dustingetz

TodoMVC, with a twist! — Electric Clojure

1. it's multiplayer! 0 LOC cost
2. state is durable! (server side database) 0 LOC cost
3. See those pending spinners? We've added a server delay to demonstrate managed load states.

20220817.todomvc.mp4

Electric is a "multi tier" Clojure/Script dialect for full-stack web application development. It uses macros to let you interweave client and server code in a single .CLJC file, so you can define a full-stack frontend/backend webapp all in one place. Electric is designed for rich dynamic applications with reactive user interfaces and complex frontend/backend data sync requirements.

dustingetz

(ns user.demo-5-todomvc
  "Requires -Xss2m to compile. default 1m JVM ThreadStackSize is exceeded by photon compiler due to large macroexpansion
  resulting in false StackOverflowError during analysis."
  (:require #?(:clj [datascript.core :as d])
            [hyperfiddle.photon :as p]
            [hyperfiddle.photon-ui :as ui]
            [hyperfiddle.photon-dom :as dom])
  #?(:cljs (:require-macros user.demo-5-todomvc)))

(defonce !conn #?(:clj (d/create-conn {}) :cljs nil))       ; server