Make sure the starters and examples use a better redux folder naming strategy

[SethDavenport]

Learnings from a recent large react project:

I actually really wish we'd broken the app down by feature area instead of by type of construct. But that ship has sailed at this point.

In future, instead of

• sagas
• selectors
• reducers
• containers
• components
• store

I would probably next time do something like:

• pages
  • routes.js
  • checkout
    • checkout.container.js
    • checkout.selectors.js
    • checkout.actions.js
    • checkout.sagas.js (or effects/epics)
    • components
      • [checkout-specific dumb components]
  • ... (some other page)
• common - for stuff shared across multiple pages
  • selectors - shared selectors
  • sagas (or effects, or epics) - common sagas/effects/epics like request-sequence
  • components
    • [shared dumb components - when you use it in more than one page, move it here]
• store
  • configure-store.js
  • reducers
    • // all the reducers
• app
  • app.container.js

[SethDavenport]

This can apply to all flavours of project: Angular/ng2-redux, Angular/ngrx, AngularJS/Redux, React/Redux.

This structure is much easier to grok when the codebase is large. @e-schultz @bennett000 @seanmay @egervari @smithad15 This has all come up with each of you independently, I think it's time to make sure that the starters are configured to follow this by default.

@smithad15 you've played with codelyzer most recently - can we make such a structure play nice with the official angular style guide?

[SethDavenport]

If so, we should get it into the starters and the example apps. Order of priority:

ASAP:

• angular2-starter
• react-starter

Medium-SAP: 😃

• angular2-redux-example
• react-redux-example
• typescript-redux-example

Low-SAP:

• angular-starter (the ng1 one)
• angular-redux-example (doesn't exist yet, still needs to be split from the ng1 starter)

[smithad15]

For angular, we will need to make some style guide specific tweaks when it comes to the pages folder as that would be substituted for the feature folder paradigm from the style guide (also has some router based lazy loading implications). I've been wanting to do a refactor of angular2-redux-example to follow this for awhile now but keep getting swamped with client projects. I had white-boarded a more angular-centric outline of this at one point. I can clean that up a bit and share it if desired.

The angular2-starter should already support this structure since we decided to strip almost everything out of it, including anything redux related. For angular 2 I would say that getting the example changed would be more useful.

[SethDavenport]

makes sense. I'm not too worried about the particular folder names - features makes sense as well. just want to move to more of a feature - based approach, but without coupling the store

[smithad15]

For consideration: https://github.com/smithad15/angular2-folder-structure-example

I realise that there are parts of the store inside of each feature folder, however, I still think that there are parts of the application state that are tied to each feature area and should live there until they are used outside of that feature. At that point then of course they need to be promoted up to something more global.

[SethDavenport]

cc: @clbond

[SethDavenport]

@egervari @clbond did either of you make any headway on this

[smithad15]

This still hasn't been completed in angular2-starter-example

[SethDavenport]

Agreed. Hoping we can get some traction on it once the example is cliified

Senior JavaScript Developer

Rangle.io http://rangle.io/ -* Rewriting the Web* Phone: 416-737-1555 | 1-844-467-2645 Mail: 129 Spadina, Suite 500, Toronto, ON. M5V 3E3 Connect with us! Blog http://rangle.io/blog/ | Twitter https://twitter.com/rangleio | LinkedIn http://www.linkedin.com/company/5018494 | Google+ https://plus.google.com/+rangleio/posts | Facebook https://www.facebook.com/rangle.io

On Mon, Feb 27, 2017 at 2:19 PM, Andrew Smith [email protected] wrote:

This still hasn't been completed in angular2-starter-example

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/rangle/rangle-starter/issues/214#issuecomment-282821798, or mute the thread https://github.com/notifications/unsubscribe-auth/AEZn_beR8Mcu-W6P9MDjUSwCpN0lqC95ks5rgyHJgaJpZM4LVFgj .