Fork me on GitHub
#reagent
<
2019-01-07
>
henrik04:01:11

RIght, so there isn't a literal in Hiccup to produce it. Does Reagent have an equivalent macro that I haven't found?

minikomi04:01:12

boot.user> (prn (hiccup.core/html
                 (list "<!doctype html>"
                       [:html 
                        [:head 
                         [:title "hi page"]]
                        [:body
                         [:h1 "hi"]]])))
"<!doctype html><html><head><title>hi page</title></head><body><h1>hi</h1></body></html>"

lilactown06:01:51

Henrik are you doing SSR or something?

athomasoriginal17:01:57

QQ: Reagent form-1 and form-2 components: do they become React function components, or class components? I was under the impression it was function components until you get to form-3.

henrik18:01:30

@lilactown Not really, I just need a dynamic index.html.

lilactown18:01:27

What do you mean?

lilactown18:01:38

Sounds like you need server side rendering

henrik19:01:43

No actually, not really. That can be done easily enough with a static index.html. I need to modify the content of <head> based on configuration, which is why I'm generating the index page rather than having a static one.

lilactown19:01:57

Sounds like something you would do on the server side

lilactown19:01:53

You could also try something like react-helmet

henrik12:01:31

Yeah, indeed, I am doing it on the server side. Just a simple Reagent component, rendered to string rather than mounted. I haven't used react-helmet, I'll check it out.

henrik12:01:19

React-helmet doesn't seem to provide anything that isn't already possible with plain Reagent, TBH.

lilactown16:01:44

Oh, I was confused when you said you didn’t need server side rendering

lilactown18:01:35

@tkjone they all actually become class components

lilactown18:01:55

It's how reagent does the dereference tracking

athomasoriginal18:01:07

ohhhh, that's wild.

WhoNeedszZz20:01:10

Only form-3 calls reagent/create-class so I don't know if that's true

athomasoriginal22:01:10

Interesting. Looks like I might have to dive into the source to confirm 🙂

👍 5
jdkealy22:01:33

After using reagent for 4 years or so, I'm stuck on a project that is vanilla javascript :face_with_rolling_eyes: ... After using redux (horrible), I've been trying to look into other JS libraries that make things feel as easy as reagent. How did reagent manage to avoid the inherited state/props problem that's so pervasive in vanilla react?

jdkealy22:01:25

It's just super nice that there's a global atom that you can update and not have to worry about that atom being passed in as props to the component.

WhoNeedszZz22:01:28

I could be wrong, but my understanding of the difficulties developers have with state/props is not writing in the functional style as JS is a hybrid language. I managed to get around those issues myself by sticking to a strict functional style. Since Clojure(Script) is functional only it enforces that.

jdkealy22:01:31

It's confusing for me to that I need to make callbacks to set the state of a higher level component and then pass the state down as props to the lower components. It becomes really confusing really quickly and then i lose shared state with different containers.

WhoNeedszZz22:01:05

Have you checked out re-frame? I've found it to be helpful in managing those concerns

WhoNeedszZz22:01:53

Oh, right. You said you're stuck on vanilla JS

jdkealy22:01:06

I was using redux. I can check out re-frame. I just find that there's way too much boilerplate code in redux so far. Actions/Sagas/Constants/Reducers.... things that i would make as a single function in reagent.

jdkealy22:01:11

oh right...

jdkealy22:01:36

TBH... i didn't understand why people use re-frame with reagent

WhoNeedszZz22:01:50

I avoid redux like the plague myself. It overcomplicates way too much

jdkealy22:01:24

so any good vanilla js solution that's reagent-user friendly ?

WhoNeedszZz22:01:02

re-frame provides a micro-framework since you're going to build one yourself anyway if you just use pure reagent. I've found it to be helpful in reinforcing the flow by how it is designed

WhoNeedszZz23:01:14

Personally I found JS libraries that force functional are more complicated than they need to be and I just enforce myself

jdkealy23:01:40

and so how do you get props into your components ?

jdkealy23:01:01

they do this weird thing in redux

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CraneVideoDayContainer);

jdkealy23:01:09

.. for example

WhoNeedszZz23:01:14

The normal way suggested in the React docs. I've found if you're having trouble with props then that may be indicating a design flaw

WhoNeedszZz23:01:24

In those cases I've restructured components in a slightly different way that flowed as intended

lilactown23:01:51

@jdkealy you can try out MobX. React's new(er) Context API is also nice for getting rid of drilling props down multiple levels

lilactown23:01:14

but AFAICT MobX is (architecturally) quite similar to reagent, with much more ceremony

jdkealy23:01:59

sweet! I'm reviewing "Unstated" currently. I'll review MobX after

lilactown23:01:02

at some point when your application reaches a certain middling size, something like re-frame or redux makes more sense as a way to coordinate global state across different views

lilactown23:01:19

I haven't looked at Unstated, it might be nice too