1.
Workers in Angular
Bipin Paul Bedi
https://www.linkedin.com/in/bipinpaulbedi/

2.
Question
Does any one know about web workers / service
workers ?
Used one before ?
Used in Angular ?
Seen some one using it ?

3.
DEMO
PROBLEM ?
Every line of frontend javascript code ever written
has (momentarily) stopped your page from working.

4.
Even XMLHTTP REQUEST
Show Demo
& fetch()
& setTimeout, setImmediate, RxJs [Schedulers -
immediateScheduler, currentThreadScheduler,
timeoutScheduler]

5.
Stages of Improvement

6.
CONCEPT
WEB WORKERS : PARALLELISM
SERVICE WORKERS : OFFLINE [Stateless]

7.
Can I Use ?
Browser support…

8.
Web Workers

9.
Demo
Angular Modules in action using web workers
let status = new Worker(“Show Demo”).then(() => {
console.log(“Show Code”)}).catch(() => {“Don’t
Panic”})

10.
Code Breakdown
Main App -> main.ts : App module -> AppComponent
Dynamic Web Workers Loader [Web Workers, Web
Workers multithreaded]
WorkerLoader workerLoader.ts -> worker.module.ts ->
Background Worker Components
ServiceWorker -> serviceWorker.ts
Service -> GraphInfo, Fibonacci, GraphInfoMB

11.
Steps
ng Eject
Create a worker Loader
PolyFill Angular Bootstrap as
platformWorkerAppDynamic
“entry”, “HTMLWebPackPlugin” excludes, “Common
chunks” set inline explicit,

12.
Message passing
Is there a better way of passing message ?
MessageBus, ServiceMessageBrokerFactory,
ClientMessageBrokerFactory
https://angular.io/docs/ts/latest/api/platform-
webworker/index/MessageBus-class.html
let status = new MessagePassingDemo(“Show
Demo”).then(() => { console.log(“Show
Code”)}).catch(() => {“Don’t Panic”})

13.
Not Available
The window object
The document object
The parent object

14.
Available Features
The navigator object
The location object (read-only)
XMLHttpRequest [for service worker use fetch]
setTimeout()/clearTimeout() and setInterval()/clearInterval()
The Application Cache
Importing external scripts using the importScripts() method
Spawning other web workers

15.
Inline workers ?
Blog Object
window.URL.createURLfromObject
let status = new Example(“Show Example”).then(() =>
{ console.log(“Show Code”)}).catch(() => {“Don’t
Panic”})

16.
Where to use ?
Prefetching and/or caching data for later use
Code syntax highlighting or other real-time text formatting
Spell checker
Analyzing video or audio data
Background I/O or polling of webservices
Processing large arrays or humungous JSON responses
Behavioural monitoring
Updating many rows of a local web database

17.
Vs Service Worker

18.
How ?
navigator.serviceWorker.register(‘/sw.js')
Use MessageChannel & PORTS1, PORT2
Angular Message Classes
let status = new DemoTime(“Show Demo”).then(() =>
{ console.log(“Show Code”)}).catch(() => {“Don’t
Panic”})

19.
Limitations
You are not running your application through HTTPS.
The path to your service worker file is not written
correctly
The service worker being pointed to is on a different
origin to that of your app. This is also not allowed.

20.
Question ?

21.
Thank You