Fork me on GitHub
#reagent
<
2016-01-16
>
escherize02:01:39

@magomimmo: I used the boot setup from your tutorlai series 1-4

escherize02:01:52

a figwheel-like setup that you can actually understand

escherize02:01:04

oh, yeah here:

escherize02:01:31

I didn't follow through once the tutorials went into domina land

cjmurphy03:01:35

@escherize: re: - looks really great. How do you do it - is there some source??

escherize03:01:48

yeah i have the source here...

escherize03:01:57

most of the credit should go to semantic ui though

escherize03:01:59

its sweeeettttt

cjmurphy03:01:48

Yes I'm gonna have to look into it...

escherize03:01:46

the catan namespace is where all the code is

escherize03:01:54

that's the... main or something

escherize04:01:46

definately some wonky hacks in there... like a vector of atoms for player-names @_@

richiardiandrea06:01:20

BTW the whole http://www.clojurescript.io is reagent on re-framoids 😄

magomimmo08:01:12

@escherize: yes, I know, the domina stuff is for beginners, in the next few tutorials I’ll introduce core.async and reactive stuff as well. In the meantime take a look at the 16th tutorial about a more advanced boot setup...https://github.com/magomimmo/modern-cljs/blob/master/doc/second-edition/tutorial-16.md

escherize08:01:33

That's interesting stuff @magomimmo - I'll have to pick your series back up 😉

mike_ananev09:01:40

hello all! how to make event on change r/atom? I have global state in map like this (def app-state (reagent/atom {:index-page {:conn-number 0} :clock-page {:current-time 0} :current-page :index-page})) Some functions can change :current-page value to :index-page or :clock-page. I want event handler that if :current-change is changed then call some fn

jaen09:01:10

@escherize: planning to make a playable Settlers of Catan app?

jaen09:01:23

Also semantic UI is pretty great, using any of their JS components yet?

escherize10:01:59

@jaen, no -- I was just evaluating semantic ui for fun. I like to build dicerollers for Catan. I should dig into some more of their js components.

jaen10:01:32

I've used the dropdown so far and it mostly works, the only issue I have is it seems the option values have to be strings.

jaen10:01:13

Real React components would certainly better, but it seems like a reasonable stopgap solution to just wrap them, since the docs at least say they are meant to work with React easily.

escherize11:01:32

I havn't done much, but it seems to me that component-did-mount fits perfectly with the setup code. just a bit awkward to target the current component.

jaen11:01:09

Yeah, I have something like this and it doesn't seem too bad

escherize11:01:44

Hmm, maybe there's a way to do that automatically with, say for a dropdown, using :

{:reagent-render (fn [] ,,,) ;;<-- dropdown markup
 :component-did-mount #(.dropdown (r/dom-node %))}

escherize11:01:42

yeah! that's good stuff

escherize11:01:18

That seems like a pretty natural fit, tbh

jaen11:01:37

It needs a few more things, like being able to map the string values to original values (so you don't get string back) but otherwise it's pretty serviceable.

jaen11:01:26

Yeah, it does seem pretty natural; like I mentioned they seem to have taken integration with React into account when writing those components - http://semantic-ui.com/introduction/integrations.html#managing-lifecycle

jaen11:01:07

You still end up with the jQuery dependency; but for initial prototyping I guess that's not too bad - you can always rewrite those components into pure React later, when you know what you need.

escherize11:01:30

Interesting, how would you do that?

escherize11:01:59

how do you select that dom node without jquery? (noob question)

jaen11:01:31

Well, (reagent/dom-node component) already selects the DOM node. (js/$ ...) is there just to wrap it into the jQuery DOM node wrapper. Since all semantic-ui components are written as jQuery plugins you have to wrap it.

jaen11:01:59

What I mean is you could just re-use the styling and write everything by hand. Sort of like what re-com guys did to select2.

jaen11:01:24

IIRC their dropdown uses select2's styling, but has it's own implementation in Clojurescript and reagent.

jaen11:01:04

Or chosen, one of those.

jaen11:01:45

Ok, just checked - [:div.chosen-drop ...]. That was chosen.

jaen11:01:11

Anyway, this seems like a good approach - use their jQuery components at first and when you know what you need just re-use the styling and write your own Clojurescript/reagent implementation, like re-com guys did and then drop the jQuery dependency.

escherize11:01:42

Exciting stuff! Thanks for the info

jaen11:01:32

Sure thing!