Layouts vs Containers

Question

Layouts vs Containers

Closed this issue 9 years ago · 9 comments

In the Application Structure section we recommend a ui folder called layouts. In the React section we refer to a ui folder called containers.

Are these the same, and if so which one should we standardize on?

Answer 1 · 2016-05-09T04:05:39.000Z

Base uses both :)

https://themeteorchef.com/base/file-structure/

Answer 2 · 2016-05-09T05:07:27.000Z

I think Base tries to keep inline with the Guide, so that may be how they interpreted it . What else would you put inside layouts other than App?

Answer 3 · 2016-05-09T05:11:54.000Z

If there really is a use-case for both, then the Guide should still be updated to reflect that.

Answer 4 · 2016-05-09T07:47:12.000Z

In React (and the Meteor use cases of React), containers are often used to inject data into UI components, not so much as layouts - at least from what I can see. So it's probably not a good idea to conflate the two.

Answer 5 · 2016-05-09T08:04:18.000Z

Yeh, I came across this article that does a fairly good job of explaining the container components pattern: https://medium.com/@learnreact/container-components-c0e67432e005#.nfu4pe7rg

So if that's the case then the best option is to just add a containers line to the Application Structure section. Something like:

ui/
    layouts/               # wrapper components for behaviour and visuals
    containers/            # data fetching and sub-component rendering
    pages/                 # entry points for rendering used by the router
    components/            # all reusable components in the application
                           # can be split by domain if there are many

Answer 6 · 2016-05-10T17:05:53.000Z

In the Todos Blaze app, we use pages/ for this purpose (i.e. pages both deal with the router and inject data). In the React app, we have a more subtle pattern where the pages are split from the containers. This is perhaps better because you may want to inject data at other points than at the page level.

I think our thinking was to wait a little bit and see if a strong convention emerged for React apps with respect to this stuff, then to probably migrate the Blaze app to do it too. Do we think we've reached that point?

Answer 7 · 2016-05-16T05:19:47.000Z

Not really, it's still a mess out there!

Answer 8 · 2016-05-23T18:48:46.000Z

The more I've thought about this, containers shouldn't be a separate folder within ui. I've always got my containers next to the page/component that they are feeding data to:

ui/
  pages/
    profile/
      index.js
      profileContainer.js
      profilePage.js

Answer 9 · 2016-05-26T22:05:28.000Z

Closing this as it comes down to your coding style. My recommendation is to keep data containers alongside the components that they feed.