Fork me on GitHub
#re-frame
<
2017-08-17
>
jumar10:08:36

I'm going through the re-frame TodoMVC example application https://github.com/Day8/re-frame/tree/develop/examples/todomvc but cannot get it work. It seems that app be properly initialized. initialise-db event is dispatched at the very beginning: https://github.com/jumarko/re-frame/blob/master/examples/todomvc/src/todomvc/core.cljs#L49 However, after trying it run manually, I've found following error in JS console:

core.cljs:3679 No cofx handler registered for " :local-store-todos "
cofx handler is registered in db.cljs, though: https://github.com/jumarko/re-frame/blob/master/examples/todomvc/src/todomvc/db.cljs#L78 If I try to register it manually, I got following error in cljs-repl (no error in browser console):
#object[TypeError TypeError: Cannot read property 'call' of undefined]
Any ides what might be wrong?

mikethompson11:08:41

@jumar I'll see if i can reproduce

mikethompson11:08:50

You've got the latest from rhe repo, right?

jumar11:08:02

I fetched that latest version from upstream/master

jumar11:08:07

I also added following dependencies to :dev profile

:dependencies
                    [[figwheel-sidecar "0.5.13"]
                     [com.cemerick/piggieback "0.2.1"]
                     ]

mikethompson11:08:36

You used lein do clean, figwheel to build ?

jumar11:08:40

no, I use cider and

(use 'figwheel-sidecar.repl-api)

(start-figwheel!)

(cljs-repl)
I'll also try lein figwheel in a moment

danielneal11:08:23

always make sure to clean šŸ˜„ that often trips me up

mikethompson11:08:39

Damn, I'm seeing a problem too. So odd, I was running this last night. Uggh

mikethompson11:08:44

Give me a few minutes

mikethompson11:08:21

In project.clj can you change the dependency to: [re-frame "0.10.1"] please

jumar11:08:05

Heh, I've already did that and it works for me if I use lein do clean, figwheel šŸ™‚

jumar11:08:30

And it also works with cider. My bad: I blidnly add most recent figwheel-sidecar version (0.5.13) but didn't noticed that todomvc uses 0.5.6 (of lein-figwheel)

jumar11:08:39

Anyway, thank you you for quick help.

mikethompson11:08:38

I'll get the examples over onto the latest dependences

mikethompson11:08:46

They have fallen a bit behind

jumar11:08:38

Btw. any tips how to debug this type of problem? Let's say there's a real problem in re-frame's code handling reg-cofx. How can I get something more useful than just #object[TypeError TypeError: Cannot read property 'call' of undefined]?

mikethompson11:08:17

I normally try to be careful to give reasonable error messages

mikethompson11:08:23

Not sure what was going on there

mikethompson11:08:33

I'll have a further look

mikethompson11:08:46

Once I've got these dependencies sorted

jumar11:08:37

Thanks. I think that error messages are usually great - e.g. "No cofx handler registered for " :local-store-todos " was really useful. Furthermore, thanks for the great project and fantastic documentation - it's a piece of art šŸ™‚.

mikethompson11:08:39

But I'm always interested to know what was hard to understand

jumar11:08:01

For me, coeffects (https://github.com/Day8/re-frame/blob/v0.10.1/docs/Coeffects.md) were/are a bit harder to grasp. I mean, it all makes sense, I just had to re-read the docs šŸ™‚.

mikethompson11:08:30

Hmm. Intereesting

jumar11:08:40

I was a bit confused by inject-cofx - I expected that additional data will be automatically available in coeffects map without calling inject-cofx in every handler. However, I think it all makes sense...

mikethompson11:08:28

Okay, I've just pushed new deps for the two examples

mikethompson11:08:39

We're up to date

jebberjeb13:08:52

@mikethompson I should take a closer look at behavior trees. The thing I like about FSM here is that so many of us already understand them. It feels like a very intuitive model of computation, and I really think it resonates with people. Developers seem to like it.

jebberjeb13:08:40

Using FSM made UI development a lot less painful for me. But it was really the blend of FSM & Clojureā€™s rich data literals. The combination lets you create this model for your UI that is concise but so expressive ā€” I love it!

jebberjeb13:08:16

And Iā€™ve seen other devs use that technique, have that ā€œahaā€ moment, then watch it bleed into the rest of their UI work, happily.

jebberjeb13:08:47

I should try it with behavior trees.

newres14:08:34

I got a question about reframe subscriptions. I am trying to work from the lein re-frame template. but when I wanted to modify the default db to contain something else then the :name i can not seem to subscribe to the new element. Even stranger even though I remove the the :name from the default db i can still subscribe to it. I was thinking that it was cached but even after multiple restarts i still have the same issue. Any hints on how I can solve this?

jhund15:08:06

@jebberjeb I am very interested in using FSM for UI dev for the same reasons you are: Trying to get some clarity into UI dev. re-frame has helped in a huge way, and I think an FSM will make it even better. Iā€™m particularly interested in state charts since they provide hierarchical/parallel states and history.

jhund15:08:24

I follow your blog post series and am doing research myself.

sandbags15:08:26

@newres i suggest installing the re-frisk debugger and checking your app-db with that

jhund15:08:50

@mikethompson thanks for the pointer to behavior trees. They look interesting and Iā€™m testing them now to see if they could fill my needs.

sandbags15:08:51

other than that, post code

jebberjeb15:08:07

@jhund Iā€™d be curious to see what you think of using state charts if you get a chance to. Iā€™m wondering about the tradeoff in complexity vs the power they bring.

jhund15:08:19

yes, wondering about the same thing

jhund15:08:38

Iā€™m considering a partial implementation of statecharts as per SCXML to keep it as simple as possible.

jhund15:08:49

Just powerful enough to manage UI state

jhund15:08:01

where I think hierarchical/parallel states are necessary

jhund15:08:18

Iā€™m considering dropping history and transition conditions.

jebberjeb15:08:19

I know that Alan Shaw did a talk on it: https://www.youtube.com/watch?v=klqorRUPluw

jebberjeb15:08:28

But I hadnā€™t gotten all of the way through it.

jhund15:08:40

Yes, I had a long conversation with Alan at clojure/west

jhund15:08:54

he got me onto the whole statecharts thing

jebberjeb15:08:58

Iā€™d love to hear your experiences if you attempt it.

jhund15:08:11

Kevin Lynagh also worked in this area.

jhund15:08:17

Ok, Iā€™ll keep you posted

jhund15:08:27

and we can exchange info/tips/experiences

jebberjeb15:08:46

I think you can get some of what state charts has to offer without actually using them. I think STDā€™s can be composed at least, without a lot of added complexity. Thatā€™s what Iā€™m currently working on.

jebberjeb15:08:52

Sounds good!

jhund15:08:35

(google doesnā€™t really help in this case šŸ™‚)

jhund15:08:47

State Transition Diagram?

jebberjeb15:08:55

State Transition Diagrams, as opposed to full blown State Charts.

jebberjeb15:08:22

STD being considerably simpler, my thinking is to try and get as much mileage out of them as possible.

newres15:08:31

@sandbags I added re-frisk and suddenly the db is now in the proper state without me doing anything else.... Well I guess that solves the problem. Thanks!

deg16:08:49

@newres Had you restarted the app totally before? If not, my guess is that the restart to add re-frisk fixed the problem.

newres16:08:05

@deg I thought I have restarted before, did a lein clean as well, but it seems I must have missed something. It seems to work properly now, even if I change the db state.

erichmond18:08:37

if i want to html escape things, do I bring in the hiccup lib?

akiroz18:08:20

@erichmond What do you mean by "html escape"?

erichmond19:08:04

Translating @ to %40

akiroz19:08:01

@erichmond isn't that just url encoding? you can do that with the JS built-in functions

mokr20:08:16

TLDR: Can reg-sub-raw contain a let with multiple reaction bindings, and then return a reaction that deref these? Not quite sure I can phrase this in a good way, but here goes: Iā€™m trying to use reg-sub-raw to avoid some expensive computation to be re-run on every change to app-db. Examples in re-frame doc ā€œSubscriptionFlow.mdā€ wraps the entire subscription function in a reaction, but they donā€™t use app-db itself inside the computation, only subscriptions. In my case I utilise app-db, so my thinking was to use let bindings to create several reactions, and have the final reaction utilise these and hence only need to re-run when any of them change. Nothing seems to run when I do this, so Iā€™m trying to clarify whether I do something wrong, or if my thinking is wrong altogether. Do I e.g. have to do like the examples, and have every dependency for the calculation as a separate subscription, avoiding deref of app-db itself?

erichmond20:08:38

one other stupid question. What is the way that people have mapped env vars to specific environments?

jebberjeb20:08:05

@erichmond on my last project, we did it by making an http call to the server to get back the config object as json in an initialization step.

erichmond21:08:16

wow. thats interesting

mikethompson21:08:27

@mokr are you aware of the difference between "Level 2" and "Level 3" subscriptions?

mikethompson21:08:50

https://github.com/Day8/re-frame/blob/master/docs/SubscriptionInfographic.md "Level 2" subscriptions extract data directly from app-db (which is "root" of the signal graph, and known as Level 1). Whereas "Level 3" subscriptions only have other subscriptions as input. They do not extract directly from app-db. So Level 3 subscriptions represent "intermediate" nodes in the signal graph. Level 3 nodes will only "rerun" (expensively?) if their "input subscriptions" change. Ie. the propagation of values through the signal graph is pruned back at Level 2 when it is found that there were no changes to the relevant parts of app-db. The expensive "Level 3" work is not done unless it needs to be.

andrea.crotti21:08:44

just found out that it's possible to put re-frame views in cljc files so that they can be used on Clojure as well šŸ˜®

mikethompson21:08:06

Yes, see re-frame-test

andrea.crotti21:08:12

does it mean that I could do quite a lot of work without even firing up clojurescript?

andrea.crotti21:08:19

yes I saw that too

andrea.crotti21:08:21

that's pretty awesome

mikethompson21:08:50

But note: React and Reagent obviously require a javascript environment

andrea.crotti21:08:18

yes sure at some point I have to look in the browser

andrea.crotti21:08:28

but there is no harm in theory in moving everything to cljc though right?

mikethompson21:08:29

So, you can be testing your event handlers and subscriptions on the JVM

andrea.crotti21:08:01

things like #(dispatch [:email (-> % .-target .-value)]) which are more javascripty will also work?

andrea.crotti21:08:41

well that's dispatched on change of an input field anyway so I guess it would not be triggered anyway without the browser interaction

mikethompson21:08:37

Yeah, i assume that is in a View function. And view functions are Reagent/React .... which means javascript needed

andrea.crotti21:08:04

so does it mean I should use this as well to do some server side rendering of the html files?

andrea.crotti21:08:14

I thought I needed something extra to do that but maybe not

mikethompson21:08:41

See "Server Side Rendering"

joelsanchez23:08:18

hi, I want to have events that affect only one instance of a component, in Om land this was done with core.async

joelsanchez23:08:27

a better way in re-frame?

joelsanchez23:08:42

if I dispatch an event for the component, it affects all instances

joelsanchez23:08:47

(like in (rf/dispatch [:my.app.the.component/show]) )