Best Practices

  1. Enable high-quality digital experiences leveraging best practices such as Material.
  2. Enable shipping new features faster with OOTB libraries such as Material-UI React UI.
  3. First class Typescript build support
  4. Opinionated: automated way to perform repetitive tasks e.g.: via CLI commands such as create-plugin, start-plugin, start-dev-plugin
  5. Reusable: ability to reuse the same pattern to inject data in common UI components such as Lists, Tables and others (e.g. here).
    1. More specifically, similar data and properties to pass data between components.
  6. Ability to fetch data from external sources, incl. popular API backends such as GraphQL
  7. Built in authentication, authorisation and test framework with mainstream frameworks, e.g.: passport.js, jest, etc
  8. About the structure:
    1. a plug-in should be deployable as a self-contained webapp
    2. A plug-in should contain one or more components.
    3. A component should have ideally:
      1. No more than one UI component to increase reusability.
      2. No more than one data source/back end, which can be provided by:
        1. A micro-service within the same domain or
        2. External source via service proxy (like Nginx, HAProxy, etc.) to work around CORS policies.
image taken from Spotify’s backstage architecture page.

Notes

  • The following items are inspired in Spotify’s backstage per instructions here:
    • Req #4 (here), whcih describes the commands yarn install, yarn create-plug-in and yarn dev. Which is akin to ng new <app_name>, ng serve –open and ng generate component <component_name>
    • Req #8 (here)

Pending to document