Skip to content

Modules

MeyerBuaharon edited this page Dec 13, 2019 · 2 revisions

The project is separated into modules that encapsulate common functionality.

Modules are defined by a directory at the root of the src directory, and have an index.js file at their root.

The modules are laid out at the same directory level. The structure is flat:

src/
  app/
  shared/
  editor/
  slides/
  timeline/
  toolbar/
  toolbox/

Layered archtiecture

While the structure is flat, traditionally modules are separated into layers. Names are convention based:

Layer Modules
Top app
Middle toolbox, editor, slides, toolbar, player, timeline
Bottom shared

As can be seen, there are horizontal module (cross cutting concerns) and vertical modules (feature based).

Rules of engagement

The rules of engagement between modules are as follows:

  • A module can only reference items in modules at the same level or at a lower level (Unidirectional flow). Note: In simple projects we allow only access to a lower level.
  • All module should expose all it's shared items by explicitly exporting them from it's top level index.js file.
    • The exception to the rule is the shared modules which allows access at any level. For practical reasons, to avoid heavy maintenance of index files.
  • Modules at the middle tier may expose the following:
    1. Top level Components
    2. A single reducer (for projects with redux)
    3. Externally callable action creators (export * as actions from './actions') (for projects with redux)

Note: app module items are only usable from the within the app module and from the main index.js file of the project. On the other hand, items in the shared module can be used by code in any module.

Our goal is to create self contained and autonomous chunks of code. We work hard to decouple code artifacts from on another, be it classes, function or modules. The less aware of the environment in which they operate in and the less dependent they are, the better.

Note: We do not separate the modules into actual npm packages for technical reasons related to ease of development. However we do want to be able to do it in the future, so the rules of engagement must be followed.

Clone this wiki locally