Hi all,
In the new React based dashboard widget is defined as a another React
component. ATM these widgets are basic React components which extends from
React.Component class.
But within these widgets we need to provide some extra capabilities for
widget developers such as providing mechanism to inter-communicate among
widgets via pub/sub, provide APIs to save widget states, etc. And also
there is another issue with the current implementation i.e. the CSS styles
embedded within a widget may conflict with styles applied to dashboard and
other widgets (no CSS isolation).
*Solution:*
As a common solution for these requirements we thought of introducing a
base widget class so that all the other widgets can extend from this base
class instead of React.Component. By introducing this base class we can
provide additional capabilities to widget developers.
Ex. 1) Pub/sub
For the Pub/sub implementation base widget component can expose methods and
events for widgets to use (methods for publishing/subscribing to topic).
Ex. 2) CSS isolation
For CSS isolation we can isolate the widget content using React shadow DOM.
For that we can introduce a new method called renderWidget() in the widget
base class and all the widgets can define the renderWidget() instead of the
React's render() method. Within the render() method of the widget class we
can invoke the renderWidget() method and wrap the resultant content using
React shadow DOM. High level implementation of those components will be as
follows.
*Widget base component:*
class Widget extends React.Component {
/* ... */
render() {
return (
<ShadowDom>
renderWidget()
</ShadowDom>
);
}
/* ... */
}
*Widget component:*
class MyWidget extends Widget {
/* ... */
renderWidget() {
return <MyWidgetContent />;
}
/* ... */
}
Any feedback on this?
Regards,
*Lasantha Samarakoon* | Software Engineer
WSO2, Inc.
#20, Palm Grove, Colombo 03, Sri Lanka
Mobile: +94 (71) 214 1576
Email: lasant...@wso2.com
Web: www.wso2.com
lean . enterprise . middleware
_______________________________________________
Architecture mailing list
Architecture@wso2.org
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture
