How difficult is it to add re-frame to an existing Reagent app?

I'm about to start a new app, and don't need a lot of state management right away. I'm thinking it may be quicker to get a Reagent app up and running.

...and then add re-frame later.

(Forgive the question if people ask this often! I'm new to the channel.)

@michaelstalker as a heavy vanilla reagent user, i think it is hard to retrofit an existing app with re-frame

Good to know.

What are some considerations I should think about when deciding whether to go with vanilla Reagent or re-frame?

Scale

The bigger your app, the more you'll need something like re-frame

The smaller your app the less you need the structure it brings

:thumbsup:

That makes good sense.

But if your goal is to learn interesting things, then re-frame might be useful at small scale too

But it does represent early cognitive overhead

We use React/Redux at work. From the [admittedly little] reading I've done, re-frame is similar.

If that's the case, I've done my fair share of working through some of the cognitive overload already 🙂

I'm sure they're not identical, and that I'd still need to learn some new things.

Yes, in that case, you'll find re-frame fairly natural. Although it is different in many aspects

I have a passing knowledge of it :-)

You'll prefer re-frame

Just don't say that re-frame is inspired by redux, that's a sore spot 😛 (and re-frame was first)

I read @mikethompson comment on that 🙂 https://github.com/Day8/re-frame/issues/137#issuecomment-164041734

How difficult is it to make a re-frame app isomorphic? We do that at work with JavaScript, and I've only started looking into how to do the same with ClojureScript.

I'm not actually sure that's a requirement for me. I'm just exploring my options at this point.

What server side tech do you use?

Clojure, Node?

@danielcompton I've changed the README. It is the equivalent of racing around urinating on the boundaries. Woof :-)

See point 4 at the top https://github.com/Day8/re-frame

Let there be no mistake any longer :-)

i feel better now

I haven't chosen a server-side tech, yet.

I was leaning towards Clojure.

We use clojure for the server side. Is it better for us to use clojurescript instead of javascript for the front end project?

If you use Node there is already a isomorphic solution, although I'm not sure how much it is used, so while functional, I'm not sure I could recomend it as a production solution (it might be, I just can't be sure)

https://github.com/Day8/re-frame/blob/master/docs/External-Resources.md

There are ways to do something similar on a Coljure backend, but you have to be a little skilled. It isn't packaged up.

The problem on the JVM is that Reagent and React are javascript, and can't run on the JVM

So you have to "render" to hiccup and then use another library to turn the hiccup into HTML.

Doable, but not made into a library yet

Nice to stake your claim 🙂

Woof

@danielcompton I wasn't sure if you were talking to me or @mikethompson. I'm not sure I'm up to that task, yet!

I corrected the link above to External Resources

@cmal too hard to say. If you are interested in Node, you might be interested in @yogthos new project called Macchiato http://yogthos.net/posts/2016-11-30-Macchiato.html

He does good stuff

Thank you for your advice! @mikethompson

In theory, if you use Macchiato, you can swap backwards and forwards. Although it might be too early to make those claims too strongly just yet. Early days.

in theory it should be mostly compliant with ring core, only middleware I recall having to change api for was the multipart params

I think the ease of jumping between macchiato and ring will largely depend on what third party libraries you rely on

also the usual disclaimer that it's still pretty early days, and there could be some bugs 🙂

I've used it for a couple of small projects, and a few other people have started using it without any show stoppers so far

we have a #macchiato channel to discuss issues/ideas now

I guess another point worth noting is that macchiato is only complaint with ring async handlers

Thanks.

@mikethompson Do you have a preferred way of doing URL routing in re-frame?

Loving the new docs btw.

I see the todomvc uses secretary

I’ll look at that...

So eager to jump right into my first toy re-frame full-stack application i did some searching and thought that using this would be the best way to get started: lein new luminus vending_machine +re-frame +datomic +cider sadly i hit an unexpected error right away: ‘lien uberjar`…

Compiling "target/cljsbuild/public/js/app.js" failed.
Exception in thread "main" java.lang.NoSuchMethodError: com.google.common.base.CharMatcher.javaUpperCase()Lcom/google/common/base/CharMatcher;, compiling:(/private/var/folders/qx/mn5d4sjn7w5b4fxs2l15lzk80000gn/T/form-init612906228494054095.clj:1:124)

@drewverlee Best to ask in the luminus channel, I think @stuartrexking there was no deep knowledge in that decision

@mikethompson, in general, do you know of any other ways to get started building a re-frame datomic app then luminus? I suppose i dont see much else out there. But im a newbie in this community.

I'm afraid I don't have much direct experience with Datomic

luminus is normally pretty good

Perhaps ask on the datomic channel?

Sorry to keep encouraging you somewhere else

If you just want to fiddle with the Client part then the re-frame-template certainly works

(but no server part)

@mikethompson hey 🙂 while you're here would you mind replying to the last comment here? https://github.com/Day8/re-frame/issues/137 — I have some ideas I'm already exploring and would like to know if there are any new updates/thoughts or maybe even progress on it

Will do

Thanks so much. And sorry for the nudge 🙂

no problem

Getting this when trying to run the karma tests: Error: No provider for "framework:cljs-test"! (Resolving: framework:cljs-test). Followed instructions in Contributing.md — any suggestions? 🙂

Issues was npm install -g karma vs npm install -g karma-cli 🙂

Hi all, I just raised #296 in re-frame, it should be a super simple fix for something pretty badly broken!

@oliy It seems like you have a clear picture how to fix it. Consider opening a PR?

I would happily but I don't know when I'll have time (I can't until I get home - github blocked here at work)

But if no one has picked it up before I get a chance I will send a PR

opened a PR https://github.com/Day8/re-frame/pull/297

Great, thanks @martinklepsch

Very frustrating when I need to contribute from work... Painfully doing stuff on my phone!

@oliy Interesting workplace where you can't access github haha

Well, we have read-only access. No writes allowed (not even allowed to sign in, so no chance of raising bugs even)

Great. Only get no post?

@cmal yeah I think that's how they implemented it

Thanks to both @oliy and @martinklepsch - we'll review this morning and push a v0.9.1 (yes, it is morning here :-))

@oliy hope it's not Juxt that's blocking your internet access? 😛

@danielcompton heh, juxt runs on a steady supply of github and cat memes. Take either away and the whole train grinds to a halt

Thanks @mikethompson I can supply a PR with some unit tests as well at some point

@upgradingdave we've now using react-flip-move. Great find. Thanks! For others following along, please see this blog post: http://www.upgradingdave.com/blog/posts/2016-12-17-permutation.html

@mikethompson nice! Yeah, love the animation effects 😉

it makes boring ui stuff seem fun to use

@upgradingdave So easy to use as well. I should be paying more attention to the React goodies that are out there.

saving you some googling: https://github.com/joshwcomeau/react-flip-move

@oliy I'm fixing this now, just adding some tests first

@oliy would be interested in hearing what you're using dyn-subs for. It might not be immediately obvious, but now that you can subscribe from the inside of a Reagent component we think that that takes care of most (all?) of the use cases of dyn-subs

Essentially I have some time series data. The slice you look at depends on a date in the URL (which is my reactive arg) which I pass into my sub that knows how the data is stored

If the URL changes I want to show the data for the new date

I don't think there's a better way than the dyn sub at the moment (the sub is used from many places)

I could get the date reaction outside the render loop and pass it as a value to a sub inside the render loop that I deref immediately - but that's relying on the render loop mechanics, and means I can't unit test this stuff

Yeah, that's a good use case

You could just subscribe to the same subscription in many different places

with the date value deref'd

subscription deduplication will avoid extra work

I personally prefer using dyn subs, or building my own reactions with reg-sub-raw, so that I can unit test everything without having to get reagent involved

as long as the deref is in the inner function, whenever it changes, the component will re-render which will change everything

Then my view code takes data and emits hiccup rather than getting involved in control logic

I don't want my view code to understand how to wire up subs and arguments, I just want it to render the atom I give it

can I ask how allowing subs within components removes all (most?) of the needs of dynamic subs? Is it because prior the sub would be closed over with its arguments and never "re-rendered" if done in the let of a (defn .. (let ... (fn form?

yep

but if you now subscribe from the inner function of a form-2 component (or just create a form-1 component), and deref any dynamic values then whenever the dynamic values change, that will trigger a re-render which will then cause a new subscription to be created

is creating that new sub performant? never sure what the impact of subs are, or how many people have found to be best

@owen: I’m sure Daniel will correct me if I’m wrong, but subscribing onto an existing sub should perform better than directly onto app-db (given that all else is equal).

thanks! I guess my question is, if your subscribed to something like [:user [4]] and you click next or something and the component gets re-rendered and now subscribes to [:user [5]] will the sub to 4 get removed?

or does it get re-used with the new id?

ah, so you're saying, there would be a (sub [:users]) and then a specific (sub [:users [*id*]]) under that?

They're kinda 2 separate issues

What Shaun's talking about is that you should have extractor subscriptions and transforming subscriptions, to reduce the work that the transforming subscriptions have to do (https://github.com/Day8/re-frame/blob/master/docs/SubscriptionInfographic.md)

Your question Owen, if I'm understanding correctly is asking about the performance impact of recreating a new subscription every time one of your dynamic values changes?

yep

is that basically the same as the old dyn-sub method in the end?

So you're right that there is more code running than if you were to create a dynamic subscription

In absolute terms though I think it's such a tiny amount that it's unlikely to be noticeable

Typically the expensive part of a subscription is your user code, which will be the same whether you were to do a dynsub or a standard subscribe inside a Reagent component

sure! A+ Thank you much!

I think that's what you were meaning Shaun?

@owen: Unrelated to your performance question, there are 2 ways to do that without dynamic subs that have worked well for me (I think it depends on the scale) - Sub to users in a parent component, then just pass the user info directly to your reagent component that does the rendering. With a small number of users, or if you want to reuse that component, this works really well as now it’s just a reagent component that you can use with devcards or in other places. - Create an active-user key in your app-db and subscribe to that directly, then just update the app-db. If it makes sense in your app, I really like this pattern as you can always tell the state of your app and can add extra info specific to the needs of the active editor/viewer. Great for CRUD style apps,

@danielcompton Yep 🙂

yeah the second is what I've been drawn to

I think from reading about om.next Ive started normalizing all the data in my front-end db

I would have still done this with dynsubs though

I just realized from the previous convo that 0.9.0 allows this without dynsubs

very interesting

@owen: I find that most of the time when I use the active-user pattern on a new problem it exposes some part of my understanding that is lacking, and it’s a good place to do your normalization/de-normalization or whatever other transformation is necessary. Makes the subscription a lot simpler too, but I’m sure there are places where it doesn’t work that well.

@oliy: https://github.com/Day8/re-frame/releases/tag/v0.9.1 LMK if that fixes your issues?

Will do @danielcompton thanks