+1, I think this will also help us to manage user-prefs in the future.

On Thu, Aug 31, 2017 at 1:44 PM, Lasantha Samarakoon <[email protected]>
wrote:

> 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 <071%20214%201576>
> Email:  [email protected]
> Web:    www.wso2.com
>
> lean . enterprise . middleware
>



-- 

*S. Suhothayan*
Associate Director / Architect
*WSO2 Inc. *http://wso2.com
* <http://wso2.com/>*
lean . enterprise . middleware


*cell: (+94) 779 756 757 <077%20975%206757> | blog:
http://suhothayan.blogspot.com/ <http://suhothayan.blogspot.com/>twitter:
http://twitter.com/suhothayan <http://twitter.com/suhothayan> | linked-in:
http://lk.linkedin.com/in/suhothayan <http://lk.linkedin.com/in/suhothayan>*
_______________________________________________
Architecture mailing list
[email protected]
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture

Reply via email to