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]
- 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.
- 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}}' )
- These rules are nested upto two levels
rules = [ {
status: acive/inactive,
operationOnConditions: '&&' / '||'
condition : [
{
value: 5,
opeartaion: '===',
type: 'number',
field:'maximumMarks',
},{},{},{},{} // max-5
],
applyThisUIEffect:[
{}
],
applyThisBackgroundEffect:[
{}
]
},
{} ,{}, {}
]
- 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]
- 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.
- 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
- 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 )
- If I terminate a web-worker , can it be spin back again?
- 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.