Skip to content

Ideas to Share Components Across CMS And Portal And TUP

W. Bomar edited this page Mar 31, 2022 · 9 revisions

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

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:

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.

Clone this wiki locally