Hello?

@virmundi: hi

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?

Perhaps one of the templates might help ?

https://github.com/reagent-project/reagent-template (Hmm. Not sure it has secretary)

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

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.

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

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.

Thanks

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).

@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

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

@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.

1. https://github.com/Day8/re-frame 2. https://github.com/Day8/re-frame/tree/master/examples/todomvc 3. https://github.com/Day8/re-frame/wiki 4. https://github.com/Day8/re-frame/wiki/External-Resources

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

My advice is to use Cursive/IntelliJ

For development

unless you already have emacs experience

Secondly, use figwheel as soon as possible

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

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

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

https://github.com/binaryage/cljs-devtools

That means switching to Canary

Makes a big difference to your debugging experience

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

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

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

IntelliJ eats battery while Counterclockwise (Eclipse) is fine.

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).

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

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

I consider them both pretty essential to good productivity.

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

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

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

No, I've never tried.

This was recent: http://yogthos.net/posts/2015-11-24-Serverside-Reagent.html

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

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

yes, and very soon.

Will be $99 for personal use

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

Worth ever single cent, in my experience

What's the price for "enterprise" usage?

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

https://cursiveclojure.com/preorder.html

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

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!! - 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/

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

No problem. Good luck

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

Demo: http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/h-box

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

Got it

@virmundi: there’s also @pupeno’s https://carouselapps.com/2015/09/14/isomorphic-clojurescriptjavascript-for-pre-rendering-single-page-applications-part-2/

hmm

Curious about something.

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}

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

you could just put it into an atom?

OK so what I want to do is like

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?

(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)

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

?

pass it where?

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

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

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

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

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

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]}]

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

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?

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.

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/

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?

I've never seen that before

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

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

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

is there something like reframe for om?