Fork me on GitHub
#hyperfiddle
<
2023-11-09
>
wei07:11:47

anyone have tips on organizing complex uis so they compose well? also, higher abstractions for building forms with validation? (currently using atoms for individual fields) i suspect HFQL will help with the second one, but we'll have to wait for that i guess

xificurC08:11:15

are you struggling to compose UI components? Electric's main primitive is a lambda (e/fn), which should compose out of the box. re forms with validations - we don't have demos to show here yet as most of these were client specific. Using an atom per field works for field-level validation, you could also use an atom per form for form-level validation

wei09:11:46

yes I'm really enjoying being able to compose UI with functions. I'm trying to figure out routing at the moment which I've heard folks use reitit for. If anyone has a minimal routing example I'd like to see it

wei09:11:49

Also for managing app data is it best practice to use atoms scattered around? Or a client-side app db? Or is it recommended to use a streaming database and be reactive on the server-side db?

xificurC09:11:32

if you search in:#hyperfiddle reitit there's a setup from @U050CJFRU and @U06B8J0AJ

🙏 1
xificurC09:11:10

there is no best practice, all of it works. Depends on your requirements really. Do you need data to stay on the client? Do you need it to survive machine restarts? Should the data be visible across multiple tabs? Multiple devices? Multiple users?

wei09:11:16

I suspected that might be your answer 😅 guess I'll need to experiment. Thanks for the help!

xificurC09:11:44

haha sorry!

❤️ 1
wei09:11:52

Need persistence so will need a server side db

wei09:11:15

I'm excited to try out Rama, but planning to use it for a hobby project first

xificurC09:11:20

yeah, electric should work great with rama. Once differential electric lands it will fit like a glove

🤞 4
👏 2
telekid13:11:27

It would be nice to have editor plugins that highlighted server->client transfers to help prevent accidental secret leaks:

(e/defn Example
  []
  (e/server
   (let [secret hunter2]
     (e/client secret ;; 'secret' would be highlighted
               ))))
I could even imagine a linter rule that required one to highlight transferred values somehow (e.g. a reader tag, a casing convention, etc.)

xificurC13:11:23

given enough resources (money, time) I'd build an electric IDE with many more features... Well, pulling my head back from the clouds, maybe one could extend clj-kondo or tree-sitter to get some functionality. I also wrote a https://gitlab.com/xificurC/hf-electric.el/-/blob/master/hf-electric.el?ref_type=heads for emacs to add a colored background to client/server code. To programmatically prevent leaks one can hold secrets in a non-transferable value, something like

(ns secret)
(deftype Secret [v])
(defn seal [v] (Secret. v))
(defn open [s] (.-v ^Secret s))
and use as
(e/server
  (let [secret (secret/seal "hunter2")]
    (e/client secret))) ; <- one will see a transfer warning and receive nil

💡 1
🎶 1
😮 1
telekid14:11:44

ah, very clever!

telekid14:11:15

yeah and now that I think about it a bit more, it isn't clear statically (without compilation, at least) where transfers happen

xificurC15:11:49

our analyzer infers transfer points without compilation. In theory the analyzer could in the future provide the analysis information through some API. Not on the roadmap

👍 2
Dustin Getz19:11:52

if this is important to you, wrap secrets in a deftype and do not install a serializer for the deftype

Dustin Getz19:11:23

or write secret processing code in a .clj file

👍 2
henrik14:11:46

What’s the difference between e/inhibit and e/discard?

👀 1
xificurC15:11:45

you can use e/discard for now, the difference is only interesting outside of electric. At the missionary layer e/discard is a flow of nils whereas e/inhibit is a flow that only emits a single nil

henrik15:11:49

Ah, interesting, thanks for the explanation.

Dustin Getz15:11:24

e/inhibit is not useful in electric v2

henrik15:11:45

Gotcha. Is it actively harmful?

Dustin Getz15:11:07

or v3 either, it's a temporary utility for a client project that pulls forward some differential stuff into electric v2

👍 2
avocade08:11:59

Nice, this caught my eye just yesterday as well. Have to remind myself that alpha means API will change a lot.