WebWorkers with angular 2+

Viewed 76

I have few questions regarding web-workers in context with angular, so basically I am working on webapp(dashboard) that having few widgets(table [ag-grid-enterprise], charts [e-charts], data-cards [custom-html]) and each widget comes up with its own data-fetch mechanism (web-socket or polling every 3 minutes). I am facing a huge lag or browser-freeze screen (more frequent when socket bombards the data to UI) sometimes Aw-snap in chrome.

[more context on browser-freeze]

  1. So a maximum of 7-8 widgets are shown on a page (display page having 3 levels of component nesting ) the middle component (that holds widget [child-component]) is responsible for fetching the data and handing over to the child component.
  2. When data is received some condition 'rules' calculation is done on data before handing it to the library to get rendered (by 'ag-grid' / 'e-chart' or just updating 'DOM {{variable}}' )
  3. These rules are nested upto two levels
  rules = [ {
        status: acive/inactive,
        operationOnConditions: '&&' / '||'
        condition : [
            {
                value: 5,
                opeartaion: '===',
                type: 'number',
                field:'maximumMarks',
            },{},{},{},{} // max-5
        ],
        applyThisUIEffect:[
            {}
        ],
       applyThisBackgroundEffect:[
            {}
       ]
    },
   {} ,{}, {}
   ]

  1. Once conditions are fulfilled It will return final set of rules and out of which I will get all the applyThisUIEffect:[] and applied to it accordingly.

To avoid heavy calculation, Webworker seems to be the most viable option to shift the calculation, but I am stuck with few things and not able to find the answers.

[Queries]

  1. If creating web-workers with angular app where it should be managed e.g. at app-level / module-level / component-level and then communicating with the nested child.
  2. How to manage race-condition between the two threads, e.g. after calculation I want to send a message to main thread so that it can update a variable and that variable will make a difference in the UI
  3. If we shift polling and socket functionalities to web-workers, how will it be communicating with every widget (if webworker is single at a module-level or parent level )
  4. If I terminate a web-worker , can it be spin back again?
  5. As one of the option given by angular-framework to bootstrap your app through web-worker, is there any cons because every app cannot be bootstrapped like this.

It will be helpful if some pointers on architecture, that would help to talk with web-workers in angular app.

P.S.: I am able to spin the web-worker @app level, but not able to decide how to use it with nested components.

0 Answers
Related