Introduction

You may encounter these folders or descriptions on code investigation of open source project

• scenes
• screens
• intentions
• flows
• responsibility

Actually they are the same thing.

Applying a data-driven paradigm to frontend application, software development demanding real-time information with low latency is exceptionally benefited. However, the monolithic structure of corporate solution hinders the development due to the overwhelming selectors, reducers, sagas and components appeared on same folder in a traditional flattened structure.

To remedy this shortcoming, an additional level is added to group selectors, actions, reducers, etc together.

Design principle

Therefore, Scene ( or Screen or Flow or Intention ) -based folder structure would be a superior strategy to manage sophisticated structure.

A typical structure will be as follow

./app
    /configs
        /dev.js
        /beta.js
        /prod.js
    /l10n
        /images                  ( sync with shared drive with designer )
        /translations            ( sync with shared drive with translator )
    /reducers
        /${Scene}.js
        /index.js                ( rootReducer: import all sceneReducer )
    /routes
        /cart.js
        /me.js
        /session.js
        /index.js
    /scenes
        /${Scene}
            /actions.js          ( import common actionCreators, export all actionCreators related to this scene )
            /components/         ( implement components by enhancers, export necessary components to sceneRouter )
            /containers.js       ( import common containers, export all containers related to this scene )
            /sagas.js            ( import common yet enhanced saga , export sceneSaga )
            /selectors.js        ( import common selectors, export all selectors related to this scene )
            /tests/
            /mock.js             ( For dev use on tuning CSS )
            /index.js            ( import components, export sceneRouter )
    /services
        /navigations.js
        /data_source.js
        /tracking.js
        /data_base.js
        /index.js
    /shared
        /constants.js
        /actions.js
        /components/${component_name}/
        /selectors.js
    /App.js                      ( The rootComponent of Application, import store, i18n and necessary providers )
    /i18n.js                     ( i18next init )
    /index.js                    ( rootRouter: import all sceneRouter )
    /sagas.js                    ( rootSaga: import all sceneSaga )
    /store.js                    ( import ../common/enhancers/_configureStore.js, rootReducer, rootSaga )
./common
    /actions/${Scene}.js
    /constants/${Scene}.js
    /enhancers/${Scene}.js
    /reducers/${Scene}.js
    /sagas/${Scene}.js
    /selectors/${Scene}.js
    /tests/${Scene}.js

And eventually

• Navigation control will be moved from ./app/routes/App.js to ./app/App.js
• Routes and router of individual scene or flow will be moved from ./app/routes/#{Scene}/ to ./app/scenes/${Scene}/index.js
• Main router that both navigation control and router of scenes merged will be moved from ./app/routes/index.js to ./app/index.js

Scene, though some coders named as Screen, is not necessarily referred to a single page, e.g.

1. scenes/AccountLogin should consists of all pages including
   1. routes/credential-input,
   2. routes/accept-terms-and-condition,
   3. routes/promo-code-input
   4. index.js should come with isAnonymous middleware
2. scenes/CartCheckout should consists of all pages including
   1. routes/inventory,
   2. routes/shipping,
   3. routes/invoices,
   4. routes/complete
   5. index.js should avoid deep link access
3. scenes/AccountViewer should consists of
   1. routes/purchase-list
   2. routes/purchase-detail
   3. routes/profile
   4. index.is should protected by isAuthenticated middleware