Ideas to Share Components Across CMS And Portal And TUP

Goal

How can we consistently share a component on a Portal and a CMS and any other web UI?

Decision (as of 2022-03-31)

Create a Node package with React Components.

• Core Portal uses them via its React framework.
• TUP uses them via its React framework.
• CMS could use them via some solution.*

* CMS Solutions

• How to Use React with djangoCMS 3.5.2 and above?
• Connecting React components with Django
• example usage

Needs

Use Cases:

• System Monitor (on Frontera Home page)
• Ticket Listing
• Header Search Bar, Portal Navigation, CMS Navigation, Logo, and "Branding"
• Visqueue (to be used on new Frontera website)
• Allocations

Guidelines:

• Do not duplicate code (how header shared content during 2020).
• Do not load from CMS after page load via AJAX (how header shares "components" since early 2021).
• Do not maintain the same component with two technologies (unless there's a DRY way to do this).

Wishes:

• Use Typescript.
• Don't be locked into a build process.

Ideas

Ways to Package:

• React Components
  • How to Use React with djangoCMS 3.5.2 and above?
  • Connecting React components with Django
  • example usage
• 🆕 : Build independently with shared styles
• custom elements (web standard)
• Django CMS plugins
• Python apps (PIP, Poetry)

Ways to Share:

• 🆕 : Node package with React Components. CMS loads just enough React to load Component.
• 🆕 : To share CSS & reference markup to any project via Node package.
• To share markup with server-side template logic (Portal Navigation), share templates and data server-side.
• To share React Components to CMS, wrap React Component in a Custom Element.*
• To share Custom Elements to Portal, wrap Custom Element in React Component.
• To share (any) component to CMS, wrap each in a Django CMS plugin.
• To share (any) component to (any) site, wrap each as a Python app.

---

Footnotes

* The Custom Element must use React if it exists, or otherwise load it. That process itself could be encapsulated in a Custom Element.