@hmaurer I have a few more question to really get to the bottom of this, but really don't want to stretch your kindness too far, so please don't feel pressured to answer if you're not inclined. 1. Cache invalidation configuration for the Optimistic Updates feature: For a UI component that is fully snappy, I would need to pull in a lot of data from the server in the manner of a Query on the component level. as far as I understand it, the Query is only run when the component is rendered, so say when the app first loads, this particular UI component is not yet in active state, so no Query will be sent. so here It really matters to me how the cache works: the UI component can be mounted and unmounted willy-nilly as the user decides to enable a widget and disable it. In this case, is it configurable by me to decide when the cache is invalid? i.e. I get to configure when the UI component can use the cache (if the data it requires was last fetched within the last 60 seconds) and when it invalidates the cache and decides to fetch the whole data again. the point here is that fetching the data on every mount/re-mount of the UI component is going to feel sluggish. 2. Performance considerations of memory space in the browser: how many entity nodes that refer to each other in a more or less Dense graph can I store in-memory? this is probably something that changes from browser vendor to another and is highly variable. 3. Performance considerations of entity node access: since an entity db (the value in the app db map that belongs to the entity key (e.g. :Person { 1 {...} 2 {...} ... })) is a flat map as described in 2.8. The Secret Sauce – Normalizing the Database. from my understanding, lookup performance of read from a persistent clojure map is O(log32N) only when the map is a balanced branched tree. is that understanding incorrect somehow? well the implication in my use-case is that lookup can be quite costly, meaning that looking up a node in the entity db might hang the UI while looking it up. am I wrong somehow?

@icyiceling184 no worries at all; any specific questions are most welcome 🙂 I will reply to (1) tomorrow morning as it’s getting late here. The other two answers are shorter: 2. I wouldn’t worry about that. Since the in-client db acts as a cache, it should only contain roughly what appears (or appeared) on screen. This should be a relatively small amount of data; nothing to cause memory concerns. Of course there might be exceptions, but I doubt your use-case is one of them. 3. I am not sure about the lookup performance of maps in Clojure, and even less so in ClojureScript, but this isn’t something I would worry about. The cost of map lookups in the in-client db likely has a very minor impact on rendering performance. Worrying about this is well beyond micro-optimisations, imho.

@hmaurer sure! looking forward to that reply on (1) Regarding (2) the thing is that this widget is actually somewhat special use case: it's a search bar that traverses a graph starting either from some root node or a specific node (depending on the search bar mode).

so really the amount of data that this widget needs to traverse is non-trivial

It should be north of 100K nodes at the very least.

the idea is to make this search bar trigger traversals on the graph interactively as the text changes on the search bar, and output the collected results of the traversals in a list underneath.

I guess since it's quite a rare use case I will have to give it an actual try and test the performance for myself.

@hmaurer I had a blast learning from you, thanks again and hope to get to talk to you once more. 🙂

wow the fulcro-todomvc example repo is so cool! following the code flow from client_setup to client_main to ui to api helped me learn a lot about the architecture. in particular, seeing the mechanism for a parent component to refer to what a child component requires for its :initial-state and :query clarifies for me the comparison David Nolen made between the way things like Redux / Re-frame / Elm architecture does state management in waterfall data flow (data being drilled from above through props, being managed at some component higher up on the UI tree), and the way things like Om.Next / Relay / Falcor (i think?) do things which is that every parent component specifies the data it needs (initial state or query) but also makes sure to consider the data that any of its child components need and passes it to them via the props mechanism, basically data flow from the leaf components to the root component, maybe ground-up data flow i'm still far from having a good understanding of things, but at least feeling that i'm making progress with the help of a working example. 😀

@icyiceling184 hmmm I would need more information on exactly what you are trying to do to give precise advice, but my feeling is that if you are trying to search through a graph with 100k nodes in real-time in the browser you will have performance issues unless you use some sort of index.

as in, if you shove 100k nodes in the denormalised database and try to traverse that on every keystroke I wouldn’t expect it to be smooth. If you build a smart index and use that to perform search queries then perhaps it will be fast enough to be smooth. If it’s not fast enough even with an index and you absolutely must search that graph in that specific way on the client then I would look into using a service worker to do the search asynchronously and display a nice progress indicator to the user.

And yes you seem to have a good grasp of the way initial states / queries compose 🙂 Have you watched David Nolen’s “Demand-Driven Architecture” talk? If you haven’t, I recommend it? https://www.infoq.com/presentations/domain-driven-architecture (it was recommended to me by @wilkerlucio)

And now replying to (1) from yesterday: > as far as I understand it, the Query is only run when the component is rendered, so say when the app first loads, this particular UI component is not yet in active state, so no Query will be sent. Incorrect. Roughly speaking, when the Root component is rendered its query (which composes all of it children’s queries) is ran against the in-client db. This does not send any query to the server. It is your responsibility, as a developer, to call (df/load ...) when you see fit to send a query to the server and load the data in the in-client db.

> In this case, is it configurable by me to decide when the cache is invalid? The most obvious way in which the cache would become invalid is when you perform a mutation (say, mark a todo item as completed on a todo list). You would then update the cache in the mutation’s code. The cache could also become invalid over time, if you expect the data to change on the server regardless of whether the user performs mutations from his currently opened client. There are many ways to deal with this. You could trigger a new load on every page change for the page’s data, regardless of whether it is already in the cache or not. You could trigger a new load only if the data in the cache is “outdated” (e.g. has been there for longer than X minutes). You could trigger a new load every X seconds (a technique called “polling”). You could push notifications from your server when data changes over websocket and update the cache then, etc…

As they say, cache invalidation is one of the two hard problems in computer science 😬

I feel like this question got buried, so asking again. How does Fulcro correlate a client side mutation to a server side one? Is it just by the mutation name? I have a rather unconventional, as in not using lein new fulcro, application directory structure. Right now mine more like src/client/${project_name}/mutation/ or src/server/${project_name}/mutation/. So if there is some directory magic or namespace magic going on where the client “knows” where the server is, I’d like to try and set that up

@njj ah sorry, I thought you got an answer to this. It’s correlated by qualified name (mutation name + namespace) afaik.

in the lein template you’ll see that the same namespace is used for client and server mutations, even though they’re placed in different files (clj and cljs)

ok interesting, so they are both (ns project.model.user) - but because one is clj and cljs they don’t have a collision

yeah

and then fulcro recognizes these as being related

word

So will I be able to namespace my mutation files in a similar manner, even if they are in different directories?

@njj no; the directory has to correspond to the namespace. There might be another way to correlate client and server mutations, but that’s a question for @tony.kay I am afraid

cool thanks

@hmaurer thanks for the detailed answer, really helps grok the machinery at play here. I can already see how I'll be going back and re-reading that answer a few times more before fully making use of it. @njj sorry for accidentally burying your question 😅 thanks for raising it again and giving me the chance to see how that first assumption I had on it was verified by the more experienced @hmaurer to be the way it goes, i.e. the clj, cljs files containing the mutations are both using the same namespace as a convention.

@icyiceling184 out of curiosity, what are you building and what brought you to Fulcro? 🙂

hi! do you know of any examples on how to generate a "production build" from a Fulcro project? basically for testing the generated JS with Chrome Lighthouse Audit.

@jakobssonrobin hello! are you using the latest lein template? (with shadow-cljs), or something else?

yes with shadow-cljs 🙂

shadow-cljs release <build-id> I think

thanks, I'll try that 🙂 :thumbsup:

@njj you can give a defmutation a fully-qulified symbol if your nses on client and server are not the same. defmutation adds the current ns if you don’t ns the kw, so it acts like defn. Doing so lets you tell the IDE that defmutation works like defn, and then you get source nav. defmutation just outputs a defmethod. Mutations all run through on multimethod named mutate in the mutations ns…you can just write multimethods if you wanted (as described in the book), but multimethods lack decent nav support, which is why the macro exists.

(m/defmutation x/y [params]
  (action [env] ...))

;; same as

(defmethod m/mutate 'x/y [env k params]
   {:action (fn [] ...)})

;; same as

(ns x ...)

(defmutation y ...)

I am going through the http://book.fulcrologic.com/ and using Cursive as my editor. I am having an issue with reader macros. Specifically,... #?(:clj [fulcro.client.dom-server :as dom] :cljs [fulcro.client.dom :as dom]) Intellij wants the files containing this to be named *.cljc which seems reasonable. So I made that change and now the build does not find the namespace e.g. The required namespace "flechar.ui.root" is not available, it was required by "flechar/client.cljs". The "flechar.ui.root" is in .../src/main/felchar/ui/root.cljc. This is under the control of shadow-cljs.

hi, it’s not intellij but rather clojure(script) itself that dictates needing .cljc files if you’re going to have code for more than one platform in it. Are you doing SSR? You typically can just use .cljs unless this is the case. In any case, can you paste in your full ns declaration

@eoliphant SSR? https://en.wikipedia.org/wiki/SSR

server side rendering

where you’re basically pre-rendering the page

if not, you probably don’t need to bother, and can leave the file as a .cljs

and only require [fulcro.client.dom :as dom]

Is gathering the initial-state SSR? http://book.fulcrologic.com/#_feeding_the_data_tree

no, not at all. SSR is something you may do to optimize your app. if you’re just getting familiar with fulcro

don’t bother

just leave the files as they were generated by the template

is there a way to have a hiccup-like dsl on client side with fulcro ?

ok, I will revert it. thanks @eoliphant

I guess it’s possible, but not sure how much it buys you @carkh. Also, you wont be able to take advantage of some of the shortcuts for localized CSS and what have you

np @phreed

@eoliphant been using the like since my common lisp days, but that whole react thing makes it a bit harder i guess

no big deal, just curious

Though there is undeniable power in just manipulating data structures and have these interpreted later

How to send multiple (fm/returning state components) in a defmutation?

(each one with a fm/with-target)

yeah I used reagent/re-frame a lot prior to fulcro @carkh, was missing it for a little bit, but after a while, not so much so 🙂

@eoliphant thanks for answering !

I sometimes end up with my own little data dsl for forms and what have you

i'm yet to investigate that part of fulcro, usually doing server validation with a roundtrip as the user types (with a bit of debouncing) yes that requires a bit of trickery =)

yeah. I’ve done a few experiments. Nice thing about clojure(script) is that they tend to be less expensive. RIght now, I’m tending towards specs in .cljc files.

mhh i dislike the idea of have the client doing any kind of validation, it just doesn't have enough data, then you need to do it again at server anyways

and that's not the 100ms delay max that will make a huge difference to the user experience

just establish a protocol for form validation, then use it everywhere is my motto =)

well yes and no, there’s frequently ‘basic’ stuff you can do like say SSN’s have a variety of structural rules that can easily be checked on both client and server. But then I might need to call the actual validation web service on the server

and to your point, if your latency, etc is low

you can even do ‘as you type’ server validation

true i never had to call a service outside my "world"...that would be a good reason for that

I've tried defining 1 action and multiple remotes inside the defmutation, but it didn't workout

@carkh I have often wished to have some sort of magical validation framework where you can specify your validaion rules declaratively and it automatically splits what can be executed on the client and what has to be executed on the server (e..g because it needs db access)

@hmaurer haha well let's see if someone comes up with something.... i'm usually a bit wary of those "does it all by itself" things though

never tried that before. You’re trying to call two services @patrickcms ?

@carkh yeah I am too, but it seems like something that a machine should be able to do. Maybe in a couple of years with AI advances 😄

can't wait for it though =)

Well strictly speaking, reader macros sorta give you that magic for free, we’re using some of it on a few projects, something like

(defn validate-ssn 
   [context ssn]
   (:clj "check the string format, call a web service, db")
   (:cljs "check the string format"))

of course it lacks the ‘automatic’ part 😉

@eoliphant good point!