Generic frontend architecture (SPA)

  • flat hierarchy of modules is desirable
  • clear dependency graph (goal: tree)
  • components are the most basic building block and each module consists of them. 
  • each ‘page’ its own module
    • no dependencies between page-modules (except from routing)
    • avoidance of sub-pages
    • a page has a route
    • a page is responsible for delegating data processing to the business-rules and presentation of data by glueing the components
    • examples: home-page, product-detail-page, search-page, cart-page, checkout-page
  • shared module types
    • common-ui: ui-components used by several pages, e.g. a product-box or a banner
    • basic-ui: generic ui-components like form elements
    • business-rules: the business rules and logics are implemented in this layer. Usually these are data storage and API-integrations. Submodules are determined by topics/entity types like product, order, user, etc. 
    • library: generic modules are located in this layer, including the base framework and any other 3rd party module used in the project.