Fork me on GitHub

Hello everybody. How do you handle deployed app update in a SPA? I mean, when users are logged in and I've uploaded a new version, is there a way to force code reload (possibly without affecting their state like in dev-mode when using shadow-cljs/figwheel)? As for now my only idea is to track versions in UI and Backend, and send it with every request. In such case if UI will see a new version it could just reload the page. It's less than ideal, but at least it would update the code automatically. I know it isn't directly related to re-frame, but maybe someone knows how to do that. I'm not a frontend dev, just writing an app and learning it and was wondering what is the best practice for this problem. :thinking_face:


One of my progressive web apps supports full offline mode. I store the app version both in the html template and the app db. When user logs and is online, I do a version check, then show a pop-up informing user whether he wants to reload. If he does, I'll empty the app cache and reload everything from the server. The resource files are stored by version so users can technically have multiple versions of the same app running.


our work product includes a version check in the headers and the backend has middleware to respond that the client is out of date


Thank you for the answer. 👍


Suppose I have N panels that get their data from a common backend resource but with different parameters. When the relevant data changes on the backend, the UI gets notified about that. Now all components collectively know that their data is dirty and display a plaque to let a user know about it and to offer to reload the data. If the user decides to reload the data for a particular panel, only data for that panel will be retrieved - the other panels should keep showing the plaque. What would be the best way to implement it? So far, I could think only of two approaches: 1. Use re-frame-async-flow-fx 2. Keep the timestamp of the last update of the common data, as well as the last timestamp of update per each panel


it sounds like you just need to maintain a set or map in the app-db indicating which components are up to date (or out of date). Then you’d have two handlers to change that state: - When a common query makes all of the components up to date again - When one of the components needs be changed up to date again. Why do you need the timestamp? A boolean (or identifying the component in a set) would work for this? Unless you need to display the timestamp in some form. It’s been a while since I used re-frame, so hopefully I’m understanding correctly


Indeed, a simple boolean flag makes more sense. In my head, it was implicitly encoded as dirty? = backend-update-timestamp > component-update-timestamp. The fact that re-frame frowns upon dispatching from componentDidMount make some things much more convoluted. I now need to introduce a change that doesn't line up with the existing architecture at all, and thinking about all the required modifications makes my head spin.


If I'm creating a level 3 subscription (i.e. a subscription that sources its input data from another subscription), is there a way to parameterize the source subscription? From this (theoretical?) example code, I would like ::child-sub to subscribe to ::parent-sub, passing in parent-key to the source subscription.


That's exactly how you do it. The only difference is that the commented function's signature should be [[_ parent-key]]. Details:


Note that the code includes dynamic-vec. You can just completely drop it from all signatures - it's legacy.


(fn [_ [[_ parent-key]]] ...)


or is it literally (fn [[_ parent-key]] ...) without reference to the db place holder?




got it. Thanks!


Any experiment with animating state transitions? In particular I'd love to be able to tween numeric values.


Not sure what you mean by "tween numeric values". But if you're thinking about storing the animation transition state in the re-frame DB, you should probably think again. You probably want to use regular CSS animations, without having to set intermediate values yourself. Use FLIP approach if you find it slow because of re-layout/reflow.