Architecture To Support Multiple Markets & Flows

Rob Fyffe — Tue, 08 Jun 2021 22:56:01 +0000

Looking to get some opinions/suggestions on how to manage or improve an application that supports multiple markets and flows. As an example we can use a form. There is one base form that can potentially be different per flow & market.

Current architecture is along these lines:

const ExampleTopLevel = ({ customSlots = {}, ...props }) => {
  const newSlots = {
    ...exampleSlot1(),
    ...exampleSlot2(),
    ...exampleSlot3(),
    ...exampleSlot4(),
  };

  const combinedSlots = { ...customSlots, ...newSlots };

  switch (condition) {
    case "BRAND":
      return <ExampleBrandSecondLevel customSlots={combinedSlots} {...props} />;
    default:
      return combinedSlots;
  }
};

const ExampleBrandSecondLevel = ({ customSlots, ...props }) => {
  const newSlots = {};
  const combinedSlots = { ...customSlots, ...newSlots };

  switch (condition) {
    case "FLOW_1":
      return <ComponentFlow1 customSlots={combinedSlots} {...props} />;
    default:
      return combinedSlots;
  }
};

const ComponentFlow1 = ({ customSlots = {}, ...props }) => {
  const newSlots = {};
  const combinedSlots = { ...customSlots, ...newSlots };

  switch (config.market) {
    case "MARKET_1":
      return <ExampleMarket1 customSlots={combinedSlots} {...props} />;
    default:
      return combinedSlots;
  }
};

const ExampleMarket1 = ({ customSlots = {} }) => {
  const newSlots = {
    ...exampleSlot1({ readOnly: true }), // Overwrite top level
    ...newSlot1({
      inputRef: null,
    }),
  };

  const combinedSlots = { ...customSlots, ...newSlots };

  return combinedSlots;
};

// Final Result for Flow_1 & Market_1:
const slots = {
  ...exampleSlot1({ readOnly: true }),
  ...exampleSlot2(),
  ...exampleSlot3(),
  ...exampleSlot4(),
  ...newSlot1({
    inputRef: null,
  }),
};

This works, however it is causing a lot of duplicate code as this is the same scaffolding for all components across the application.

I have thought about a schema approach but that becomes difficult to read when there are 15+ slots with different customisations such as labels, onClicks etc. etc.

DEV Community: Rob Fyffe

Architecture To Support Multiple Markets & Flows