Fork me on GitHub
#re-frame
<
2022-04-14
>
Prometheus19:04:27

I know it's a commonly asked question, but how do you actually structure a re-frame app when the project gets large? I'm thinking of a couple of different ways but would like to hear your opinion on what you think the drawbacks of the different approaches are. 1. Features, keeping events, subs, and components in the same file for the same feature. Or as a folder with three files, subs, events and components. 2. Events folder with different feature ns, subs folder with different feature ns, and components with different feature ns. 3. Flat approach, events ns, subs ns and component ns (like most tutorials) I'm very interested in hearing other ideas on this. I'm not suggesting a standardization, just some different approaches.

p-himik19:04:12

I prefer the first approach, without separation by subs/events/views. I find it the most organic and the easiest to reason about and navigate.

😎 1
👍 3
Prometheus19:04:46

@U2FRKM4TW so one file with events, subs and comps. I never tried it but it seems to be a very pragmatic approach that is reasonably flat with relatively few file changes. Sort of work on one feature in one file.

p-himik19:04:06

Right. And, of course, depends on what you deem a "feature". There are different levels of granularity possible.

Prometheus19:04:15

Maybe in the spirit of clojure you begin with the big brush strokes, one large file, then refactor incrementaly when the features reveal themselves @U2FRKM4TW

👍 1
isak19:04:53

In ours we have most events/subscriptions in the same file as the component/page. Splitting them up into different files was a pain, especially with how limited the ns forms are in Clojure. It also makes navigating around in the codebase by filename a lot slower, at least if you follow the component_name/{events, subs, views}.cljs type pattern.

Noah Bogart19:04:17

@U2FRKM4TW’s style is how vue works: a single file per component that holds the vue-flavored html, the relevant javascript, and the relevant css. it's surprisingly effective

👍 1
Prometheus20:04:02

@UEENNMX0T SFC (single file component) style I think it's called. The term they use on their website is collocation of inherently coupled concerns.

👍 1
AJ Jaro00:04:15

Since some of our view namespaces can get larger, we've went with the approach to have a model (containing subscriptions) and an events namespace separated. It is helpful for us to separate the view from the state and events, almost like an MVC for the frontend. I'm surprised to hear about navigation here since navigating within a namespace should, theoretically, be the same as navigating to a different namespace

👍 1
lispers-anonymous16:04:58

In my current application we have a 2 main folders, 1 for components that we reuse among many features, and another for features themselves. Within the feature folders there are more folders and files broken up by components within the feature. We started by splitting each feature among three namespaces for events/subs/views, but I believe that was a mistake. We ended up with giant view/sub/event namespaces for a single "feature". Having things broken down by sub-features/components within the main feature with all their events/subs/views contained in a single namespace would have been much better. I do that now with new features when possible.

😎 1
2
kennytilton00:04:07

I am surprised and delighted to hear so many folks voting with their feet for what I have heard called "co-location". 👏

superstructor06:04:47

In the past I've generally done 1. as a folder with files for subs.cljs / events.cljs / views.cljs etc but after many years I've also found it is not ideal. In future projects I'll probably try co-locating events/subs/views but having not done so on a large project yet I can't say for sure that it will work out like I think it will....