Ignite: Application Structure

[illing2005]

I'm coming from react and there exists also a great boilerplate https://github.com/mxstbr/react-boilerplate.

Recently they had a long discussion about the application structure ( mxstbr/react-boilerplate#27 ).
What they come up with is the idea of "group by feature" instead of "group by type".

This basically means, that all files associated with a component / container (actions, sagas, reducers, ...) are located in the same folder (see example below).

App
|-- Components
|    |-- AlertMessage
|    |   |-- index.js    //contains actual component
|    |   |-- style.js 
|    |-- CustomNavBar
|        |-- index.js
|        |-- styles.js        
|-- Containers
|    |-- App
|    |    |-- index.js
|    |    |-- actions.js
|    |    |-- reducers.js
|    |    |-- sagas.js
|    |    |-- styles.js
|    |-- APITestingScreen
|        |-- index.js
|        |-- actions.js
|        |-- reducers.js
|        |-- sagas.js
|-- rootReducer.js     // combines all reducers
|-- rootSages.js        // combinses all sagas

The main advantages are

• Easy renaming of components
• work in a single folder for new features
• Reusable Components / Containers

I think this is a really great approach to scale applications and could be adopted by this repo.
Here is a video where @mxstbr explains this concept in depth: https://vimeo.com/168648012

[skellock]

We half-opted into that. Only at the redux level though. Not at the component level.

[skellock]

I will say, though. On a recent project I did split up the components & containers into a subcategories. It was pretty good, but they didn't encompass "everything" like Ducks or that boilerplate.

[illing2005]

I used this approach in a couple of projects now and found it very helpful, especially if you have a large number of components / containers. Imagine a project with hundreds of containers. With the current folder structure, you end up searching files in five of six different folders to add a feature to one component. This could take you ages...

[GantMan]

the issue with the domain specific lock in, is that things get reused on different parts as an app grows.

For instance, if I have a add to cart saga. That could happen from different screens. I think the issue becomes messy when you try to make it fit all apps.

[illing2005]

I see that point, but for these cases, you can have a something like a GlobalSagas.js file in the root directory.

[GantMan]

might have to give it a go on a project

[ruddell]

The current structure makes sense for a small app (like what's generated), but after adding a few containers, components, styles, etc, most of my folders are already at 20+ files which is hard to navigate through.

In JHipster (Spring+Angular app generator), for our Angular 2 app we use a shared folder to hold components/services that are used in multiple places (our structure). We follow the Angular styleguide which mentions the LIFT principle (I know this is react-native but I feel it still applies), meaning a developer should be able to:

Locate code quickly, Identify the code at a glance, keep the Flattest structure you can, and Try to be DRY.

[illing2005]

might have to give it a go on a project

You'll love it :)

[budda]

I've always been a fan of domain orientated grouping and LIFT. Coming from a Drupal background I like the way all files are contained in a single module directory for easy working on, and re-use across many future projects.

[skellock]

With Ignite 2, we have the concept of app templates. Basically you can make your own architecture and still use the plugin system from Ignite. =)

[sujayjaju]

Ignite seems to be the go-to choice in terms of react-native boilerplate.
Coming from the React web apps side, I am quite sold on the "group by feature" structuring suggested by @mxstbr - its really helpful as the project scales.

I could not find a clean way to get started with ignite but sticking to the group-by-feature structure. @skellock - can you please point some docs to the concept of app templates? All the available boilerplates here https://github.com/infinitered/ignite/blob/master/BOILERPLATES.md seem to follow the same group-by-type structure.

[skellock]

We will be releasing a new ignite boilerplate shortly with some group-by-feature added.

At least at the views level. Which is the majority of code. 😁

[sujayjaju]

Awesome. I will look forward to it.
I love how react-boilerplate/react-boilerplate does it: https://github.com/react-boilerplate/react-boilerplate/tree/master/app/containers