Jarvis Portal Shell
Micro frontend libraries built with Jarvis
What is Jarvis Portal Shell (JShell)?
Jarvis Portal Shell (or JShell) is a set of tools being developed in HP to support micro frontend (MFE) architecture on HP user portals. It will provide tools to install and build micro frontends, a composer to manage the loading and unloading of micro frontends, and APIs for micro frontends to directly access HP backend services.
As various HP dev teams build out services for users, JShell provides tools to encapsulate these services as reusable micro frontends (blocks of UI). Then, factors like user roles, entitlements, program level, context, etc., can determine which services are made available to the user.
The MFEs that correspond to the relevant services are then composed by JShell into a unified frontend (UX) for the user on a portal.
Micro-frontend architecture
- What is micro-frontend (MFE) architecture?
-
MFE architecture is a way to design an app's frontend (the part that users see on their devices). The MFE approach breaks down the app into independently developed user interface (UI) parts that can be assembled into a cohesive user experience (UX).
MFE architecture's three key elements are:- Host pages
- Micro frontends
- A micro-frontend framework (like JShell provides)
- Host pages
-
A host page is simply an online place that users visit. It can be a webpage visited by web browser, a page in a mobile app, or a page in a desktop app. Host pages (and groups of host pages) are often referred to as portals.
What makes MFE host pages different from non-MFE pages, is the MFE host page is divided into areas that act as mini-apps within the host page. Each mini-app on the host page is referred to as a micro frontend.
- Micro frontends
-
On a host page, one area at the top might be for notifications, another nearby area for account info, and somewhere there's an area for support. Each area represents a set of related functionality that allows the user to accomplish a set of tasks. In MFE architecture, each of these sets is bundled together to be developed independently as a micro frontend.
- Micro-frontend framework
-
The micro-frontend framework ties together the micro frontends and the host page in which they reside. It manages loading and unloading of micro frontends and any other contractual work to get the micro frontends to work on the host page. JShell provides this framework.
- Where can I learn more about micro frontends?
-
There are numerous good resources on the web to learn about micro-frontend architecture. One good place to start is micro-frontends.org.
PROCESS WORKFLOW
Use JShell to create & deploy an MFE and integrate with a portal
Step 1: Get your MFE template
Using the MFE starter template greatly simplifies the workflow. It will ensure your creation conforms to standard Jarvis‑recommended technologies like Typescript, Sass, HP Veneer, React Styleguidist, HP Codeway pipeline, Sonar Qube, React Testing Library, etc.
Step 2: Configure your MFE
Manage your micro frontend’s integration by mapping deployed micro-frontend versions that a given portal can load, and defining portal behavior including public/private routes, services such as login/onboarding, and left side menu items.
Step 3: Set up dependencies
Include any dependencies that will facilitate integration with existing HP portals
Step 4: Define what your micro frontend does
Add functionality and connectivity to any backend services via various backend APIs
Step 5: Integrate with JShell
Integrate with JShell Composer to manage composition of your micro frontend using the config you previously set up.
Step 6: Debug
Run a pipeline to push your micro frontend so that it loads and renders correctly.
Step 7: Engage with analytics team
Talk to the right people to get the right level of event tracking in place for your MFE.
Step 8: Integrate with a portal
Integrate with JShell Composer to manage composition of your micro frontend into a given portal using the config you previously set up.
Step 9: Deploy
Run a pipeline to push your micro frontend so that it loads and renders correctly in the portal.
Learn more about getting started with this workflow here.
PROCESS WORKFLOW
Use JShell to create and deploy a user portal
Visit the JShell MS Teams channel to inquire about this workflow.
How do I get help with JShell?
|
To get support and status of current JShell issues:
|
Visit the JShell MS Teams channel |
|
For all other JShell inquiries:
|
Contact the JShell Team |
|
For general questions related to the Jarvis platform:
|
Contact the Jarvis team |