Fork me on GitHub
#reagent
<
2015-12-02
>
virmundi01:12:55

I'm trying to find a tutorial that goes through how to layout a project with Reagent and Secretary. I'm coming from an Angular background where we've gots /pages that house the major sections of the site, /components that house sub UI features, etc. Is there a best practices for layout?

mikethompson02:12:05

Perhaps one of the templates might help ?

mikethompson02:12:23

If you intend to use re-frame, then https://github.com/Day8/re-frame-template offers the option to include secretary routes

virmundi02:12:49

What's the community doing in this regard? It looked like Reagent + Secretary is pretty equal to Angular 1.x. The chatter around the old HN posts is quiet about re-frame.

mikethompson02:12:22

I'm the author of re-frame so I'm biased. But in my opinion, you have two choices: (1) use re-frame (2) develop your own version of it. For any reasonably complicated app, you'll need some structure/architecture beyond plain reagent

mikethompson02:12:03

Note: the key to what I said above is "for any reasonably complicated app". Obviously really simple apps don't need much architecture - plain old reagent is good enough.

virmundi02:12:43

I briefly looked at re-frame this evening. Are there good tutorials for it beyond basics? For example, I'll have a bunch of major sections (Home Inventory, Recipes, etc).

trancehime02:12:49

@mikethompson: I've read the re-frame docs, very interesting read! I plan to look into it when I get into developing more complicated stuff =o

virmundi02:12:13

Are they any public approaches to carving a complex app up?

mikethompson02:12:55

@virmundi: the readme is essentially the beginners tutorial. After that you can go onto the todomvc example. After that the Wiki has a lot in it.

virmundi02:12:46

@mikethompson: thanks. I'll look at it. Right now I'm just trying to get a spike going on using ClojureScript with anything.

mikethompson02:12:05

My advice is to use Cursive/IntelliJ

mikethompson02:12:21

For development

mikethompson02:12:29

unless you already have emacs experience

mikethompson02:12:58

Secondly, use figwheel as soon as possible

virmundi02:12:56

I got figwheel going. The reagent template came with it.

mikethompson02:12:05

Just to be clear: you only need the community version of IntelliJ .... then you add Cursive as a plugin

mikethompson02:12:29

Okay, good. Next ... you'll want to use cljs-devtools

mikethompson02:12:05

That means switching to Canary

mikethompson02:12:12

Makes a big difference to your debugging experience

virmundi02:12:55

Cool. I wonder how Canary does with OS X batteries.

mikethompson02:12:43

I'm not on Mac, so not sure what that even means simple_smile

virmundi02:12:35

Chrome kills the battery on a Mac. 5 hrs with Safari to 2 with Chrome. Same with Intellij

virmundi02:12:52

IntelliJ eats battery while Counterclockwise (Eclipse) is fine.

virmundi02:12:41

If I didn't need a mac for iOS development, I'd get a better Linux laptop (Sager gaming one I've got is terrible for batter 30 mins, basically a battery backup).

mikethompson02:12:44

Hmm. I'd put up with it, in order to use Cursive and cljs-devtools.

virmundi02:12:24

I'll give IntelliJ a shot. I have to use it for Android anyway. I'm in Light Table now.

mikethompson02:12:24

I consider them both pretty essential to good productivity.

virmundi02:12:30

Fortunately, I figure a good set of tests should keep me out of the browser.

mikethompson02:12:30

Yep, lighttable is terrific for playing around. But it just wasn;t enough for serious work. IMO

virmundi02:12:54

Have you gotten re-frame to render server-side with Nashhorn?

mikethompson02:12:06

No, I've never tried.

mikethompson02:12:52

(but I can't comment on how that might work with re-frame)

virmundi02:12:10

Since your knowledgable about Cursive, is it eventually going paid?

mikethompson02:12:24

yes, and very soon.

mikethompson02:12:31

Will be $99 for personal use

mikethompson02:12:38

Colin Fleming has been working away on it for, what?, 18 months, and is about to start charging for it.

mikethompson02:12:46

Worth ever single cent, in my experience

virmundi02:12:08

What's the price for "enterprise" usage?

mikethompson02:12:15

Other rave about emacs, of course, but in my experience that's a steep learning curve in its own right

virmundi02:12:33

I see, so to keep cost downs it would be BYOI

mikethompson02:12:07

I have to head off. The fact that you have already found the clojurians slack channels will help you a lot. But, in summary, my recommendation would be: - use reagent (Duh!) - use figwheel - use Cursive - use Canary with cljs-devtools - use https://github.com/ptaoussanis/timbre for logging - use re-frame (if the app is slightly more complex) <--- warning I'm biased, but I'm telling you it is true!! simple_smile - you may also be interested in http://www.luminusweb.net/ for client/server If you want to understand reagent, BE SURE to read the reagent specific docs in re-frame Wiki (see down the bottom): - https://github.com/Day8/re-frame/wiki#reagent-tutorials All this information will soon disappear off slack, which has limited memory, but is recoverable via archives: http://clojurians-log.mantike.pro/

virmundi02:12:58

@mikethompson: thanks for all the information. I appreciate it.

mikethompson02:12:13

No problem. Good luck

mikethompson02:12:36

@virmundi: No wait, one final point ... depending on your browser targets ... re-com may also be massively useful: https://github.com/Day8/re-com

mikethompson03:12:41

Even if you can't actually use it (you have to target the retail web including IE9), it might well act as some inspiration.

trancehime03:12:11

Curious about something.

trancehime03:12:52

Let's say I would like to make a single form. The form would submit several separate things which all consist of this following structure: {:identifier input1 :some-info some-info :more-info more-info}

trancehime03:12:09

What would be the best way to store that so I could send it somewhere for processing.

erik_price03:12:53

you could just put it into an atom?

trancehime03:12:52

OK so what I want to do is like

trancehime03:12:32

Default data for the form is going to come from a database. I will populate an atom with this information and then render accordingly. Then on clicking the submit button, I would pass that atom, correct?

trancehime03:12:41

(Actually, I sort of already do this in a different form, except that form only uses 1 map, so when I submit my form, I am actually just passing in deref'd stuff)

trancehime03:12:37

So in this particular case, I would pass the entire atom instead of individual bits and pieces.

erik_price03:12:14

pass it where?

trancehime03:12:52

well, I'm going to submit that information to another table on database

trancehime03:12:20

it's just that each {:identifier input1 :some-info some-info :more-info more-info} map is going to have its own record.

trancehime03:12:28

It should be easy enough for me to do doseq but it is more how am i going to pass the vector of maps.

trancehime03:12:15

so i have a function assign to some :on-click handling.

Pablo Fernandez06:12:29

@virmundi, @danielcompton: I suggest reading part 3 and looking at the library we released: https://carouselapps.com/prerenderer/

grav10:12:27

I have a container component that currently has an interface {:children [c1, c2, c3] :dimensions [d1, d2, d3 …]}. So I’d use it like this: [my-container {:children [[:div “foo”] [:div “bar”] [:div “baz”]] :dimensions [20 60 40]}]

grav10:12:05

The reason for not specifying children as hiccup is that I wrap each child in a component for presentation.

grav10:12:33

I’m thinking of making it a bit more hiccup-like, like so: [my-container {:dimensions [20 60 40]} [[:div "foo"] [:div "bar"] [:div "baz”]]], but the second parameter doesn’t really reflect the dom-structure, since it isn’t hiccup, but a vector, so maybe it’s un-idiomatic?

mikethompson12:12:48

Reagent/Hiccup has various demands about vectors. https://github.com/Day8/re-frame/wiki/Using-%5B%5D-instead-of-%28%29#appendix-2 But I'm really not sure what will happen if you bury those vectors inside a map. You may get away with it. But anyway, thought I'd warn you.

Pablo Fernandez12:12:10

I was told you might find my tour of a re-frame/reagent application useful. It’s very long and detailed (and it also covers the server/api part): https://carouselapps.com/2015/12/02/tour-of-the-source-code-of-ninja-tools/

mangr3n21:12:47

any hints for debugging stuff like this? Uncaught Error: No protocol method IMultiFn.-add-method defined for type object: [object Object]cljs$core$missing_protocol @ core.cljs:255cljs$core$addmethod @ core.cljs:9568(anonymous function) @ views.cljs?rel=1448976398758:26 utils.js:6 -- New Event —————————————————————————— Basically something went wrong and I’m not sure where the bug is in my code. Something in the hiccup output has a js object, is my best guess, but how do I find the culprit in a simple way? Any suggestions?

mikethompson22:12:27

I've never seen that before

mikethompson22:12:53

Trying to treat something as a Multimethod ... which isn't a multimethod

mikethompson22:12:13

From the looks of that "New Event" ... you appear to be using re-frame. This approach might help: https://github.com/Day8/re-frame/wiki/Debugging

mangr3n22:12:03

thanks mike, I am using re-frame, but I ended up removing the multimethod and just replaced it with a kw map to look up the “page” reagent component

Tim23:12:55

is there something like reframe for om?