UNISYS Component

WHAT IS UNISYS COMPONENT

In #23 we introduced UNISYS.Component, which is an extension of REACT.Component. It communication between React components and other modules in our system with much less boilerplate.

UNISYS LIFECYCLE

To effectively communicate with other UNISYS modules, you need to be aware of what you can do, and the expected order you can do them. In UNISYS, we call this the lifecycle of the application.

UNISYS is the controller of the webapp lifecycle, responsible from initial load of raw javascript to final rendering. The lifecycle is divided into phases that MUST COMPLETE IN ENTIRETY before the next phase is executed.

• For a definitive definition of our lifecycles, see client-lifecycle.js.
• To see the implementation of the lifecycle, see init.jsx.

REACT and UNISYS LIFECYCLE

Our apps use REACT for the AppShell, which is not user-changeable. Our apps are called "Views" and are rendered inside the AppShell.

• The root REACT view is defined in init-appshell.jsx is managed by UNISYS such that ReactDOM.render() executes after INITIALIZE, LOADASSETS, and CONFIGURE phases have completed.

• Views (e.g. NetCreate.jsx) render inside of the AppShell, and is what we think of when we say "app" within our system.

• The view's constructor is where you can register state and message handlers for the component. However, you SHOULD NOT USE any UNISYS message or state services that are defined in OTHER React components, because they may not yet exist. Use the constructor for constructing only. All stand-alone UNISYS service modules "should" be accessible at the end of CONFIGURE, so they can be used in your constructor.

• UNISYS renders the View (e.g. NetCreate.jsx) through a ReactDOM.render() call to draw the system. After that, the DOM_READY, RESET, START and APP_READY phases execute in UNISYS modules.

React components that are made from UNISYS.Component have access ONLY to the phases that run after CONFIGURE:

• OnDOMReady(callback) - React View (e.g. NetCreate.jsx) has completedly rendered
• OnReset(callback)- Good place to set up component to run
• OnStart(callback) - UNISYS is starting up, so get ready
• OnAppReady(callback) - UNISYS has registered to the network, so NetCalls are available
• OnRun(callback). - UNISYS has started running

You can use these hook replacements to know when to access other React component UNISYS state or message services:

• If you need to talk to another component, they should all have been initialized by the time OnStart() fires.
• Put your component into the default state through OnReset()
• Get component ready to run when OnStart() is fired.
• Use OnAppReady() to know the earliest time you can make a NetCall.
• Use OnRun() when you want to be sure the entire system is completely initialized