Fork me on GitHub
#re-frame
<
2016-08-29
>
michael.heuberger00:08:38

well, for a starter, look at https://github.com/Day8/re-frame/blob/master/examples/todomvc/src/todomvc/views.cljs#L53 and why not write all-complete? @(subscribe [:all-complete?]) instead of @all-complete? further down?

danielcompton00:08:22

There’s some really important concepts in there for using reagent/re-frame

danielcompton00:08:06

If we dereffed the subscription in the let block outside of the inner function, the subscription would only update if the whole component was destroyed. Probably not what you want

danielcompton00:08:17

Create the sub in the outer function, deref it in the inner one

michael.heuberger00:08:36

@danielcompton thanks - yes familiar with that

michael.heuberger00:08:49

but what if there is no inner render function, i.E. form 1?

danielcompton00:08:03

you shouldn’t use a form-1 if you need a data subscription

mikethompson00:08:29

@michael.heuberger In that case, I think you might need to go over the re-frame docs again, perhaps from this point on: https://github.com/Day8/re-frame#how-flow-happens-in-reagent

mikethompson00:08:21

Oh, right. Are you saying that you want to ditch Form-2 and just go with Form-1 ?

michael.heuberger00:08:35

@danielcompton why shouldn’t we use form 1 when using subscribers? it is possible

mikethompson01:08:10

With Form-1 you recreate the subscription each you rerender.

mikethompson01:08:31

It isn't one susbcription delivering a stream of updates.

mikethompson01:08:39

It is a new subscription each time you rerender

mikethompson01:08:51

Interestingly enough, in v0.8.0 this may actually work (theory untested) because re-frame now has query de-duplication. The subscription you used last time will be the one you use this time. But this is an implementation detail at this point.

michael.heuberger01:08:11

using v0.8 here … form-1 still not recommended in conjunction with subscribers? is there an example demonstrating this issue?

mikethompson01:08:53

It did occur to me during the v0.8.0 release process that I should look more into this, but that thought got washed away with the need to get a release out the door.

mikethompson01:08:37

So, if it is to come about then it will be in a future release

michael.heuberger01:08:31

thanks, that’s good to know. but for now, using re-frame v0.8, is this statement still valid? "you shouldn’t use a form-1 if you need a data subscription”?

michael.heuberger01:08:53

if so, why? … would be good to know

michael.heuberger01:08:38

right, but: "may actually work (theory untested)”

michael.heuberger01:08:47

good, thanks for the confirmation - all clear now

mikethompson01:08:40

So, final clarification. Using subscribe with Form-1: 1. Didn't really work <= 0.7.0 Because it caused a new subscription to be created on each rerender. 2. It now may work (as of v0.8.0) but it is still in the realm of implementation detail (subscriptions are now cached and de-duplicated) 3. It is something that may become "real" in a future release

michael.heuberger01:08:53

many thanks - is there a github ticket re: #2 i can follow?

mikethompson01:08:12

I'll create one 🙂

michael.heuberger01:08:38

thank you - that’s a good, probably important, ticket @mikethompson

shaun-mahood04:08:46

I’m planning on a talk proposal about re-frame, but I’m a little stuck on direction right now. There are a few different places I could put the main focus - What is re-frame and how to use it from the perspective of a beginner. Doesn’t expect audience has ever built anything with React or Reagent, could possibly be targeted specifically at Clojure devs who have never built anything substantial in CLJS. At the end of talk they should have an understanding of the architecture and goals of re-frame, other alternatives to look into, and have a good line on where to go next to continue learning. - What is re-frame and how to use it from the perspective of a front end developer. Expects an audience who have built things in CLJS before, and could include deeper comparisons and analysis of other CLJS front end libraries. At the end of the talk they should almost be able to build a real app in re-frame (or as close as possible in 40 mins) and have a solid handle of where to go next. - An analysis of the architecture and design decisions in re-frame, including how the library has developed through its history. There would be a substantial amount of discussion about other alternatives in both CLJS and other languages (eg. Om.Next, Rum, DataScript, Elm, Redux, Hoplon) and how they have changed throughout their history. Would hopefully go a bit deeper into the principles of FRP, benefits and drawbacks of different approaches, and other concerns that are less relevant to actually building an application. Should be accessible by an audience with no significant background in any of these technologies. I’m pretty sure I could pull off any of these 3 talks and I’m committed to preparing something for the Conj regardless of talk acceptance (unsession or online) - any thoughts for discussion or preference on direction?

curlyfry08:08:54

@shaun-mahood: I remember looking for a talk like 1 or 2 when I started using re-frame, but couldn't find any. I think my vote would be for 2!

mbertheau08:08:33

@shaun-mahood Sorry for not making it easier 🙂 I'd be very interested in topic 3 because I settled on re-frame pretty quickly when I started with cljs. So to get a broader perspective on the other options in the CLJS field would be very insightful.

manutter5111:08:35

Heh, I just got done with abstractions, so I’m used to picking between 3-5 really good talks. 🙂 I’d go for topic 3, I think.

manutter5111:08:08

(and then I’d hope someone recorded the other 2 so I could watch later)

shyambalu11:08:03

another vote for topic 3

jakemcc14:08:45

@shaun-mahood I’d prefer to watch 3, but that is as someone that is shipping production re-frame apps.

tawonga14:08:38

@shaun-mahood another vote for 3. The excellent re-frame docs are good for starters. Would be interesting to understand re-frame in the broader cljs landscape.

si1414:08:42

yeah, I'd vote for 3! :)

wasser14:08:48

@shaun-mahood: I think the Conj is a good place for the deeper dive of 3, but you'll likely want/need some examples, so you would have a bit of 2 in there as well.

cdine15:08:01

@shaun-mahood .. My vote for #3 as well...

lwhorton19:08:20

has anyone come up with a “clean” way to do modals/dialogs?

lwhorton19:08:25

swirling around in my head right now is the fact that I want one “root container” that will be almost a top-level div in the app, and I want to put content into it— this will guarantee z-ordering issues don’t crop up, allow me to do background transitions, escape to close, etc.

lwhorton19:08:07

but consumers of a modal need to be able to “do anything they want” as if it were a normal component view — hook up on-click dispatches, respond to ratom derefs, subscribe, etc.

lwhorton19:08:07

on the surface these seem like conflicting agendas .. how can one render a top level modal container, but then later-down the component chain shove stuff into that container via the standard hiccup?

shaun-mahood19:08:04

@lwhorton: Have you looked at how re-com handles modal panels? http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/modal-panel - I've used it a bit and it worked pretty well.

lwhorton19:08:37

i did poke at that, but the problem is it requires a special api to be pre-determined that the model offers up

lwhorton19:08:39

it offers things like backdrop-on-click, opacity, etc., but I”m curious if there’s a clever way to render any-old reagent component inside a totally unrelated modal container

shaun-mahood19:08:53

@lwhorton: I also don't think that there should be any issues dealing with modals that are any different than anything else - if you've run into a specific problem I would be happy to look at it in depth with you to see if we can figure it out.

shaun-mahood20:08:17

@lwhorton: Pretty sure those are totally separate concerns - you put all the modal concerns into your modal div, and everything within that div is just a normal reagent / html / whatever component as if it weren't on the modal.

shaun-mahood20:08:10

I've always treated modals the same as any other div and never run into problems, but that doesn't mean they don't exist.

lwhorton20:08:51

i dont think i’m clearly stating the issue.. how about this for example:

(defn app-root 
  [:div 
   [content]
   [modal-container]])

(defn- content []
  [:div
   [foo]
   [bar]
   [baz]])

(defn baz []
  [:div
   [modal
    [:form
     [:input ...]
     [:button ...]]]])

(defn modal-container []
  [:div 
   … ?
   ])

(defn modal  [& children]
  [:div children])

lwhorton20:08:05

conceptually this is how I would think of it — a container at the top level, the normal app content/components, then somewhere down the chain a particular component wants to “become a modal”.

lwhorton20:08:28

and a nice api for that would be something simple like [modal [ .. all the modal content ]]

lwhorton20:08:01

except you can’t just pop up a modal right where the content is placed in the hierarchy, it needs to go to the top to avoid a whole bunch of issues - zindex, animation, click-capture, etc

shaun-mahood20:08:57

@lwhorton: Right, so you have your modal container that has everything set up in that (zindex etc.). Then you dispatch an event :display-modal that passes the content of your modal and go from there. From your example, I think all you need to do is pass some arguments to your modal-container to let it know what you want contained in the div. If that's not clear (which is very possible), I should be able to build an example that we can take a look at.

lwhorton20:08:19

i actually have something like that working at the moment, at least if I understand you correctly. the idea is the modal container subscribes to db/active-modal-content, and any consumer that needs a modal dispatches display-modal args which sets db/active-modal-content. but the annoyance is :display-modal args where args might need a callback function, or many, or some other invocation of dispatch. if you try to follow “only dispatch data”, it’s incorrect and awkward to send functions across the re-frame dispatcher.

lwhorton20:08:48

either way, thanks for your thoughts, i’m going to sit and think on this for a bit

shaun-mahood20:08:36

@lwhorton: No problem, wish I could be of more help. I might work on an example for how to do that anyway since it is relevant to some future work I need to do.

shyambalu20:08:36

@lwhorton essentially you want to pass a “component” as an arg right

shyambalu20:08:56

i was thinking about something like this for routing

shyambalu20:08:26

i was thinking about how to do react-router functionality in re-frame

shyambalu20:08:43

where the route defines the component hierarchy and components get hot loaded in

lwhorton20:08:58

@shyambalu yes, pass a component as an arg- but also have the root of that component be elsewhere

lwhorton20:08:21

i’ll probably end up doing some hackery with document.querySelector and :component-did-mount to get what I need

shyambalu21:08:14

why would the root of the component need to be somewhere else

shyambalu21:08:32

aren’t essentially hot loading a component into the model

shyambalu21:08:52

of which was defined by the calling component

shaun-mahood21:08:35

@lwhorton: Could you treat the modal as a panel similar to https://github.com/Day8/re-frame/blob/master/docs/Navigation.md and deal with it that way? That's essentially how I did it in the past and is a more clear example of what I was trying to communicate earlier.

lwhorton21:08:39

@shaun-mahood I could do that, but then I have a central switchboard component that has to know how many modals there are in the app, versus there being possibly dozens of “unregistered” components needing a modal that can get a modal without ceremony by simply declaring (if some-state [modal args])

shyambalu21:08:20

yep that’s the problem i got stuck at

shyambalu21:08:11

i don’t see why you can’t just stick an actual component into :active-panel and let it render

shyambalu21:08:23

not actually tried it

shyambalu21:08:53

essentially components become part of the app state

shaun-mahood21:08:56

@lwhorton: Ok, that makes sense to me now. I've never worked on an app with requirements that made that into an issue, thanks for helping me understand the context.

shyambalu21:08:21

btw this might be a dumb question

shyambalu21:08:28

but who or what is Day8

shaun-mahood21:08:52

@shyambalu: For re-frame purposes I believe it's primarily @mikethompson, you'd have to ask him for any specifics.