Change folder structure to modules from projects

[mstriemer]

As we start sharing code between our projects there is a lot of stuff ending up in core and some of the projects will get quite large. We might want to consider moving to a module based structure rather than a project based one.

Currently we have:

src/
  admin/
    containers/SearchPage/index.js
    client.js
  amo/
    containers/SearchPage/index.js
    client.js
  core/
    components/SearchForm/index.js
    reducers/
      addons.js
      search.js
    client/base.js
    server/base.js

So admin and amo are projects and core is used for the "framework" bits like standing up the server and webpack but it is also where we share components.

By moving to a module structure we would stop putting components into core and would instead make each folder self-contained (as much as possible, one way dependencies are allowed similar to if we published on npm).

I would also propose a ui module that is react only based on the UX mocks so the other modules can wrap those with some redux logic. Perhaps we'd end up with something like:

src/
  addons/
    reducer.js
  admin/
    containers/SearchPage/index.js
    client.js
  amo/
    containers/SearchPage/index.js
    client.js
  core/
    client/base.js
    server/base.js
  search/
    containers/SearchForm/index.js
    reducer.js
  ui/
    components/SearchInput/index.js

Where SearchPage imports SearchForm and adds markup and styles as needed for the specific project; and SearchForm imports SearchInput and adds redux hooks. I'm using search as an example because I was just working on it, this should extend to other areas as well.

This could also prepare the codebase to extract some of these modules to npm modules if we ever need to. amo/client.js, amo/routes.js, etc only import from core which can be extracted (I'm not 100% sure this is currently the case but it isn't entirely off). ui has no imports so it can easily be extracted. search is shared between admin and amo but only imports from ui. admin and amo are the top level projects so they can become their own repositories and import the versions they need. (I'm not advocating we split the monorepo, I still like it, but we've always discussed there being a potential need some day and this could help our day-to-day structure and ease that transition if it happens.)

I assume we would do this after we switch to ducks in #9939. This is inspired by Rules For Structuring (Redux) Applications.

[tofumatt]

Wow. That sounds cool (and I like the idea of react-only mocks 👍).

[kumar303]

Seems fine to me. I would just want to preserve our ability to use paths (one day) to validate server vs client bundles with the linter. Details: #2017

[kumar303]

There may be an opportunity to restructure the app more based on URLs after updating to the new router #10295

[willdurand]

I guess we could organize our components in terms of "page" but apart from that, I don't think we need to go into this direction anymore. Can we close this issue @kumar303?

[willdurand]

Closing this issue in favor of #12116