├── .gitignore
├── exercises
├── webworkers
│ ├── 4-angular-todo
│ │ ├── src
│ │ │ ├── app
│ │ │ │ ├── app.component.scss
│ │ │ │ ├── app.component.html
│ │ │ │ ├── todo
│ │ │ │ │ ├── entities
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── todo.ts
│ │ │ │ │ ├── components
│ │ │ │ │ │ ├── todo-list
│ │ │ │ │ │ │ ├── todo-list.component.scss
│ │ │ │ │ │ │ ├── todo-list.component.html
│ │ │ │ │ │ │ └── todo-list.component.ts
│ │ │ │ │ │ ├── todo-create
│ │ │ │ │ │ │ ├── todo-create.component.html
│ │ │ │ │ │ │ └── todo-create.component.ts
│ │ │ │ │ │ └── todo
│ │ │ │ │ │ │ ├── todo.component.html
│ │ │ │ │ │ │ └── todo.component.ts
│ │ │ │ │ ├── actions
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── todo.module.ts
│ │ │ │ │ └── services
│ │ │ │ │ │ └── todo.service.ts
│ │ │ │ ├── app.component.ts
│ │ │ │ └── app.module.ts
│ │ │ ├── environments
│ │ │ │ ├── environment.prod.ts
│ │ │ │ └── environment.ts
│ │ │ ├── styles.scss
│ │ │ ├── favicon.ico
│ │ │ ├── assets
│ │ │ │ └── sync.worker.mjs
│ │ │ ├── index.html
│ │ │ ├── main.ts
│ │ │ ├── test.ts
│ │ │ └── polyfills.ts
│ │ ├── .stackblitzrc
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.spec.json
│ │ ├── .editorconfig
│ │ ├── .browserslistrc
│ │ ├── .gitignore
│ │ ├── tsconfig.json
│ │ ├── package.json
│ │ ├── readme.md
│ │ └── karma.conf.js
│ ├── 2-angular-fibonacci
│ │ ├── src
│ │ │ ├── app
│ │ │ │ ├── fibonacci
│ │ │ │ │ ├── fibonacci.component.scss
│ │ │ │ │ ├── fibonacci.ts
│ │ │ │ │ ├── fibonacci.component.html
│ │ │ │ │ └── fibonacci.component.ts
│ │ │ │ ├── counter
│ │ │ │ │ ├── counter.component.html
│ │ │ │ │ ├── counter.component.scss
│ │ │ │ │ └── counter.component.ts
│ │ │ │ ├── app.component.html
│ │ │ │ ├── app.component.scss
│ │ │ │ ├── app.component.ts
│ │ │ │ └── app.module.ts
│ │ │ ├── environments
│ │ │ │ ├── environment.prod.ts
│ │ │ │ └── environment.ts
│ │ │ ├── styles.scss
│ │ │ ├── assets
│ │ │ │ └── sync.worker.mjs
│ │ │ ├── favicon.ico
│ │ │ ├── index.html
│ │ │ ├── main.ts
│ │ │ ├── test.ts
│ │ │ └── polyfills.ts
│ │ ├── .stackblitzrc
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.spec.json
│ │ ├── .editorconfig
│ │ ├── .browserslistrc
│ │ ├── .gitignore
│ │ ├── readme.md
│ │ ├── tsconfig.json
│ │ ├── package.json
│ │ └── karma.conf.js
│ ├── 3-message-channel
│ │ ├── src
│ │ │ ├── swap.worker.mjs
│ │ │ ├── swap.mjs
│ │ │ └── index.html
│ │ ├── .stackblitzrc
│ │ ├── browsersync.config.js
│ │ ├── package.json
│ │ └── readme.md
│ ├── 1-fibonacci
│ │ ├── .stackblitzrc
│ │ ├── browsersync.config.js
│ │ ├── package.json
│ │ └── src
│ │ │ └── index.html
│ └── 5-party-town
│ │ ├── .stackblitzrc
│ │ ├── package.json
│ │ ├── browsersync.config.js
│ │ ├── src
│ │ ├── index.html
│ │ └── partyTown.js
│ │ └── readme.md
└── webassembly
│ ├── 3-mandelbrot
│ ├── step-1-assemblyscript
│ │ ├── src
│ │ │ ├── mandelbrot.ts
│ │ │ ├── utils.mjs
│ │ │ ├── index.html
│ │ │ ├── mandelbrot.mjs
│ │ │ ├── worker.mjs
│ │ │ └── index.mjs
│ │ ├── .stackblitzrc
│ │ ├── browser-sync.config.js
│ │ ├── package.json
│ │ └── readme.md
│ └── step-2-workerpool
│ │ ├── .stackblitzrc
│ │ ├── browser-sync.config.js
│ │ ├── src
│ │ ├── worker-pool.mjs
│ │ ├── utils.mjs
│ │ ├── index.html
│ │ ├── mandelbrot.ts
│ │ ├── worker.mjs
│ │ └── index.mjs
│ │ └── package.json
│ ├── 1-add-wat
│ ├── .stackblitzrc
│ ├── src
│ │ ├── add.wat
│ │ ├── index.mjs
│ │ └── index.html
│ ├── browser-sync.config.js
│ ├── package.json
│ └── readme.md
│ └── 2-add-assemblyscript
│ ├── .stackblitzrc
│ ├── src
│ ├── add.ts
│ ├── index.html
│ └── index.mjs
│ ├── browser-sync.config.js
│ ├── package.json
│ └── readme.md
├── solutions
├── webworkers
│ ├── 4-angular-todo
│ │ ├── step-1-shared-worker
│ │ │ ├── src
│ │ │ │ ├── app
│ │ │ │ │ ├── app.component.scss
│ │ │ │ │ ├── app.component.html
│ │ │ │ │ ├── todo
│ │ │ │ │ │ ├── entities
│ │ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ │ └── todo.ts
│ │ │ │ │ │ ├── components
│ │ │ │ │ │ │ ├── todo-list
│ │ │ │ │ │ │ │ ├── todo-list.component.scss
│ │ │ │ │ │ │ │ ├── todo-list.component.html
│ │ │ │ │ │ │ │ └── todo-list.component.ts
│ │ │ │ │ │ │ ├── todo-create
│ │ │ │ │ │ │ │ ├── todo-create.component.html
│ │ │ │ │ │ │ │ └── todo-create.component.ts
│ │ │ │ │ │ │ └── todo
│ │ │ │ │ │ │ │ ├── todo.component.html
│ │ │ │ │ │ │ │ └── todo.component.ts
│ │ │ │ │ │ ├── actions
│ │ │ │ │ │ │ └── index.ts
│ │ │ │ │ │ ├── todo.module.ts
│ │ │ │ │ │ └── services
│ │ │ │ │ │ │ └── todo.service.ts
│ │ │ │ │ ├── app.component.ts
│ │ │ │ │ └── app.module.ts
│ │ │ │ ├── environments
│ │ │ │ │ ├── environment.prod.ts
│ │ │ │ │ └── environment.ts
│ │ │ │ ├── styles.scss
│ │ │ │ ├── favicon.ico
│ │ │ │ ├── assets
│ │ │ │ │ └── sync.worker.mjs
│ │ │ │ ├── index.html
│ │ │ │ ├── main.ts
│ │ │ │ ├── test.ts
│ │ │ │ └── polyfills.ts
│ │ │ ├── .stackblitzrc
│ │ │ ├── tsconfig.app.json
│ │ │ ├── tsconfig.spec.json
│ │ │ ├── .editorconfig
│ │ │ ├── readme.md
│ │ │ ├── .browserslistrc
│ │ │ ├── .gitignore
│ │ │ ├── tsconfig.json
│ │ │ ├── package.json
│ │ │ └── karma.conf.js
│ │ └── step-2-broadcast-channel
│ │ │ ├── src
│ │ │ ├── app
│ │ │ │ ├── app.component.scss
│ │ │ │ ├── app.component.html
│ │ │ │ ├── todo
│ │ │ │ │ ├── entities
│ │ │ │ │ │ ├── index.ts
│ │ │ │ │ │ └── todo.ts
│ │ │ │ │ ├── components
│ │ │ │ │ │ ├── todo-list
│ │ │ │ │ │ │ ├── todo-list.component.scss
│ │ │ │ │ │ │ ├── todo-list.component.html
│ │ │ │ │ │ │ └── todo-list.component.ts
│ │ │ │ │ │ ├── todo-create
│ │ │ │ │ │ │ ├── todo-create.component.html
│ │ │ │ │ │ │ └── todo-create.component.ts
│ │ │ │ │ │ └── todo
│ │ │ │ │ │ │ ├── todo.component.html
│ │ │ │ │ │ │ └── todo.component.ts
│ │ │ │ │ ├── actions
│ │ │ │ │ │ └── index.ts
│ │ │ │ │ ├── todo.module.ts
│ │ │ │ │ └── services
│ │ │ │ │ │ └── todo.service.ts
│ │ │ │ ├── app.component.ts
│ │ │ │ └── app.module.ts
│ │ │ ├── assets
│ │ │ │ └── .gitkeep
│ │ │ ├── environments
│ │ │ │ ├── environment.prod.ts
│ │ │ │ └── environment.ts
│ │ │ ├── styles.scss
│ │ │ ├── favicon.ico
│ │ │ ├── index.html
│ │ │ ├── main.ts
│ │ │ └── test.ts
│ │ │ ├── .stackblitzrc
│ │ │ ├── tsconfig.app.json
│ │ │ ├── tsconfig.spec.json
│ │ │ ├── .editorconfig
│ │ │ ├── readme.md
│ │ │ ├── .browserslistrc
│ │ │ ├── .gitignore
│ │ │ ├── tsconfig.json
│ │ │ ├── package.json
│ │ │ └── karma.conf.js
│ ├── 5-party-town
│ │ ├── .stackblitzrc
│ │ ├── package.json
│ │ ├── readme.md
│ │ ├── browsersync.config.js
│ │ └── src
│ │ │ ├── partyTown.js
│ │ │ └── index.html
│ ├── 2-angular-fibonacci
│ │ ├── step-1-worker
│ │ │ ├── src
│ │ │ │ ├── app
│ │ │ │ │ ├── fibonacci
│ │ │ │ │ │ ├── fibonacci.component.scss
│ │ │ │ │ │ ├── fibonacci.ts
│ │ │ │ │ │ ├── fibonacci.worker.ts
│ │ │ │ │ │ ├── fibonacci.component.html
│ │ │ │ │ │ └── fibonacci.component.ts
│ │ │ │ │ ├── counter
│ │ │ │ │ │ ├── counter.component.html
│ │ │ │ │ │ ├── counter.component.scss
│ │ │ │ │ │ └── counter.component.ts
│ │ │ │ │ ├── app.component.html
│ │ │ │ │ ├── app.component.scss
│ │ │ │ │ ├── app.component.ts
│ │ │ │ │ └── app.module.ts
│ │ │ │ ├── environments
│ │ │ │ │ ├── environment.prod.ts
│ │ │ │ │ └── environment.ts
│ │ │ │ ├── styles.scss
│ │ │ │ ├── assets
│ │ │ │ │ └── sync.worker.mjs
│ │ │ │ ├── favicon.ico
│ │ │ │ ├── index.html
│ │ │ │ ├── main.ts
│ │ │ │ ├── test.ts
│ │ │ │ └── polyfills.ts
│ │ │ ├── .stackblitzrc
│ │ │ ├── tsconfig.app.json
│ │ │ ├── .editorconfig
│ │ │ ├── tsconfig.spec.json
│ │ │ ├── tsconfig.worker.json
│ │ │ ├── readme.md
│ │ │ ├── .browserslistrc
│ │ │ ├── .gitignore
│ │ │ ├── tsconfig.json
│ │ │ ├── package.json
│ │ │ └── karma.conf.js
│ │ └── step-2-comlink
│ │ │ ├── src
│ │ │ ├── app
│ │ │ │ ├── fibonacci
│ │ │ │ │ ├── fibonacci.component.scss
│ │ │ │ │ ├── fibonacci.worker.ts
│ │ │ │ │ ├── fibonacci.ts
│ │ │ │ │ ├── fibonacci.component.html
│ │ │ │ │ └── fibonacci.component.ts
│ │ │ │ ├── counter
│ │ │ │ │ ├── counter.component.html
│ │ │ │ │ ├── counter.component.scss
│ │ │ │ │ └── counter.component.ts
│ │ │ │ ├── app.component.html
│ │ │ │ ├── app.component.scss
│ │ │ │ ├── app.component.ts
│ │ │ │ └── app.module.ts
│ │ │ ├── environments
│ │ │ │ ├── environment.prod.ts
│ │ │ │ └── environment.ts
│ │ │ ├── styles.scss
│ │ │ ├── assets
│ │ │ │ └── sync.worker.mjs
│ │ │ ├── favicon.ico
│ │ │ ├── index.html
│ │ │ ├── main.ts
│ │ │ ├── test.ts
│ │ │ └── polyfills.ts
│ │ │ ├── .stackblitzrc
│ │ │ ├── tsconfig.app.json
│ │ │ ├── tsconfig.spec.json
│ │ │ ├── .editorconfig
│ │ │ ├── tsconfig.worker.json
│ │ │ ├── readme.md
│ │ │ ├── .browserslistrc
│ │ │ ├── .gitignore
│ │ │ ├── tsconfig.json
│ │ │ ├── package.json
│ │ │ └── karma.conf.js
│ ├── 3-message-channel
│ │ ├── .stackblitzrc
│ │ ├── browsersync.config.js
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── swap.worker.mjs
│ │ │ ├── index.html
│ │ │ └── swap.mjs
│ │ └── readme.md
│ └── 1-fibonacci
│ │ ├── step-1-worker
│ │ ├── .stackblitzrc
│ │ ├── browsersync.config.js
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── fibonacci.worker.mjs
│ │ │ ├── fibonacci.mjs
│ │ │ └── index.html
│ │ └── readme.md
│ │ ├── step-3-worker-abort
│ │ ├── .stackblitzrc
│ │ ├── package.json
│ │ ├── readme.md
│ │ ├── browsersync.config.js
│ │ └── src
│ │ │ ├── fibonacci.worker.mjs
│ │ │ ├── fibonacci.mjs
│ │ │ └── index.html
│ │ ├── step-2-worker-terminate
│ │ ├── .stackblitzrc
│ │ ├── browsersync.config.js
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── fibonacci.worker.mjs
│ │ │ ├── fibonacci.mjs
│ │ │ └── index.html
│ │ └── readme.md
│ │ └── step-4-worker-comlink
│ │ ├── .stackblitzrc
│ │ ├── package.json
│ │ ├── readme.md
│ │ ├── browsersync.config.js
│ │ └── src
│ │ ├── fibonacci.worker.mjs
│ │ ├── fibonacci.mjs
│ │ └── index.html
└── webassembly
│ ├── 1-add-wat
│ ├── .stackblitzrc
│ ├── browser-sync.config.js
│ ├── src
│ │ ├── add.wat
│ │ ├── index.html
│ │ └── index.mjs
│ ├── readme.md
│ └── package.json
│ ├── 2-add-assemblyscript
│ ├── .stackblitzrc
│ ├── src
│ │ ├── add.ts
│ │ ├── index.html
│ │ └── index.mjs
│ ├── browser-sync.config.js
│ ├── package.json
│ └── readme.md
│ └── 3-mandelbrot
│ ├── step-2-workerpool
│ ├── .stackblitzrc
│ ├── browser-sync.config.js
│ ├── readme.md
│ ├── src
│ │ ├── utils.mjs
│ │ ├── worker-pool.mjs
│ │ ├── index.html
│ │ ├── mandelbrot.ts
│ │ ├── worker.mjs
│ │ └── index.mjs
│ └── package.json
│ └── step-1-assemblyscript
│ ├── .stackblitzrc
│ ├── browser-sync.config.js
│ ├── readme.md
│ ├── src
│ ├── utils.mjs
│ ├── index.html
│ ├── mandelbrot.ts
│ ├── worker.mjs
│ └── index.mjs
│ └── package.json
├── .editorconfig
└── readme.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/exercises/webassembly/3-mandelbrot/step-1-assemblyscript/src/mandelbrot.ts:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/src/app/fibonacci/fibonacci.component.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/app/app.component.scss:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/exercises/webworkers/3-message-channel/src/swap.worker.mjs:
--------------------------------------------------------------------------------
1 | // Implement the worker
2 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 | {{ counter }}
3 |
4 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/app/todo/entities/index.ts:
--------------------------------------------------------------------------------
1 | export { Todo } from './todo';
2 |
--------------------------------------------------------------------------------
/exercises/webassembly/2-add-assemblyscript/src/add.ts:
--------------------------------------------------------------------------------
1 | // implement a function that takes two numbers and returns the sum
2 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/src/app/todo/entities/index.ts:
--------------------------------------------------------------------------------
1 | export { Todo } from './todo';
2 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/app/todo/components/todo-list/todo-list.component.scss:
--------------------------------------------------------------------------------
1 | li {
2 | cursor: pointer;
3 | }
4 |
--------------------------------------------------------------------------------
/exercises/webassembly/1-add-wat/src/add.wat:
--------------------------------------------------------------------------------
1 | (module
2 | ;; implement a function that takes two numbers and returns the sum
3 | )
4 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/app/todo/entities/todo.ts:
--------------------------------------------------------------------------------
1 | export interface Todo {
2 | id: string;
3 | todo: string;
4 | }
5 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true,
3 | };
4 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/styles.scss:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/solutions/webassembly/2-add-assemblyscript/src/add.ts:
--------------------------------------------------------------------------------
1 | export function add(lhs: i32, rhs: i32): i32 {
2 | return lhs + rhs;
3 | }
4 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/src/app/counter/counter.component.html:
--------------------------------------------------------------------------------
1 |
2 | {{ counter }}
3 |
4 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/src/app/counter/counter.component.html:
--------------------------------------------------------------------------------
1 |
2 | {{ counter }}
3 |
4 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | Add
4 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackblitz/ng-be-workshop/main/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/favicon.ico
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/src/assets/sync.worker.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Implement the shared worker. Messages that come in should be broadcasted to all other connected "clients".
3 | */
4 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/src/assets/sync.worker.mjs:
--------------------------------------------------------------------------------
1 | /**
2 | * Implement the shared worker. Messages that come in should be broadcasted to all other connected "clients".
3 | */
4 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stackblitz/ng-be-workshop/main/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/src/favicon.ico
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/app/todo/components/todo-list/todo-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ todo.todo }}
4 |
5 |
6 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/src/favicon.ico:
--------------------------------------------------------------------------------
1 | https://cdn.jsdelivr.net/gh/stackblitz/ng-be-workshop@d2179ed1851ea254a8e5b61c70cb50a63c33f42c/exercises/webworkers/4-angular-todo/src/favicon.ico
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/src/favicon.ico:
--------------------------------------------------------------------------------
1 | https://cdn.jsdelivr.net/gh/stackblitz/ng-be-workshop@d2179ed1851ea254a8e5b61c70cb50a63c33f42c/exercises/webworkers/4-angular-todo/src/favicon.ico
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/app/todo/components/todo-create/todo-create.component.html:
--------------------------------------------------------------------------------
1 | Add
4 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/app/todo/components/todo/todo.component.html:
--------------------------------------------------------------------------------
1 | Add
4 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/app/todo/components/todo-list/todo-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ todo.todo }}
4 |
5 |
6 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/src/app/todo/components/todo-list/todo-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ todo.todo }}
4 |
5 |
6 |
--------------------------------------------------------------------------------
/exercises/webworkers/5-party-town/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "party-town",
3 | "scripts": {
4 | "start": "lite-server -c browsersync.config.js"
5 | },
6 | "devDependencies": {
7 | "lite-server": "^2.6.1"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/solutions/webworkers/5-party-town/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "party-town",
3 | "scripts": {
4 | "start": "lite-server -c browsersync.config.js"
5 | },
6 | "devDependencies": {
7 | "lite-server": "^2.6.1"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/src/app/fibonacci/fibonacci.worker.ts:
--------------------------------------------------------------------------------
1 | ///
2 | fib({{ result || '??' }}
4 |
5 |
6 |
7 | Calculate
8 |
9 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.scss'],
7 | })
8 | export class AppComponent {}
9 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.scss'],
7 | })
8 | export class AppComponent {}
9 |
--------------------------------------------------------------------------------
/exercises/webassembly/3-mandelbrot/step-2-workerpool/src/worker-pool.mjs:
--------------------------------------------------------------------------------
1 | import * as Comlink from 'https://unpkg.com/comlink/dist/esm/comlink.mjs';
2 |
3 | const workers = [];
4 |
5 | export function spawnWorkers(count) {
6 | // return the requested amount of workers, create new workers if needed
7 | }
8 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/src/app/fibonacci/fibonacci.component.html:
--------------------------------------------------------------------------------
1 |
2 | fib({{ result || '??' }}
4 |
5 |
6 |
7 | Calculate
8 |
9 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/src/app/fibonacci/fibonacci.component.html:
--------------------------------------------------------------------------------
1 |
2 | fib({{ result || '??' }}
4 |
5 |
6 |
7 | Calculate
8 |
9 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": ["src/main.ts", "src/polyfills.ts"],
9 | "include": ["src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": ["src/main.ts", "src/polyfills.ts"],
9 | "include": ["src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/solutions/webassembly/1-add-wat/readme.md:
--------------------------------------------------------------------------------
1 | # Add WAT
2 |
3 | [](https://stackblitz.com/fork/github/stackblitz/ng-be-workshop/tree/main/solutions/webassembly/1-add-wat?file=src%2Findex.html)
4 |
5 | This project is the solution for the [`Add WAT`](../../../exercises/webassembly/1-add-wat) exercise.
6 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": ["src/main.ts", "src/polyfills.ts"],
9 | "include": ["src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": ["src/main.ts", "src/polyfills.ts"],
9 | "include": ["src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/solutions/webworkers/3-message-channel/src/swap.worker.mjs:
--------------------------------------------------------------------------------
1 | self.onmessage = ({ data: { value, port } }) => {
2 | port.onmessage = (message) => {
3 | // if we receive something from the other end, send it back to the main thread
4 | self.postMessage(message.data);
5 | };
6 |
7 | // send the value to the other end of the port
8 | port.postMessage(value);
9 | };
10 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": ["src/main.ts", "src/polyfills.ts"],
9 | "include": ["src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/app",
6 | "types": []
7 | },
8 | "files": ["src/main.ts", "src/polyfills.ts"],
9 | "include": ["src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/solutions/webworkers/5-party-town/readme.md:
--------------------------------------------------------------------------------
1 | # Party town
2 |
3 | [](https://stackblitz.com/fork/github/stackblitz/ng-be-workshop/tree/main/solutions/webworkers/5-party-town?file=src%2Findex.html)
4 |
5 | This project is the solution for the [`Party Town`](../../../exercises/webworkers/5-party-town) project.
6 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": ["jasmine"]
7 | },
8 | "files": ["src/test.ts", "src/polyfills.ts"],
9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": ["jasmine"]
7 | },
8 | "files": ["src/test.ts", "src/polyfills.ts"],
9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/1-fibonacci/step-1-worker/src/fibonacci.worker.mjs:
--------------------------------------------------------------------------------
1 | function fibonacci(position) {
2 | if (position < 2) {
3 | return position;
4 | }
5 |
6 | return fibonacci(position - 1) + fibonacci(position - 2);
7 | }
8 |
9 | self.onmessage = (message) => {
10 | console.log(`Calculate fibonacci(${message.data})`);
11 |
12 | self.postMessage(fibonacci(message.data));
13 | };
14 |
--------------------------------------------------------------------------------
/solutions/webworkers/3-message-channel/readme.md:
--------------------------------------------------------------------------------
1 | # Swap Solution
2 |
3 | [](https://stackblitz.com/fork/github/stackblitz/ng-be-workshop/tree/main/solutions/webworkers/3-message-channel?file=src%2Findex.html)
4 |
5 | This project is the solution for the [`Swap Starter`](../../../exercises/webworkers/3-message-channel) project.
6 |
--------------------------------------------------------------------------------
/exercises/webassembly/1-add-wat/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "1-add-wat",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "postinstall": "mkdir .dist",
6 | "start": "npm run build && lite-server -c browser-sync.config.js",
7 | "build": "wat2wasm ./src/add.wat -o ./.dist/add.wasm"
8 | },
9 | "devDependencies": {
10 | "lite-server": "^2.6.1",
11 | "wat2wasm": "^3.0.0"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/solutions/webassembly/1-add-wat/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "1-add-wat",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "postinstall": "mkdir .dist",
6 | "start": "npm run build && lite-server -c browser-sync.config.js",
7 | "build": "wat2wasm ./src/add.wat -o ./.dist/add.wasm"
8 | },
9 | "devDependencies": {
10 | "lite-server": "^2.6.1",
11 | "wat2wasm": "^3.0.0"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": ["jasmine"]
7 | },
8 | "files": ["src/test.ts", "src/polyfills.ts"],
9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": ["jasmine"]
7 | },
8 | "files": ["src/test.ts", "src/polyfills.ts"],
9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": ["jasmine"]
7 | },
8 | "files": ["src/test.ts", "src/polyfills.ts"],
9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/solutions/webworkers/1-fibonacci/step-2-worker-terminate/src/fibonacci.worker.mjs:
--------------------------------------------------------------------------------
1 | function fibonacci(position) {
2 | if (position < 2) {
3 | return position;
4 | }
5 |
6 | return fibonacci(position - 1) + fibonacci(position - 2);
7 | }
8 |
9 | self.onmessage = (message) => {
10 | console.log(`Calculate fibonacci(${message.data})`);
11 |
12 | self.postMessage(fibonacci(message.data));
13 | };
14 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/spec",
6 | "types": ["jasmine"]
7 | },
8 | "files": ["src/test.ts", "src/polyfills.ts"],
9 | "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/exercises/webassembly/2-add-assemblyscript/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "2-add-assemblyscript",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "start": "npm run build && lite-server -c browser-sync.config.js",
6 | "build": "asc ./src/add.ts -O3 -o ./.dist/add.wasm -t ./.dist/add.wat --sourceMap"
7 | },
8 | "devDependencies": {
9 | "assemblyscript": "^0.19.22",
10 | "lite-server": "^2.6.1"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/solutions/webassembly/2-add-assemblyscript/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "2-add-assemblyscript",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "start": "npm run build && lite-server -c browser-sync.config.js",
6 | "build": "asc ./src/add.ts -O3 -o ./.dist/add.wasm -t ./.dist/add.wat --sourceMap"
7 | },
8 | "devDependencies": {
9 | "assemblyscript": "^0.19.22",
10 | "lite-server": "^2.6.1"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/solutions/webworkers/1-fibonacci/step-1-worker/readme.md:
--------------------------------------------------------------------------------
1 | # Fibonacci Worker
2 |
3 | [](https://stackblitz.com/fork/github/stackblitz/ng-be-workshop/tree/main/solutions/webworkers/1-fibonacci/step-1-worker?file=src%2Findex.html)
4 |
5 | This project is the solution for Exercise 1 of the [`Fibonacci`](../../../exercises/webworkers/1-fibonacci) project.
6 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/tsconfig.worker.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/worker",
6 | "lib": [
7 | "es2018",
8 | "webworker"
9 | ],
10 | "types": []
11 | },
12 | "include": [
13 | "src/**/*.worker.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/tsconfig.worker.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "extends": "./tsconfig.json",
4 | "compilerOptions": {
5 | "outDir": "./out-tsc/worker",
6 | "lib": [
7 | "es2018",
8 | "webworker"
9 | ],
10 | "types": []
11 | },
12 | "include": [
13 | "src/**/*.worker.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Fibonacci
6 | NgBeAngularShared
6 | Fibonacci
6 | Fibonacci
6 | NgBeAngularShared
6 | NgBeAngularShared
6 | ();
15 |
16 | onAdd(value: string) {
17 | this.todo.emit(value);
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/exercises/webassembly/3-mandelbrot/step-1-assemblyscript/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE Mandelbrot
5 |
11 |
12 |
13 | Execution Time:
14 |
15 |
16 | Run
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/solutions/webassembly/3-mandelbrot/step-1-assemblyscript/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ng-be Mandelbrot
5 |
11 |
12 |
13 | Execution Time:
14 |
15 |
16 | Run
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/app/todo/actions/index.ts:
--------------------------------------------------------------------------------
1 | export interface TodoAddAction {
2 | type: 'ADD';
3 | id: string;
4 | todo: string;
5 | }
6 |
7 | export interface TodoRemoveAction {
8 | type: 'REMOVE';
9 | id: string;
10 | }
11 |
12 | export type TodoAction = TodoAddAction | TodoRemoveAction;
13 |
14 | export const createTodo = (id: string, todo: string): TodoAddAction => ({
15 | type: 'ADD',
16 | id,
17 | todo,
18 | });
19 |
20 | export const removeTodo = (id: string): TodoRemoveAction => ({
21 | type: 'REMOVE',
22 | id,
23 | });
24 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/app/todo/components/todo-create/todo-create.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | Output,
4 | EventEmitter,
5 | ChangeDetectionStrategy,
6 | } from '@angular/core';
7 |
8 | @Component({
9 | selector: 'todo-create',
10 | templateUrl: './todo-create.component.html',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class TodoCreateComponent {
14 | @Output() todo = new EventEmitter();
15 |
16 | onAdd(value: string) {
17 | this.todo.emit(value);
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppComponent } from './app.component';
5 | import { CounterComponent } from './counter/counter.component';
6 | import { FibonacciComponent } from './fibonacci/fibonacci.component';
7 |
8 | @NgModule({
9 | declarations: [AppComponent, CounterComponent, FibonacciComponent],
10 | imports: [BrowserModule],
11 | providers: [],
12 | bootstrap: [AppComponent],
13 | })
14 | export class AppModule {}
15 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/src/app/todo/components/todo-create/todo-create.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | Output,
4 | EventEmitter,
5 | ChangeDetectionStrategy,
6 | } from '@angular/core';
7 |
8 | @Component({
9 | selector: 'todo-create',
10 | templateUrl: './todo-create.component.html',
11 | changeDetection: ChangeDetectionStrategy.OnPush,
12 | })
13 | export class TodoCreateComponent {
14 | @Output() todo = new EventEmitter();
15 |
16 | onAdd(value: string) {
17 | this.todo.emit(value);
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/solutions/webassembly/3-mandelbrot/step-2-workerpool/src/worker-pool.mjs:
--------------------------------------------------------------------------------
1 | import * as Comlink from 'https://unpkg.com/comlink/dist/esm/comlink.mjs';
2 |
3 | const workers = [];
4 |
5 | export function spawnWorkers(count) {
6 | if (count <= workers.length) {
7 | return workers.slice(0, count);
8 | }
9 |
10 | const diff = count - workers.length;
11 |
12 | for (let i = 0; i < diff; i++) {
13 | const worker = new Worker('./worker.mjs', { name: 'Mandelbrot Worker', type: 'module' });
14 | workers.push(Comlink.wrap(worker));
15 | }
16 |
17 | return workers;
18 | }
19 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/app/todo/actions/index.ts:
--------------------------------------------------------------------------------
1 | export interface TodoAddAction {
2 | type: 'ADD';
3 | id: string;
4 | todo: string;
5 | }
6 |
7 | export interface TodoRemoveAction {
8 | type: 'REMOVE';
9 | id: string;
10 | }
11 |
12 | export type TodoAction = TodoAddAction | TodoRemoveAction;
13 |
14 | export const createTodo = (id: string, todo: string): TodoAddAction => ({
15 | type: 'ADD',
16 | id,
17 | todo,
18 | });
19 |
20 | export const removeTodo = (id: string): TodoRemoveAction => ({
21 | type: 'REMOVE',
22 | id,
23 | });
24 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppComponent } from './app.component';
5 | import { CounterComponent } from './counter/counter.component';
6 | import { FibonacciComponent } from './fibonacci/fibonacci.component';
7 |
8 | @NgModule({
9 | declarations: [AppComponent, CounterComponent, FibonacciComponent],
10 | imports: [BrowserModule],
11 | providers: [],
12 | bootstrap: [AppComponent],
13 | })
14 | export class AppModule {}
15 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { AppComponent } from './app.component';
5 | import { CounterComponent } from './counter/counter.component';
6 | import { FibonacciComponent } from './fibonacci/fibonacci.component';
7 |
8 | @NgModule({
9 | declarations: [AppComponent, CounterComponent, FibonacciComponent],
10 | imports: [BrowserModule],
11 | providers: [],
12 | bootstrap: [AppComponent],
13 | })
14 | export class AppModule {}
15 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/src/app/todo/actions/index.ts:
--------------------------------------------------------------------------------
1 | export interface TodoAddAction {
2 | type: 'ADD';
3 | id: string;
4 | todo: string;
5 | }
6 |
7 | export interface TodoRemoveAction {
8 | type: 'REMOVE';
9 | id: string;
10 | }
11 |
12 | export type TodoAction = TodoAddAction | TodoRemoveAction;
13 |
14 | export const createTodo = (id: string, todo: string): TodoAddAction => ({
15 | type: 'ADD',
16 | id,
17 | todo,
18 | });
19 |
20 | export const removeTodo = (id: string): TodoRemoveAction => ({
21 | type: 'REMOVE',
22 | id,
23 | });
24 |
--------------------------------------------------------------------------------
/exercises/webassembly/1-add-wat/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE Add WAT
5 |
6 |
11 |
12 |
13 |
14 |
20 |
21 |
22 | Calculate
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/solutions/webassembly/1-add-wat/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE Add WAT
5 |
6 |
11 |
12 |
13 |
14 |
20 |
21 |
22 | Calculate
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/exercises/webassembly/3-mandelbrot/step-1-assemblyscript/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "node-starter",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "start": "npm run build && lite-server -c browser-sync.config.js",
6 | "build": "asc ./src/mandelbrot.ts -O3 -o ./.dist/mandelbrot.wasm -t ./.dist/mandelbrot.wat --sourceMap"
7 | },
8 | "devDependencies": {
9 | "assemblyscript": "^0.19.20",
10 | "lite-server": "^2.6.1"
11 | },
12 | "prettier": {
13 | "printWidth": 120,
14 | "singleQuote": true,
15 | "useTabs": false,
16 | "tabWidth": 2,
17 | "semi": true,
18 | "bracketSpacing": true
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/app/todo/components/todo/todo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { TodoService } from '../../services/todo.service';
4 |
5 | @Component({
6 | selector: 'app-todo',
7 | templateUrl: './todo.component.html',
8 | })
9 | export class TodoComponent {
10 | todos$ = this.todoService.todos$;
11 |
12 | constructor(private todoService: TodoService) {}
13 |
14 | addTodo(value: string) {
15 | console.log('Added', value);
16 | this.todoService.addTodo(value);
17 | }
18 |
19 | removeTodo(id: string) {
20 | this.todoService.removeTodo(id);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/exercises/webassembly/2-add-assemblyscript/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE Add AssemblyScript
5 |
6 |
11 |
12 |
13 |
14 |
20 |
21 |
22 | Calculate
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/exercises/webassembly/3-mandelbrot/step-2-workerpool/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mandelbrot-instantiate",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "start": "npm run build && lite-server -c browser-sync.config.js",
6 | "build": "asc ./src/mandelbrot.ts -O3 -o ./.dist/mandelbrot.wasm -t ./.dist/mandelbrot.wat --sourceMap"
7 | },
8 | "devDependencies": {
9 | "assemblyscript": "^0.19.20",
10 | "lite-server": "^2.6.1"
11 | },
12 | "prettier": {
13 | "printWidth": 120,
14 | "singleQuote": true,
15 | "useTabs": false,
16 | "tabWidth": 2,
17 | "semi": true,
18 | "bracketSpacing": true
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/solutions/webassembly/2-add-assemblyscript/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE Add AssemblyScript
5 |
6 |
11 |
12 |
13 |
14 |
20 |
21 |
22 | Calculate
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/solutions/webassembly/3-mandelbrot/step-2-workerpool/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mandelbrot-workerpool",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "start": "npm run build && lite-server -c browser-sync.config.js",
6 | "build": "asc ./src/mandelbrot.ts -O3 -o ./.dist/mandelbrot.wasm -t ./.dist/mandelbrot.wat --sourceMap"
7 | },
8 | "devDependencies": {
9 | "assemblyscript": "^0.19.20",
10 | "lite-server": "^2.6.1"
11 | },
12 | "prettier": {
13 | "printWidth": 120,
14 | "singleQuote": true,
15 | "useTabs": false,
16 | "tabWidth": 2,
17 | "semi": true,
18 | "bracketSpacing": true
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/solutions/webassembly/3-mandelbrot/step-1-assemblyscript/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mandelbrot-assemblyscript",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "start": "npm run build && lite-server -c browser-sync.config.js",
6 | "build": "asc ./src/mandelbrot.ts -O3 -o ./.dist/mandelbrot.wasm -t ./.dist/mandelbrot.wat --sourceMap"
7 | },
8 | "devDependencies": {
9 | "assemblyscript": "^0.19.20",
10 | "lite-server": "^2.6.1"
11 | },
12 | "prettier": {
13 | "printWidth": 120,
14 | "singleQuote": true,
15 | "useTabs": false,
16 | "tabWidth": 2,
17 | "semi": true,
18 | "bracketSpacing": true
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/app/todo/components/todo/todo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { TodoService } from '../../services/todo.service';
4 |
5 | @Component({
6 | selector: 'app-todo',
7 | templateUrl: './todo.component.html',
8 | })
9 | export class TodoComponent {
10 | todos$ = this.todoService.todos$;
11 |
12 | constructor(private todoService: TodoService) {}
13 |
14 | addTodo(value: string) {
15 | console.log('Added', value);
16 | this.todoService.addTodo(value);
17 | }
18 |
19 | removeTodo(id: string) {
20 | this.todoService.removeTodo(id);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/src/app/todo/components/todo/todo.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { TodoService } from '../../services/todo.service';
4 |
5 | @Component({
6 | selector: 'app-todo',
7 | templateUrl: './todo.component.html',
8 | })
9 | export class TodoComponent {
10 | todos$ = this.todoService.todos$;
11 |
12 | constructor(private todoService: TodoService) {}
13 |
14 | addTodo(value: string) {
15 | console.log('Added', value);
16 | this.todoService.addTodo(value);
17 | }
18 |
19 | removeTodo(id: string) {
20 | this.todoService.removeTodo(id);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/app/todo/components/todo-list/todo-list.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | EventEmitter,
4 | Output,
5 | Input,
6 | ChangeDetectionStrategy,
7 | } from '@angular/core';
8 |
9 | @Component({
10 | selector: 'todo-list',
11 | templateUrl: './todo-list.component.html',
12 | styleUrls: ['./todo-list.component.scss'],
13 | changeDetection: ChangeDetectionStrategy.OnPush,
14 | })
15 | export class TodoListComponent {
16 | @Input() todos: null | { todo: string; id: string }[] = [];
17 | @Output() remove = new EventEmitter();
18 |
19 | onRemove(id: string) {
20 | this.remove.emit(id);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/app/todo/components/todo-list/todo-list.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | EventEmitter,
4 | Output,
5 | Input,
6 | ChangeDetectionStrategy,
7 | } from '@angular/core';
8 |
9 | @Component({
10 | selector: 'todo-list',
11 | templateUrl: './todo-list.component.html',
12 | styleUrls: ['./todo-list.component.scss'],
13 | changeDetection: ChangeDetectionStrategy.OnPush,
14 | })
15 | export class TodoListComponent {
16 | @Input() todos: null | { todo: string; id: string }[] = [];
17 | @Output() remove = new EventEmitter();
18 |
19 | onRemove(id: string) {
20 | this.remove.emit(id);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/src/app/todo/components/todo-list/todo-list.component.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Component,
3 | EventEmitter,
4 | Output,
5 | Input,
6 | ChangeDetectionStrategy,
7 | } from '@angular/core';
8 |
9 | @Component({
10 | selector: 'todo-list',
11 | templateUrl: './todo-list.component.html',
12 | styleUrls: ['./todo-list.component.scss'],
13 | changeDetection: ChangeDetectionStrategy.OnPush,
14 | })
15 | export class TodoListComponent {
16 | @Input() todos: null | { todo: string; id: string }[] = [];
17 | @Output() remove = new EventEmitter();
18 |
19 | onRemove(id: string) {
20 | this.remove.emit(id);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/app/todo/todo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { TodoCreateComponent } from './components/todo-create/todo-create.component';
5 | import { TodoListComponent } from './components/todo-list/todo-list.component';
6 | import { TodoComponent } from './components/todo/todo.component';
7 |
8 | import { TodoService } from './services/todo.service';
9 |
10 | @NgModule({
11 | declarations: [TodoCreateComponent, TodoListComponent, TodoComponent],
12 | imports: [BrowserModule],
13 | exports: [TodoComponent],
14 | providers: [TodoService],
15 | })
16 | export class TodoModule {}
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/app/todo/todo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { TodoCreateComponent } from './components/todo-create/todo-create.component';
5 | import { TodoListComponent } from './components/todo-list/todo-list.component';
6 | import { TodoComponent } from './components/todo/todo.component';
7 |
8 | import { TodoService } from './services/todo.service';
9 |
10 | @NgModule({
11 | declarations: [TodoCreateComponent, TodoListComponent, TodoComponent],
12 | imports: [BrowserModule],
13 | exports: [TodoComponent],
14 | providers: [TodoService],
15 | })
16 | export class TodoModule {}
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/src/app/todo/todo.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import { TodoCreateComponent } from './components/todo-create/todo-create.component';
5 | import { TodoListComponent } from './components/todo-list/todo-list.component';
6 | import { TodoComponent } from './components/todo/todo.component';
7 |
8 | import { TodoService } from './services/todo.service';
9 |
10 | @NgModule({
11 | declarations: [TodoCreateComponent, TodoListComponent, TodoComponent],
12 | imports: [BrowserModule],
13 | exports: [TodoComponent],
14 | providers: [TodoService],
15 | })
16 | export class TodoModule {}
17 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false,
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false,
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/exercises/webassembly/2-add-assemblyscript/readme.md:
--------------------------------------------------------------------------------
1 | # Add AssemblyScript
2 |
3 | [](https://stackblitz.com/fork/github/stackblitz/ng-be-workshop/tree/main/exercises/webassembly/1-add-assemblyscript?file=src%2Fadd.ts)
4 |
5 |
6 | ## Exercise
7 |
8 | Implement a function that takes two numbers and returns the sum of those numbers by using [AssemblyScript](https://www.assemblyscript.org/).
9 |
10 | You can compile the `add.ts` file by running
11 |
12 | ```
13 | $ npm run build
14 | ```
15 |
16 | > **Note**: The WASM binary file is invisible in StackBlitz as it's compiled to a `.dist` directory and thus hidden
17 | for the user. The reason is that in order to use binary files on StackBlitz, you need a pro account.
18 |
--------------------------------------------------------------------------------
/solutions/webworkers/1-fibonacci/step-4-worker-comlink/src/fibonacci.worker.mjs:
--------------------------------------------------------------------------------
1 | import * as Comlink from 'https://unpkg.com/comlink/dist/esm/comlink.mjs';
2 |
3 | function fibonacci(position, abortSignal) {
4 | if (abortSignal[0] === 1) {
5 | // break out of calculation if the abort signal is set to 1
6 | throw new Error('Aborted');
7 | }
8 |
9 | if (position < 2) {
10 | return position;
11 | }
12 |
13 | return (
14 | fibonacci(position - 1, abortSignal) + fibonacci(position - 2, abortSignal)
15 | );
16 | }
17 |
18 | Comlink.expose(function (value, abort) {
19 | // create a Uint8Array out of the SAB
20 | const abortSignal = new Uint8Array(abort);
21 |
22 | try {
23 | return fibonacci(value, abortSignal);
24 | } catch {
25 | // do nothing
26 | }
27 | });
28 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false,
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false,
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false,
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false,
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/exercises/webworkers/3-message-channel/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE WebWorkers MessageChannel
5 |
6 |
7 |
8 | Swap
11 |
12 |
13 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/solutions/webworkers/3-message-channel/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE WebWorkers MessageChannel
5 |
6 |
7 |
8 | Swap
11 |
12 |
13 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/solutions/webassembly/1-add-wat/src/index.mjs:
--------------------------------------------------------------------------------
1 | let wasmModule;
2 |
3 | const $rhs = document.querySelector('#rhs');
4 | const $lhs = document.querySelector('#lhs');
5 | const $outcome = document.querySelector('#outcome');
6 | const $calculateButton = document.querySelector('#calculate');
7 |
8 | $calculateButton.addEventListener('click', async () => {
9 | await loadModule();
10 |
11 | const rhs = $rhs.valueAsNumber;
12 | const lhs = $lhs.valueAsNumber;
13 |
14 | $outcome.innerHTML = wasmModule.add(rhs, lhs);
15 | });
16 |
17 | async function loadModule() {
18 | if (wasmModule) {
19 | return;
20 | }
21 |
22 | const wasmResponse = await fetch('./add.wasm');
23 |
24 | const bytes = await wasmResponse.arrayBuffer();
25 |
26 | const wasm = await WebAssembly.instantiate(bytes);
27 |
28 | wasmModule = wasm.instance.exports;
29 | }
30 |
--------------------------------------------------------------------------------
/exercises/webassembly/2-add-assemblyscript/src/index.mjs:
--------------------------------------------------------------------------------
1 | let wasmModule;
2 |
3 | const $rhs = document.querySelector('#rhs');
4 | const $lhs = document.querySelector('#lhs');
5 | const $outcome = document.querySelector('#outcome');
6 | const $calculateButton = document.querySelector('#calculate');
7 |
8 | $calculateButton.addEventListener('click', async () => {
9 | await loadModule();
10 |
11 | const rhs = $rhs.valueAsNumber;
12 | const lhs = $lhs.valueAsNumber;
13 |
14 | $outcome.innerHTML = wasmModule.add(rhs, lhs);
15 | });
16 |
17 | async function loadModule() {
18 | if (wasmModule) {
19 | return;
20 | }
21 |
22 | const wasmResponse = await fetch('./add.wasm');
23 |
24 | const bytes = await wasmResponse.arrayBuffer();
25 |
26 | const wasm = await WebAssembly.instantiate(bytes);
27 |
28 | wasmModule = wasm.instance.exports;
29 | }
30 |
--------------------------------------------------------------------------------
/solutions/webassembly/2-add-assemblyscript/src/index.mjs:
--------------------------------------------------------------------------------
1 | let wasmModule;
2 |
3 | const $rhs = document.querySelector('#rhs');
4 | const $lhs = document.querySelector('#lhs');
5 | const $outcome = document.querySelector('#outcome');
6 | const $calculateButton = document.querySelector('#calculate');
7 |
8 | $calculateButton.addEventListener('click', async () => {
9 | await loadModule();
10 |
11 | const rhs = $rhs.valueAsNumber;
12 | const lhs = $lhs.valueAsNumber;
13 |
14 | $outcome.innerHTML = wasmModule.add(rhs, lhs);
15 | });
16 |
17 | async function loadModule() {
18 | if (wasmModule) {
19 | return;
20 | }
21 |
22 | const wasmResponse = await fetch('./add.wasm');
23 |
24 | const bytes = await wasmResponse.arrayBuffer();
25 |
26 | const wasm = await WebAssembly.instantiate(bytes);
27 |
28 | wasmModule = wasm.instance.exports;
29 | }
30 |
--------------------------------------------------------------------------------
/solutions/webworkers/1-fibonacci/step-3-worker-abort/src/fibonacci.worker.mjs:
--------------------------------------------------------------------------------
1 | function fibonacci(position, abortSignal) {
2 | if (abortSignal[0] === 1) {
3 | // break out of calculation if the abort signal is set to 1
4 | throw new Error('Aborted');
5 | }
6 |
7 | if (position < 2) {
8 | return position;
9 | }
10 |
11 | return (
12 | fibonacci(position - 1, abortSignal) + fibonacci(position - 2, abortSignal)
13 | );
14 | }
15 |
16 | self.onmessage = (message) => {
17 | const { value, abortSignal } = message.data;
18 |
19 | // create a Uint8Array out of the SAB
20 | const abortSignalArray = new Uint8Array(abortSignal);
21 |
22 | try {
23 | const result = fibonacci(value, abortSignalArray);
24 |
25 | self.postMessage(result);
26 | } catch {
27 | // we don't have to do anything when it's aborted
28 | }
29 | };
30 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 |
16 | # IDEs and editors
17 | /.idea
18 | .project
19 | .classpath
20 | .c9/
21 | *.launch
22 | .settings/
23 | *.sublime-workspace
24 |
25 | # IDE - VSCode
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | .history/*
32 |
33 | # misc
34 | /.angular/cache
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 |
16 | # IDEs and editors
17 | /.idea
18 | .project
19 | .classpath
20 | .c9/
21 | *.launch
22 | .settings/
23 | *.sublime-workspace
24 |
25 | # IDE - VSCode
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | .history/*
32 |
33 | # misc
34 | /.angular/cache
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/readme.md:
--------------------------------------------------------------------------------
1 | # Angular Fibonacci
2 |
3 | [](https://stackblitz.com/github/stackblitz/ng-be-workshop/tree/main/exercises/webworkers/2-angular-fibonacci?file=src%2Fapp%2Ffibonacci%2Ffibonacci.component.ts)
4 |
5 | This projects implements the same fibonacci UI as the the first project but using Angular instead.
6 |
7 | ## Exercise
8 |
9 | ### Exercise 1
10 |
11 | Use the [Angular CLI](https://angular.io/guide/web-worker) to add a fibonacci worker to the project and move the
12 | logic off of the main thread. In case `Worker` is not availabe, fallback using the sychronous blocking implementation.
13 |
14 | ### Exercise 2
15 |
16 | Now that we have our logic off of the main thread, refactor it using [`Comlink`](https://github.com/GoogleChromeLabs/comlink).
17 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 |
16 | # IDEs and editors
17 | /.idea
18 | .project
19 | .classpath
20 | .c9/
21 | *.launch
22 | .settings/
23 | *.sublime-workspace
24 |
25 | # IDE - VSCode
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | .history/*
32 |
33 | # misc
34 | /.angular/cache
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 |
16 | # IDEs and editors
17 | /.idea
18 | .project
19 | .classpath
20 | .c9/
21 | *.launch
22 | .settings/
23 | *.sublime-workspace
24 |
25 | # IDE - VSCode
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | .history/*
32 |
33 | # misc
34 | /.angular/cache
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 |
16 | # IDEs and editors
17 | /.idea
18 | .project
19 | .classpath
20 | .c9/
21 | *.launch
22 | .settings/
23 | *.sublime-workspace
24 |
25 | # IDE - VSCode
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | .history/*
32 |
33 | # misc
34 | /.angular/cache
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 |
16 | # IDEs and editors
17 | /.idea
18 | .project
19 | .classpath
20 | .c9/
21 | *.launch
22 | .settings/
23 | *.sublime-workspace
24 |
25 | # IDE - VSCode
26 | .vscode/*
27 | !.vscode/settings.json
28 | !.vscode/tasks.json
29 | !.vscode/launch.json
30 | !.vscode/extensions.json
31 | .history/*
32 |
33 | # misc
34 | /.angular/cache
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/exercises/webassembly/3-mandelbrot/step-1-assemblyscript/readme.md:
--------------------------------------------------------------------------------
1 | # Mandelbrot
2 |
3 | [](https://stackblitz.com/fork/github/stackblitz/ng-be-workshop/tree/main/exercises/webassembly/3-mandelbrot/step-1-assemblyscript?file=src%2Findex.html)
4 |
5 |
6 | ## Exercise
7 |
8 | Currently, the Mandelbrot implementation is done through JavaScript inside a worker. The first step in this exercise
9 | is to convert `mandelbrot.mjs` to AssemblyScript inside `mandelbrot.ts`.
10 |
11 | > **hint**: The types you need are `u32`, `i32`, `f64`, and `bool`.
12 |
13 | After Mandelbrot has been converted to AssemblyScript, you will need to refactor the [worker](./src/worker.mjs). The
14 | worker now has to instantiate the WebAssembly binary instead by using the [AssemblyScript loader](https://www.assemblyscript.org/loader.html#installation).
15 |
--------------------------------------------------------------------------------
/solutions/webworkers/1-fibonacci/step-2-worker-terminate/src/fibonacci.mjs:
--------------------------------------------------------------------------------
1 | let stopWorker;
2 |
3 | export function fibonacci(position) {
4 | return new Promise((resolve) => {
5 | if (typeof Worker === 'undefined') {
6 | throw new Error('WebWorkers are not supported...');
7 | }
8 |
9 | // stop the previous worker
10 | stopWorker?.();
11 |
12 | const worker = new Worker('./fibonacci.worker.mjs', {
13 | name: `Fibonacci Worker (${position})`,
14 | type: 'module',
15 | });
16 |
17 | stopWorker = (value) => {
18 | // terminate the worker
19 | worker.terminate();
20 |
21 | // resolve with the provided value
22 | resolve(value);
23 |
24 | stopWorker = undefined;
25 | };
26 |
27 | worker.onmessage = (message) => {
28 | stopWorker(message.data);
29 | };
30 |
31 | worker.postMessage(position);
32 | });
33 | }
34 |
--------------------------------------------------------------------------------
/exercises/webassembly/3-mandelbrot/step-1-assemblyscript/src/mandelbrot.mjs:
--------------------------------------------------------------------------------
1 | export function mandelbrot(x, y, options) {
2 | const { MAX_ITERATIONS, WIDTH, HEIGHT, MAX_COLORS, REAL_START, REAL_END, IMAGINARY_START, IMAGINARY_END } = options;
3 |
4 | x = REAL_START + (x / WIDTH) * (REAL_END - REAL_START);
5 | y = IMAGINARY_START + (y / HEIGHT) * (IMAGINARY_END - IMAGINARY_START);
6 |
7 | let a = 0;
8 | let b = 0;
9 | let i = 0;
10 | let rx;
11 | let ry;
12 | let d;
13 |
14 | do {
15 | rx = Math.pow(a, 2) - Math.pow(b, 2);
16 | ry = 2 * a * b;
17 |
18 | a = rx + x;
19 | b = ry + y;
20 |
21 | d = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
22 |
23 | i += 1;
24 | } while (d <= 2 && i < MAX_ITERATIONS);
25 |
26 | return getColorIndex(i, d <= 2, MAX_COLORS);
27 | }
28 |
29 | function getColorIndex(i, isMandelbrotSet, maxColors) {
30 | return isMandelbrotSet ? 0 : i % maxColors;
31 | }
32 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting,
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(
12 | path: string,
13 | deep?: boolean,
14 | filter?: RegExp
15 | ): {
16 | keys(): string[];
17 | (id: string): T;
18 | };
19 | };
20 |
21 | // First, initialize the Angular testing environment.
22 | getTestBed().initTestEnvironment(
23 | BrowserDynamicTestingModule,
24 | platformBrowserDynamicTesting()
25 | );
26 |
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting,
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(
12 | path: string,
13 | deep?: boolean,
14 | filter?: RegExp
15 | ): {
16 | keys(): string[];
17 | (id: string): T;
18 | };
19 | };
20 |
21 | // First, initialize the Angular testing environment.
22 | getTestBed().initTestEnvironment(
23 | BrowserDynamicTestingModule,
24 | platformBrowserDynamicTesting()
25 | );
26 |
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting,
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(
12 | path: string,
13 | deep?: boolean,
14 | filter?: RegExp
15 | ): {
16 | keys(): string[];
17 | (id: string): T;
18 | };
19 | };
20 |
21 | // First, initialize the Angular testing environment.
22 | getTestBed().initTestEnvironment(
23 | BrowserDynamicTestingModule,
24 | platformBrowserDynamicTesting()
25 | );
26 |
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 |
--------------------------------------------------------------------------------
/exercises/webassembly/1-add-wat/readme.md:
--------------------------------------------------------------------------------
1 | # Add WAT
2 |
3 | [](https://stackblitz.com/fork/github/stackblitz/ng-be-workshop/tree/main/exercises/webassembly/1-add-wat?file=src%2Fadd.wat)
4 |
5 |
6 | ## Exercise
7 |
8 | Implement a function that takes two numbers and returns the sum of those numbers by using the
9 | [WebAssembly text format](https://developer.mozilla.org/en-US/docs/WebAssembly/Understanding_the_text_format).
10 |
11 | You can compile the `add.wat` file by running
12 |
13 | ```
14 | $ npm run build
15 | ```
16 |
17 | Refactor [index.mjs](./src/index.mjs) to load that WASM binary and use WebAssembly to calculate the outcome.
18 |
19 | > **Note**: The WASM binary file is invisible in StackBlitz as it's compiled to a `.dist` directory and thus hidden
20 | for the user. The reason is that in order to use binary files on StackBlitz, you need a pro account.
21 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting,
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(
12 | path: string,
13 | deep?: boolean,
14 | filter?: RegExp
15 | ): {
16 | keys(): string[];
17 | (id: string): T;
18 | };
19 | };
20 |
21 | // First, initialize the Angular testing environment.
22 | getTestBed().initTestEnvironment(
23 | BrowserDynamicTestingModule,
24 | platformBrowserDynamicTesting()
25 | );
26 |
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting,
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(
12 | path: string,
13 | deep?: boolean,
14 | filter?: RegExp
15 | ): {
16 | keys(): string[];
17 | (id: string): T;
18 | };
19 | };
20 |
21 | // First, initialize the Angular testing environment.
22 | getTestBed().initTestEnvironment(
23 | BrowserDynamicTestingModule,
24 | platformBrowserDynamicTesting()
25 | );
26 |
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/src/app/fibonacci/fibonacci.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { fibonacci } from './fibonacci';
3 |
4 | let worker: Worker | undefined;
5 |
6 | if (typeof Worker !== 'undefined') {
7 | worker = new Worker(new URL('./fibonacci.worker', import.meta.url));
8 | }
9 |
10 | @Component({
11 | selector: 'app-fibonacci',
12 | templateUrl: './fibonacci.component.html',
13 | styleUrls: ['./fibonacci.component.scss'],
14 | })
15 | export class FibonacciComponent {
16 | result: number | undefined;
17 |
18 | calculate(position: number) {
19 | if (worker) {
20 | worker.onmessage = ({ data }) => {
21 | this.result = data;
22 | };
23 |
24 | worker.postMessage(position);
25 | } else {
26 | // use the synchronous blocking implementation if no worker could be found
27 | this.result = fibonacci(position);
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting,
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(
12 | path: string,
13 | deep?: boolean,
14 | filter?: RegExp
15 | ): {
16 | keys(): string[];
17 | (id: string): T;
18 | };
19 | };
20 |
21 | // First, initialize the Angular testing environment.
22 | getTestBed().initTestEnvironment(
23 | BrowserDynamicTestingModule,
24 | platformBrowserDynamicTesting()
25 | );
26 |
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 |
--------------------------------------------------------------------------------
/exercises/webassembly/3-mandelbrot/step-2-workerpool/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE Mandelbrot Worker Pool
5 |
25 |
26 |
27 | Execution Time:
28 |
29 |
30 | Number of Threads: 2 Threads
32 | Run
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "es2017",
20 | "module": "es2020",
21 | "lib": ["es2020", "dom"]
22 | },
23 | "angularCompilerOptions": {
24 | "enableI18nLegacyMessageIdFormat": false,
25 | "strictInjectionParameters": true,
26 | "strictInputAccessModifiers": true,
27 | "strictTemplates": true
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "es2017",
20 | "module": "es2020",
21 | "lib": ["es2020", "dom"]
22 | },
23 | "angularCompilerOptions": {
24 | "enableI18nLegacyMessageIdFormat": false,
25 | "strictInjectionParameters": true,
26 | "strictInputAccessModifiers": true,
27 | "strictTemplates": true
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/solutions/webassembly/3-mandelbrot/step-2-workerpool/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE Mandelbrot Multi-Threaded AssemblyScript
5 |
25 |
26 |
27 | Execution Time:
28 |
29 |
30 | Number of Threads: 2 Threads
32 | Run
33 |
34 |
35 |
36 |
37 |
38 |
--------------------------------------------------------------------------------
/exercises/webassembly/3-mandelbrot/step-1-assemblyscript/src/worker.mjs:
--------------------------------------------------------------------------------
1 | import * as Comlink from 'https://unpkg.com/comlink/dist/esm/comlink.mjs';
2 | import { mandelbrot } from './mandelbrot.mjs';
3 |
4 | Comlink.expose(async (width, height, colors) => {
5 | const options = {
6 | WIDTH: width,
7 | HEIGHT: height,
8 | MAX_ITERATIONS: 85,
9 | MAX_COLORS: colors.length,
10 | REAL_START: -2,
11 | REAL_END: 1,
12 | IMAGINARY_START: -1,
13 | IMAGINARY_END: 1,
14 | };
15 |
16 | const result = new Uint8Array(width * height * 4);
17 |
18 | let i = 0;
19 |
20 | for (let y = 0; y < height; y++) {
21 | for (let x = 0; x < width; x++) {
22 | const colorIndex = mandelbrot(x, y, options);
23 |
24 | const [r, g, b] = colors[colorIndex];
25 |
26 | result[i] = r;
27 | result[i + 1] = g;
28 | result[i + 2] = b;
29 | result[i + 3] = 255;
30 |
31 | i += 4;
32 | }
33 | }
34 |
35 | return Comlink.transfer(result, [result.buffer]);
36 | });
37 |
--------------------------------------------------------------------------------
/solutions/webworkers/1-fibonacci/step-4-worker-comlink/src/fibonacci.mjs:
--------------------------------------------------------------------------------
1 | import * as Comlink from 'https://unpkg.com/comlink/dist/esm/comlink.mjs';
2 |
3 | const worker = new Worker('./fibonacci.worker.mjs', {
4 | name: 'Fibonacci Worker',
5 | type: 'module',
6 | });
7 |
8 | const calculate = Comlink.wrap(worker);
9 |
10 | let abortController;
11 |
12 | export async function fibonacci(position) {
13 | if (typeof Worker === 'undefined') {
14 | throw new Error('WebWorkers are not supported...');
15 | }
16 |
17 | // abort the previous execution if it exists
18 | abortController?.abort();
19 |
20 | // create a new "abort controller"
21 | abortController = createAbortController();
22 |
23 | return calculate(position, abortController.signal);
24 | }
25 |
26 | function createAbortController() {
27 | const sab = new SharedArrayBuffer(1);
28 | const abortSignal = new Uint8Array(sab);
29 |
30 | return {
31 | signal: sab,
32 | abort() {
33 | abortSignal[0] = 1;
34 | },
35 | };
36 | }
37 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/src/app/fibonacci/fibonacci.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import * as Comlink from 'comlink';
3 | import { fibonacci } from './fibonacci';
4 |
5 | let fibonacciWorker: Comlink.Remote | undefined;
6 |
7 | if (typeof Worker !== 'undefined') {
8 | fibonacciWorker = Comlink.wrap(
9 | new Worker(new URL('./fibonacci.worker', import.meta.url))
10 | );
11 | }
12 |
13 | @Component({
14 | selector: 'app-fibonacci',
15 | templateUrl: './fibonacci.component.html',
16 | styleUrls: ['./fibonacci.component.scss'],
17 | })
18 | export class FibonacciComponent {
19 | result: number | undefined;
20 |
21 | async calculate(position: number) {
22 | if (fibonacciWorker) {
23 | this.result = await fibonacciWorker(position);
24 | } else {
25 | // use the synchronous blocking implementation if no worker could be found
26 | this.result = fibonacci(position);
27 | }
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "es2017",
20 | "module": "es2020",
21 | "lib": ["es2020", "dom"]
22 | },
23 | "angularCompilerOptions": {
24 | "enableI18nLegacyMessageIdFormat": false,
25 | "strictInjectionParameters": true,
26 | "strictInputAccessModifiers": true,
27 | "strictTemplates": true
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "es2017",
20 | "module": "es2020",
21 | "lib": ["es2020", "dom"]
22 | },
23 | "angularCompilerOptions": {
24 | "enableI18nLegacyMessageIdFormat": false,
25 | "strictInjectionParameters": true,
26 | "strictInputAccessModifiers": true,
27 | "strictTemplates": true
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "es2017",
20 | "module": "es2020",
21 | "lib": ["es2020", "dom"]
22 | },
23 | "angularCompilerOptions": {
24 | "enableI18nLegacyMessageIdFormat": false,
25 | "strictInjectionParameters": true,
26 | "strictInputAccessModifiers": true,
27 | "strictTemplates": true
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitOverride": true,
10 | "noPropertyAccessFromIndexSignature": true,
11 | "noImplicitReturns": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "sourceMap": true,
14 | "declaration": false,
15 | "downlevelIteration": true,
16 | "experimentalDecorators": true,
17 | "moduleResolution": "node",
18 | "importHelpers": true,
19 | "target": "es2017",
20 | "module": "es2020",
21 | "lib": ["es2020", "dom"]
22 | },
23 | "angularCompilerOptions": {
24 | "enableI18nLegacyMessageIdFormat": false,
25 | "strictInjectionParameters": true,
26 | "strictInputAccessModifiers": true,
27 | "strictTemplates": true
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/exercises/webworkers/5-party-town/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ng-be WebWorkers
5 |
6 |
7 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/solutions/webworkers/3-message-channel/src/swap.mjs:
--------------------------------------------------------------------------------
1 | export function swap(a, b) {
2 | return new Promise((resolve) => {
3 | const aWorker = new Worker('./swap.worker.mjs');
4 | const bWorker = new Worker('./swap.worker.mjs');
5 |
6 | // create a `MessageChannel` gives back two ports which can be used to communicate with each other
7 | const { port1, port2 } = new MessageChannel();
8 |
9 | let aValue;
10 | let bValue;
11 |
12 | function done() {
13 | if (aValue !== undefined && bValue !== undefined) {
14 | resolve([aValue, bValue]);
15 | }
16 | }
17 |
18 | // listen for messages coming back from the workers
19 | aWorker.onmessage = (message) => {
20 | aValue = message.data;
21 |
22 | done();
23 | };
24 |
25 | bWorker.onmessage = (message) => {
26 | bValue = message.data;
27 |
28 | done();
29 | };
30 |
31 | // send one side of the channel together with the value to each worker
32 | aWorker.postMessage({ value: a, port: port1 }, [port1]);
33 | bWorker.postMessage({ value: b, port: port2 }, [port2]);
34 | });
35 | }
36 |
--------------------------------------------------------------------------------
/exercises/webassembly/3-mandelbrot/step-2-workerpool/src/mandelbrot.ts:
--------------------------------------------------------------------------------
1 | declare const MAX_ITERATIONS: u32;
2 | declare const WIDTH: u32;
3 | declare const HEIGHT: u32;
4 | declare const MAX_COLORS: u32;
5 | declare const REAL_START: i32;
6 | declare const REAL_END: i32;
7 | declare const IMAGINARY_START: i32;
8 | declare const IMAGINARY_END: i32;
9 |
10 | export function mandelbrot(x: f64, y: f64): u32 {
11 | x = REAL_START + (x / WIDTH) * (REAL_END - REAL_START);
12 | y = IMAGINARY_START + (y / HEIGHT) * (IMAGINARY_END - IMAGINARY_START);
13 |
14 | let a: f64 = 0.0;
15 | let b: f64 = 0.0;
16 |
17 | let i: u32 = 0;
18 |
19 | let rx: f64;
20 | let ry: f64;
21 |
22 | let d: f64;
23 |
24 | do {
25 | rx = Math.pow(a, 2) - Math.pow(b, 2);
26 | ry = 2 * a * b;
27 |
28 | a = rx + x;
29 | b = ry + y;
30 |
31 | d = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
32 |
33 | i += 1;
34 | } while (d <= 2 && i < MAX_ITERATIONS);
35 |
36 | return getColorIndex(i, d <= 2);
37 | }
38 |
39 | function getColorIndex(i: u32, isMandelbrotSet: bool): u32 {
40 | return isMandelbrotSet ? 0 : i % MAX_COLORS;
41 | }
42 |
--------------------------------------------------------------------------------
/exercises/webworkers/5-party-town/src/partyTown.js:
--------------------------------------------------------------------------------
1 | const types = {
2 | google_analytics: `
3 | (function () {
4 | // I'm a library built to work the main thread and
5 | // am consuming way more resources then I should.
6 | console.log('Inside the script', document.location);
7 | })();`,
8 | };
9 |
10 | let sab;
11 | let int32;
12 |
13 | /**
14 | * By assigning the document to the global worker scope, it will be
15 | * available when the script is `eval`'d
16 | */
17 | self.document = new Proxy(
18 | {},
19 | {
20 | get: function (target, prop, receiver) {
21 | // Send to the main thread which property we want
22 | self.postMessage(prop);
23 |
24 | // Sleep the worker
25 |
26 | // Get the data and decode it and return the result
27 |
28 | },
29 | }
30 | );
31 |
32 | self.onmessage = ({ data }) => {
33 | if (data.type) {
34 | evalSourceCode(types[data.type]);
35 | }
36 |
37 | if (data.sab) {
38 | sab = data.sab;
39 | int32 = new Int32Array(sab);
40 | int8 = new Uint8Array(sab);
41 | }
42 | };
43 |
44 | function evalSourceCode(code) {
45 | eval(code);
46 | }
47 |
--------------------------------------------------------------------------------
/solutions/webassembly/3-mandelbrot/step-1-assemblyscript/src/mandelbrot.ts:
--------------------------------------------------------------------------------
1 | declare const MAX_ITERATIONS: u32;
2 | declare const WIDTH: u32;
3 | declare const HEIGHT: u32;
4 | declare const MAX_COLORS: u32;
5 | declare const REAL_START: i32;
6 | declare const REAL_END: i32;
7 | declare const IMAGINARY_START: i32;
8 | declare const IMAGINARY_END: i32;
9 |
10 | export function mandelbrot(x: f64, y: f64): u32 {
11 | x = REAL_START + (x / WIDTH) * (REAL_END - REAL_START);
12 | y = IMAGINARY_START + (y / HEIGHT) * (IMAGINARY_END - IMAGINARY_START);
13 |
14 | let a: f64 = 0.0;
15 | let b: f64 = 0.0;
16 |
17 | let i: u32 = 0;
18 |
19 | let rx: f64;
20 | let ry: f64;
21 |
22 | let d: f64;
23 |
24 | do {
25 | rx = Math.pow(a, 2) - Math.pow(b, 2);
26 | ry = 2 * a * b;
27 |
28 | a = rx + x;
29 | b = ry + y;
30 |
31 | d = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
32 |
33 | i += 1;
34 | } while (d <= 2 && i < MAX_ITERATIONS);
35 |
36 | return getColorIndex(i, d <= 2);
37 | }
38 |
39 | function getColorIndex(i: u32, isMandelbrotSet: bool): u32 {
40 | return isMandelbrotSet ? 0 : i % MAX_COLORS;
41 | }
42 |
--------------------------------------------------------------------------------
/solutions/webassembly/3-mandelbrot/step-2-workerpool/src/mandelbrot.ts:
--------------------------------------------------------------------------------
1 | declare const MAX_ITERATIONS: u32;
2 | declare const WIDTH: u32;
3 | declare const HEIGHT: u32;
4 | declare const MAX_COLORS: u32;
5 | declare const REAL_START: i32;
6 | declare const REAL_END: i32;
7 | declare const IMAGINARY_START: i32;
8 | declare const IMAGINARY_END: i32;
9 |
10 | export function mandelbrot(x: f64, y: f64): u32 {
11 | x = REAL_START + (x / WIDTH) * (REAL_END - REAL_START);
12 | y = IMAGINARY_START + (y / HEIGHT) * (IMAGINARY_END - IMAGINARY_START);
13 |
14 | let a: f64 = 0.0;
15 | let b: f64 = 0.0;
16 |
17 | let i: u32 = 0;
18 |
19 | let rx: f64;
20 | let ry: f64;
21 |
22 | let d: f64;
23 |
24 | do {
25 | rx = Math.pow(a, 2) - Math.pow(b, 2);
26 | ry = 2 * a * b;
27 |
28 | a = rx + x;
29 | b = ry + y;
30 |
31 | d = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
32 |
33 | i += 1;
34 | } while (d <= 2 && i < MAX_ITERATIONS);
35 |
36 | return getColorIndex(i, d <= 2);
37 | }
38 |
39 | function getColorIndex(i: u32, isMandelbrotSet: bool): u32 {
40 | return isMandelbrotSet ? 0 : i % MAX_COLORS;
41 | }
42 |
--------------------------------------------------------------------------------
/exercises/webassembly/3-mandelbrot/step-2-workerpool/src/worker.mjs:
--------------------------------------------------------------------------------
1 | import { instantiate } from 'https://cdn.jsdelivr.net/npm/@assemblyscript/loader/index.js';
2 | import * as Comlink from 'https://unpkg.com/comlink/dist/esm/comlink.mjs';
3 |
4 | Comlink.expose(async (width, height, colors) => {
5 | const {
6 | exports: { mandelbrot },
7 | } = await instantiate(fetch('mandelbrot.wasm'), {
8 | mandelbrot: {
9 | WIDTH: width,
10 | HEIGHT: height,
11 | MAX_ITERATIONS: 85,
12 | MAX_COLORS: colors.length,
13 | REAL_START: -2,
14 | REAL_END: 1,
15 | IMAGINARY_START: -1,
16 | IMAGINARY_END: 1,
17 | },
18 | });
19 |
20 | const result = new Uint8Array(width * height * 4);
21 |
22 | let i = 0;
23 |
24 | for (let y = 0; y < height; y++) {
25 | for (let x = 0; x < width; x++) {
26 | const colorIndex = mandelbrot(x, y);
27 | const [r, g, b] = colors[colorIndex];
28 |
29 | result[i] = r;
30 | result[i + 1] = g;
31 | result[i + 2] = b;
32 | result[i + 3] = 255;
33 |
34 | i += 4;
35 | }
36 | }
37 |
38 | return Comlink.transfer(result, [result.buffer]);
39 | });
40 |
--------------------------------------------------------------------------------
/solutions/webassembly/3-mandelbrot/step-1-assemblyscript/src/worker.mjs:
--------------------------------------------------------------------------------
1 | import { instantiate } from 'https://cdn.jsdelivr.net/npm/@assemblyscript/loader/index.js';
2 | import * as Comlink from 'https://unpkg.com/comlink/dist/esm/comlink.mjs';
3 |
4 | Comlink.expose(async (width, height, colors) => {
5 | const {
6 | exports: { mandelbrot },
7 | } = await instantiate(fetch('mandelbrot.wasm'), {
8 | mandelbrot: {
9 | WIDTH: width,
10 | HEIGHT: height,
11 | MAX_ITERATIONS: 85,
12 | MAX_COLORS: colors.length,
13 | REAL_START: -2,
14 | REAL_END: 1,
15 | IMAGINARY_START: -1,
16 | IMAGINARY_END: 1,
17 | },
18 | });
19 |
20 | const result = new Uint8Array(width * height * 4);
21 |
22 | let i = 0;
23 |
24 | for (let y = 0; y < height; y++) {
25 | for (let x = 0; x < width; x++) {
26 | const colorIndex = mandelbrot(x, y);
27 | const [r, g, b] = colors[colorIndex];
28 |
29 | result[i] = r;
30 | result[i + 1] = g;
31 | result[i + 2] = b;
32 | result[i + 3] = 255;
33 |
34 | i += 4;
35 | }
36 | }
37 |
38 | return Comlink.transfer(result, [result.buffer]);
39 | });
40 |
--------------------------------------------------------------------------------
/solutions/webworkers/1-fibonacci/step-3-worker-abort/src/fibonacci.mjs:
--------------------------------------------------------------------------------
1 | const worker = new Worker('./fibonacci.worker.mjs', {
2 | name: 'Fibonacci Worker',
3 | type: 'module',
4 | });
5 |
6 | let abortController;
7 |
8 | export function fibonacci(position) {
9 | // abort the previous execution if it exists
10 | abortController?.abort();
11 |
12 | return new Promise((resolve) => {
13 | if (typeof Worker === 'undefined') {
14 | throw new Error('WebWorkers are not supported...');
15 | }
16 |
17 | // create a new "abort controller" that will resolve the promise with `undefined` when aborted
18 | abortController = createAbortController(resolve);
19 |
20 | worker.onmessage = (message) => {
21 | resolve(message.data);
22 | };
23 |
24 | worker.postMessage({
25 | value: position,
26 | abortSignal: abortController.signal,
27 | });
28 | });
29 | }
30 |
31 | function createAbortController(resolve) {
32 | const sab = new SharedArrayBuffer(1);
33 | const abortSignal = new Uint8Array(sab);
34 |
35 | return {
36 | signal: sab,
37 | abort() {
38 | abortSignal[0] = 1;
39 |
40 | resolve();
41 | },
42 | };
43 | }
44 |
--------------------------------------------------------------------------------
/solutions/webassembly/3-mandelbrot/step-2-workerpool/src/worker.mjs:
--------------------------------------------------------------------------------
1 | import { instantiate } from 'https://cdn.jsdelivr.net/npm/@assemblyscript/loader/index.js';
2 | import * as Comlink from 'https://unpkg.com/comlink/dist/esm/comlink.mjs';
3 |
4 | Comlink.expose(async (start, end, width, height, colors) => {
5 | const {
6 | exports: { mandelbrot },
7 | } = await instantiate(fetch('mandelbrot.wasm'), {
8 | mandelbrot: {
9 | WIDTH: width,
10 | HEIGHT: height,
11 | MAX_ITERATIONS: 85,
12 | MAX_COLORS: colors.length,
13 | REAL_START: -2,
14 | REAL_END: 1,
15 | IMAGINARY_START: -1,
16 | IMAGINARY_END: 1,
17 | },
18 | });
19 |
20 | const blockHeight = end - start;
21 |
22 | const result = new Uint8Array(width * blockHeight * 4);
23 |
24 | let i = 0;
25 |
26 | for (let y = start; y < end; y++) {
27 | for (let x = 0; x < width; x++) {
28 | const colorIndex = mandelbrot(x, y);
29 | const [r, g, b] = colors[colorIndex];
30 |
31 | result[i] = r;
32 | result[i + 1] = g;
33 | result[i + 2] = b;
34 | result[i + 3] = 255;
35 |
36 | i += 4;
37 | }
38 | }
39 |
40 | return Comlink.transfer(result, [result.buffer]);
41 | });
42 |
--------------------------------------------------------------------------------
/exercises/webworkers/1-fibonacci/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE Fibonacci Main Thread
5 |
6 |
7 |
8 | fib(??
10 |
11 |
12 | Calculate
13 |
14 | 1
15 |
16 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/solutions/webworkers/1-fibonacci/step-1-worker/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE Fibonacci WebWorkers
5 |
6 |
7 |
8 | fib(??
10 |
11 |
12 | Calculate
13 |
14 | 1
15 |
16 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/app/todo/services/todo.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { BehaviorSubject } from 'rxjs';
3 | import { v4 as uuidv4 } from 'uuid';
4 |
5 | import { TodoAction, createTodo, removeTodo } from '../actions';
6 | import { Todo } from '../entities';
7 |
8 | @Injectable({
9 | providedIn: 'root',
10 | })
11 | export class TodoService {
12 | private todos: Todo[] = JSON.parse(localStorage.getItem('todolist') || '[]');
13 |
14 | todos$ = new BehaviorSubject(this.todos);
15 |
16 | addTodo(todo: string) {
17 | const action = createTodo(uuidv4(), todo);
18 |
19 | this.handleAction(action);
20 | }
21 |
22 | removeTodo(id: string) {
23 | const action = removeTodo(id);
24 |
25 | this.handleAction(action);
26 | }
27 |
28 | private handleAction(message: TodoAction) {
29 | switch (message.type) {
30 | case 'ADD': {
31 | this.todos = [...this.todos, { id: message.id, todo: message.todo }];
32 |
33 | break;
34 | }
35 | case 'REMOVE': {
36 | this.todos = this.todos.filter(({ id }) => id !== message.id);
37 | }
38 | }
39 |
40 | localStorage.setItem('todolist', JSON.stringify(this.todos));
41 |
42 | this.todos$.next(this.todos);
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/solutions/webworkers/5-party-town/src/partyTown.js:
--------------------------------------------------------------------------------
1 | const types = {
2 | google_analytics: `
3 | (function () {
4 | // I'm a library built to work the main thread and
5 | // am consuming way more resources then I should.
6 | console.log('Inside the script', document.location);
7 | })();`,
8 | };
9 |
10 | let sab;
11 | let int32;
12 | let int8;
13 |
14 | /**
15 | * By assigning the document to the global worker scope, it will be
16 | * available when the script is `eval`'d
17 | */
18 | self.document = new Proxy(
19 | {},
20 | {
21 | get: function (target, prop, receiver) {
22 | // Send to the main thread which property we want
23 | self.postMessage(prop);
24 |
25 | // Sleep this worker until a value is written in the SAB
26 | Atomics.wait(int32, 0, 0);
27 |
28 | // Get the data
29 | const data = int8.slice(4, 1000).filter((x) => x !== 0);
30 |
31 | return new TextDecoder().decode(data);
32 | },
33 | }
34 | );
35 |
36 | self.onmessage = ({ data }) => {
37 | if (data.type) {
38 | evalSourceCode(types[data.type]);
39 | }
40 |
41 | if (data.sab) {
42 | sab = data.sab;
43 | int32 = new Int32Array(sab);
44 | int8 = new Uint8Array(sab);
45 | }
46 | };
47 |
48 | function evalSourceCode(code) {
49 | eval(code);
50 | }
51 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-be-angular-todo",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "~13.0.0",
14 | "@angular/common": "~13.0.0",
15 | "@angular/compiler": "~13.0.0",
16 | "@angular/core": "~13.0.0",
17 | "@angular/forms": "~13.0.0",
18 | "@angular/platform-browser": "~13.0.0",
19 | "@angular/platform-browser-dynamic": "~13.0.0",
20 | "@angular/router": "~13.0.0",
21 | "rxjs": "~7.4.0",
22 | "tslib": "^2.3.0",
23 | "uuid": "^8.3.2",
24 | "zone.js": "~0.11.4"
25 | },
26 | "devDependencies": {
27 | "@angular-devkit/build-angular": "~13.0.3",
28 | "@angular/cli": "~13.0.3",
29 | "@angular/compiler-cli": "~13.0.0",
30 | "@types/jasmine": "~3.10.0",
31 | "@types/node": "^12.11.1",
32 | "@types/uuid": "^8.3.3",
33 | "jasmine-core": "~3.10.0",
34 | "karma": "~6.3.0",
35 | "karma-chrome-launcher": "~3.1.0",
36 | "karma-coverage": "~2.0.3",
37 | "karma-jasmine": "~4.0.0",
38 | "karma-jasmine-html-reporter": "~1.7.0",
39 | "typescript": "~4.4.3"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-be-angular-fibonacci",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "~13.0.0",
14 | "@angular/common": "~13.0.0",
15 | "@angular/compiler": "~13.0.0",
16 | "@angular/core": "~13.0.0",
17 | "@angular/forms": "~13.0.0",
18 | "@angular/platform-browser": "~13.0.0",
19 | "@angular/platform-browser-dynamic": "~13.0.0",
20 | "@angular/router": "~13.0.0",
21 | "rxjs": "~7.4.0",
22 | "tslib": "^2.3.0",
23 | "uuid": "^8.3.2",
24 | "zone.js": "~0.11.4"
25 | },
26 | "devDependencies": {
27 | "@angular-devkit/build-angular": "~13.0.3",
28 | "@angular/cli": "~13.0.3",
29 | "@angular/compiler-cli": "~13.0.0",
30 | "@types/jasmine": "~3.10.0",
31 | "@types/node": "^12.11.1",
32 | "@types/uuid": "^8.3.3",
33 | "jasmine-core": "~3.10.0",
34 | "karma": "~6.3.0",
35 | "karma-chrome-launcher": "~3.1.0",
36 | "karma-coverage": "~2.0.3",
37 | "karma-jasmine": "~4.0.0",
38 | "karma-jasmine-html-reporter": "~1.7.0",
39 | "typescript": "~4.4.3"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/readme.md:
--------------------------------------------------------------------------------
1 | # Angular ToDo
2 |
3 | [](https://stackblitz.com/fork/github/stackblitz/ng-be-workshop/tree/main/exercises/webworkers/4-angular-todo?file=README.md)
4 |
5 | After starting the application, you will see that you can add items to a ToDo list, and remove them by clicking
6 | on the item itself. The state is stored in `LocalStorage`, so after refreshing the page, the ToDo items should
7 | still be visible.
8 |
9 | ## Exercise
10 |
11 | **Tip**: The `onmessage` handlers run outside the Angular zone!
12 |
13 | ### Exercise 1
14 |
15 | A [`SharedWorker`](https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker) allows us to communicate with other
16 | browser tabs or browser windows.
17 |
18 | Add a `SharedWorker` to the `TodoService` so that the ToDo list is synchronized with other open browser windows.
19 |
20 | **Tip**: Do not send the entire list of items through the worker.
21 |
22 | ### Exercise 2
23 |
24 | If we just have to proxy all the messages from one browser context to all other browser contexts, it's better to use a [`BroadcastChannel`](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel).
25 |
26 | Fork your StackBlitz project and refactor the `SharedWorker` implementation to using a `BroadcastChannel`.
27 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-be-angular-todo",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "~13.0.0",
14 | "@angular/common": "~13.0.0",
15 | "@angular/compiler": "~13.0.0",
16 | "@angular/core": "~13.0.0",
17 | "@angular/forms": "~13.0.0",
18 | "@angular/platform-browser": "~13.0.0",
19 | "@angular/platform-browser-dynamic": "~13.0.0",
20 | "@angular/router": "~13.0.0",
21 | "rxjs": "~7.4.0",
22 | "tslib": "^2.3.0",
23 | "uuid": "^8.3.2",
24 | "zone.js": "~0.11.4"
25 | },
26 | "devDependencies": {
27 | "@angular-devkit/build-angular": "~13.0.3",
28 | "@angular/cli": "~13.0.3",
29 | "@angular/compiler-cli": "~13.0.0",
30 | "@types/jasmine": "~3.10.0",
31 | "@types/node": "^12.11.1",
32 | "@types/uuid": "^8.3.3",
33 | "jasmine-core": "~3.10.0",
34 | "karma": "~6.3.0",
35 | "karma-chrome-launcher": "~3.1.0",
36 | "karma-coverage": "~2.0.3",
37 | "karma-jasmine": "~4.0.0",
38 | "karma-jasmine-html-reporter": "~1.7.0",
39 | "typescript": "~4.4.3"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-be-angular-fibonacci",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "~13.0.0",
14 | "@angular/common": "~13.0.0",
15 | "@angular/compiler": "~13.0.0",
16 | "@angular/core": "~13.0.0",
17 | "@angular/forms": "~13.0.0",
18 | "@angular/platform-browser": "~13.0.0",
19 | "@angular/platform-browser-dynamic": "~13.0.0",
20 | "@angular/router": "~13.0.0",
21 | "rxjs": "~7.4.0",
22 | "tslib": "^2.3.0",
23 | "uuid": "^8.3.2",
24 | "zone.js": "~0.11.4"
25 | },
26 | "devDependencies": {
27 | "@angular-devkit/build-angular": "~13.0.3",
28 | "@angular/cli": "~13.0.3",
29 | "@angular/compiler-cli": "~13.0.0",
30 | "@types/jasmine": "~3.10.0",
31 | "@types/node": "^12.11.1",
32 | "@types/uuid": "^8.3.3",
33 | "jasmine-core": "~3.10.0",
34 | "karma": "~6.3.0",
35 | "karma-chrome-launcher": "~3.1.0",
36 | "karma-coverage": "~2.0.3",
37 | "karma-jasmine": "~4.0.0",
38 | "karma-jasmine-html-reporter": "~1.7.0",
39 | "typescript": "~4.4.3"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-be-angular-todo",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "~13.0.0",
14 | "@angular/common": "~13.0.0",
15 | "@angular/compiler": "~13.0.0",
16 | "@angular/core": "~13.0.0",
17 | "@angular/forms": "~13.0.0",
18 | "@angular/platform-browser": "~13.0.0",
19 | "@angular/platform-browser-dynamic": "~13.0.0",
20 | "@angular/router": "~13.0.0",
21 | "rxjs": "~7.4.0",
22 | "tslib": "^2.3.0",
23 | "uuid": "^8.3.2",
24 | "zone.js": "~0.11.4"
25 | },
26 | "devDependencies": {
27 | "@angular-devkit/build-angular": "~13.0.3",
28 | "@angular/cli": "~13.0.3",
29 | "@angular/compiler-cli": "~13.0.0",
30 | "@types/jasmine": "~3.10.0",
31 | "@types/node": "^12.11.1",
32 | "@types/uuid": "^8.3.3",
33 | "jasmine-core": "~3.10.0",
34 | "karma": "~6.3.0",
35 | "karma-chrome-launcher": "~3.1.0",
36 | "karma-coverage": "~2.0.3",
37 | "karma-jasmine": "~4.0.0",
38 | "karma-jasmine-html-reporter": "~1.7.0",
39 | "typescript": "~4.4.3"
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-be-angular-fibonacci",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "~13.0.0",
14 | "@angular/common": "~13.0.0",
15 | "@angular/compiler": "~13.0.0",
16 | "@angular/core": "~13.0.0",
17 | "@angular/forms": "~13.0.0",
18 | "@angular/platform-browser": "~13.0.0",
19 | "@angular/platform-browser-dynamic": "~13.0.0",
20 | "@angular/router": "~13.0.0",
21 | "comlink": "^4.3.1",
22 | "rxjs": "~7.4.0",
23 | "tslib": "^2.3.0",
24 | "uuid": "^8.3.2",
25 | "zone.js": "~0.11.4"
26 | },
27 | "devDependencies": {
28 | "@angular-devkit/build-angular": "~13.0.3",
29 | "@angular/cli": "~13.0.3",
30 | "@angular/compiler-cli": "~13.0.0",
31 | "@types/jasmine": "~3.10.0",
32 | "@types/node": "^12.11.1",
33 | "@types/uuid": "^8.3.3",
34 | "jasmine-core": "~3.10.0",
35 | "karma": "~6.3.0",
36 | "karma-chrome-launcher": "~3.1.0",
37 | "karma-coverage": "~2.0.3",
38 | "karma-jasmine": "~4.0.0",
39 | "karma-jasmine-html-reporter": "~1.7.0",
40 | "typescript": "~4.4.3"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/solutions/webworkers/1-fibonacci/step-2-worker-terminate/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE Fibonacci WebWorkers Terminate
5 |
6 |
7 |
8 | fib(??
10 |
11 |
12 | Calculate
13 |
14 | 1
15 |
16 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/exercises/webassembly/3-mandelbrot/step-1-assemblyscript/src/index.mjs:
--------------------------------------------------------------------------------
1 | import * as Comlink from 'https://unpkg.com/comlink/dist/esm/comlink.mjs';
2 | import { colors } from './utils.mjs';
3 |
4 | console.clear();
5 |
6 | const $executionTime = document.querySelector('#executionTime');
7 | const $runButton = document.querySelector('#run');
8 |
9 | const WIDTH = 1200;
10 | const HEIGHT = 800;
11 |
12 | const canvas = document.createElement('canvas');
13 |
14 | canvas.width = WIDTH;
15 | canvas.height = HEIGHT;
16 |
17 | const ctx = canvas.getContext('2d');
18 |
19 | document.body.appendChild(canvas);
20 |
21 | let running = false;
22 |
23 | $runButton.addEventListener('click', () => {
24 | if (running) {
25 | return;
26 | }
27 |
28 | running = true;
29 |
30 | ctx.clearRect(0, 0, canvas.width, canvas.height);
31 |
32 | run().then(() => {
33 | running = false;
34 | });
35 | });
36 |
37 | async function run() {
38 | const worker = Comlink.wrap(new Worker('./worker.mjs', { name: 'Mandelbrot Worker', type: 'module' }));
39 |
40 | const start = performance.now();
41 |
42 | const pixels = await worker(WIDTH, HEIGHT, colors);
43 |
44 | const imageData = ctx.createImageData(WIDTH, HEIGHT);
45 | imageData.data.set(pixels);
46 |
47 | ctx.putImageData(imageData, 0, 0);
48 |
49 | const elapsed = performance.now() - start;
50 |
51 | $executionTime.innerHTML = `${elapsed.toFixed(2)}ms`;
52 | }
53 |
--------------------------------------------------------------------------------
/solutions/webassembly/3-mandelbrot/step-1-assemblyscript/src/index.mjs:
--------------------------------------------------------------------------------
1 | import * as Comlink from 'https://unpkg.com/comlink/dist/esm/comlink.mjs';
2 | import { colors } from './utils.mjs';
3 |
4 | console.clear();
5 |
6 | const $executionTime = document.querySelector('#executionTime');
7 | const $runButton = document.querySelector('#run');
8 |
9 | const WIDTH = 1200;
10 | const HEIGHT = 800;
11 |
12 | const canvas = document.createElement('canvas');
13 |
14 | canvas.width = WIDTH;
15 | canvas.height = HEIGHT;
16 |
17 | const ctx = canvas.getContext('2d');
18 |
19 | document.body.appendChild(canvas);
20 |
21 | let running = false;
22 |
23 | $runButton.addEventListener('click', () => {
24 | if (running) {
25 | return;
26 | }
27 |
28 | running = true;
29 |
30 | ctx.clearRect(0, 0, canvas.width, canvas.height);
31 |
32 | run().then(() => {
33 | running = false;
34 | });
35 | });
36 |
37 | async function run() {
38 | const worker = Comlink.wrap(new Worker('./worker.mjs', { name: 'Mandelbrot Worker', type: 'module' }));
39 |
40 | const start = performance.now();
41 |
42 | const pixels = await worker(WIDTH, HEIGHT, colors);
43 |
44 | const imageData = ctx.createImageData(WIDTH, HEIGHT);
45 | imageData.data.set(pixels);
46 |
47 | ctx.putImageData(imageData, 0, 0);
48 |
49 | const elapsed = performance.now() - start;
50 |
51 | $executionTime.innerHTML = `${elapsed.toFixed(2)}ms`;
52 | }
53 |
--------------------------------------------------------------------------------
/solutions/webworkers/5-party-town/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ng-be WebWorkers
5 |
6 |
7 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/solutions/webworkers/1-fibonacci/step-3-worker-abort/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE Fibonacci WebWorkers Abort
5 |
6 |
7 |
8 | fib(??
10 |
11 |
12 | Calculate
13 |
14 | 1
15 |
16 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/solutions/webworkers/1-fibonacci/step-4-worker-comlink/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | NG-BE Fibonacci WebWorkers Abort
5 |
6 |
7 |
8 | fib(??
10 |
11 |
12 | Calculate
13 |
14 | 1
15 |
16 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma'),
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false, // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true, // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/ng-be-angular-shared'),
29 | subdir: '.',
30 | reporters: [{ type: 'html' }, { type: 'text-summary' }],
31 | },
32 | reporters: ['progress', 'kjhtml'],
33 | port: 9876,
34 | colors: true,
35 | logLevel: config.LOG_INFO,
36 | autoWatch: true,
37 | browsers: ['Chrome'],
38 | singleRun: false,
39 | restartOnFileChange: true,
40 | });
41 | };
42 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma'),
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false, // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true, // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/ng-be-angular-shared'),
29 | subdir: '.',
30 | reporters: [{ type: 'html' }, { type: 'text-summary' }],
31 | },
32 | reporters: ['progress', 'kjhtml'],
33 | port: 9876,
34 | colors: true,
35 | logLevel: config.LOG_INFO,
36 | autoWatch: true,
37 | browsers: ['Chrome'],
38 | singleRun: false,
39 | restartOnFileChange: true,
40 | });
41 | };
42 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma'),
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false, // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true, // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/ng-be-angular-shared'),
29 | subdir: '.',
30 | reporters: [{ type: 'html' }, { type: 'text-summary' }],
31 | },
32 | reporters: ['progress', 'kjhtml'],
33 | port: 9876,
34 | colors: true,
35 | logLevel: config.LOG_INFO,
36 | autoWatch: true,
37 | browsers: ['Chrome'],
38 | singleRun: false,
39 | restartOnFileChange: true,
40 | });
41 | };
42 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma'),
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false, // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true, // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/ng-be-angular-shared'),
29 | subdir: '.',
30 | reporters: [{ type: 'html' }, { type: 'text-summary' }],
31 | },
32 | reporters: ['progress', 'kjhtml'],
33 | port: 9876,
34 | colors: true,
35 | logLevel: config.LOG_INFO,
36 | autoWatch: true,
37 | browsers: ['Chrome'],
38 | singleRun: false,
39 | restartOnFileChange: true,
40 | });
41 | };
42 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma'),
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false, // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true, // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/ng-be-angular-shared'),
29 | subdir: '.',
30 | reporters: [{ type: 'html' }, { type: 'text-summary' }],
31 | },
32 | reporters: ['progress', 'kjhtml'],
33 | port: 9876,
34 | colors: true,
35 | logLevel: config.LOG_INFO,
36 | autoWatch: true,
37 | browsers: ['Chrome'],
38 | singleRun: false,
39 | restartOnFileChange: true,
40 | });
41 | };
42 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma'),
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false, // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true, // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/ng-be-angular-shared'),
29 | subdir: '.',
30 | reporters: [{ type: 'html' }, { type: 'text-summary' }],
31 | },
32 | reporters: ['progress', 'kjhtml'],
33 | port: 9876,
34 | colors: true,
35 | logLevel: config.LOG_INFO,
36 | autoWatch: true,
37 | browsers: ['Chrome'],
38 | singleRun: false,
39 | restartOnFileChange: true,
40 | });
41 | };
42 |
--------------------------------------------------------------------------------
/exercises/webworkers/5-party-town/readme.md:
--------------------------------------------------------------------------------
1 | # Party town starter
2 |
3 | [](https://stackblitz.com/fork/github/stackblitz/ng-be-workshop/tree/main/exercises/webworkers/5-party-town?file=src%2Findex.html)
4 |
5 | This example mimics the way the party town library works.
6 |
7 | ## Exercise
8 |
9 | Implement the following steps in the party town library.
10 |
11 | 1. Create the `SharedArrayBuffer` and `Int32Array` on the main thread.
12 | 2. When the main thread receives a message, get the corresponding value from the `document` send, encodes it and store it in the SAB.
13 | 3. Make sure the Worker gets unlocked when the data is written.
14 | 4. When the worker receives the `SharedArrayBuffer`, create the `TypedArray` for it.
15 | 5. Make the worker sleep when a property of the `document` is requested.
16 |
17 | ### Bonus Exercise
18 |
19 | Adapt the SAB to follow the data structure described below. This means that writing and reading the actual data would use a `Uint8Array`.
20 |
21 | The following data structure makes sure that
22 |
23 | ```
24 | * +----------------------------------------+
25 | * | |
26 | * | |- RESERVED BYTES |- VARIABLE ----| |
27 | * | |
28 | * | LOCK DATA |
29 | * | +---------------+ +---------------+ |
30 | * | | Int32Array | | Uint8Array | |
31 | * | +---------------+ +---------------+ |
32 | * | |
33 | * | < - 4 Bytes --- > <- N Bytes ---- > |
34 | * | |
35 | * +----------------------------------------+
36 | ```
37 |
--------------------------------------------------------------------------------
/exercises/webassembly/3-mandelbrot/step-2-workerpool/src/index.mjs:
--------------------------------------------------------------------------------
1 | import * as Comlink from 'https://unpkg.com/comlink/dist/esm/comlink.mjs';
2 | import { colors } from './utils.mjs';
3 |
4 | console.clear();
5 |
6 | const $executionTime = document.querySelector('#executionTime');
7 | const $threadSlider = document.querySelector('#threads');
8 | const $threadCount = document.querySelector('#thread-count');
9 | const $runButton = document.querySelector('#run');
10 |
11 | let threadCount = $threadSlider.valueAsNumber;
12 |
13 | $threadSlider.oninput = (event) => {
14 | threadCount = event.target.valueAsNumber;
15 | $threadCount.innerHTML = threadCount;
16 | };
17 |
18 | const WIDTH = 1200;
19 | const HEIGHT = 800;
20 |
21 | const canvas = document.createElement('canvas');
22 |
23 | canvas.width = WIDTH;
24 | canvas.height = HEIGHT;
25 |
26 | const ctx = canvas.getContext('2d');
27 |
28 | document.body.appendChild(canvas);
29 |
30 | let running = false;
31 |
32 | $runButton.addEventListener('click', () => {
33 | if (running) {
34 | return;
35 | }
36 |
37 | running = true;
38 |
39 | ctx.clearRect(0, 0, canvas.width, canvas.height);
40 |
41 | run().then(() => {
42 | running = false;
43 | });
44 | });
45 |
46 | async function run() {
47 | const worker = Comlink.wrap(new Worker('./worker.mjs', { name: 'Mandelbrot Worker', type: 'module' }));
48 |
49 | const start = performance.now();
50 |
51 | const pixels = await worker(WIDTH, HEIGHT, colors);
52 |
53 | const imageData = ctx.createImageData(WIDTH, HEIGHT);
54 | imageData.data.set(pixels);
55 |
56 | ctx.putImageData(imageData, 0, 0);
57 |
58 | const elapsed = performance.now() - start;
59 |
60 | $executionTime.innerHTML = `${elapsed.toFixed(2)}ms`;
61 | }
62 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-2-broadcast-channel/src/app/todo/services/todo.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable, NgZone } from '@angular/core';
2 | import { BehaviorSubject } from 'rxjs';
3 | import { v4 as uuidv4 } from 'uuid';
4 |
5 | import { TodoAction, createTodo, removeTodo } from '../actions';
6 | import { Todo } from '../entities';
7 |
8 | @Injectable({
9 | providedIn: 'root',
10 | })
11 | export class TodoService {
12 | private channel?: BroadcastChannel;
13 | private todos: Todo[] = JSON.parse(localStorage.getItem('todolist') || '[]');
14 |
15 | todos$ = new BehaviorSubject(this.todos);
16 |
17 | constructor(private ngZone: NgZone) {
18 | this.channel = new BroadcastChannel('todo');
19 |
20 | this.channel.onmessage = (message: { data: TodoAction }) => {
21 | this.ngZone.run(() => {
22 | this.handleAction(message.data);
23 | });
24 | };
25 | }
26 |
27 | addTodo(todo: string) {
28 | const action = createTodo(uuidv4(), todo);
29 |
30 | this.handleAction(action);
31 |
32 | this.channel?.postMessage(action);
33 | }
34 |
35 | removeTodo(id: string) {
36 | const action = removeTodo(id);
37 |
38 | this.handleAction(action);
39 |
40 | this.channel?.postMessage(action);
41 | }
42 |
43 | private handleAction(message: TodoAction) {
44 | switch (message.type) {
45 | case 'ADD': {
46 | this.todos = [...this.todos, { id: message.id, todo: message.todo }];
47 |
48 | break;
49 | }
50 | case 'REMOVE': {
51 | this.todos = this.todos.filter(({ id }) => id !== message.id);
52 | }
53 | }
54 |
55 | localStorage.setItem('todolist', JSON.stringify(this.todos));
56 |
57 | this.todos$.next(this.todos);
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/exercises/webworkers/3-message-channel/readme.md:
--------------------------------------------------------------------------------
1 | # Swap Starter
2 |
3 | [](https://stackblitz.com/fork/github/stackblitz/ng-be-workshop/tree/main/exercises/webworkers/3-message-channel?file=src%2Findex.html)
4 |
5 | The idea of this exercise is to create two WebWorkers that communicate with each other over a
6 | [`MessageChannel`](https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel).
7 |
8 | The main thread spins up 2 workers, and sends each worker a different value. Worker 1 will receive value `a`,
9 | and Worker 2 will receive value `b`. The workers send their value over the `MessageChannel` to the other worker
10 | which will return the value back to the main thread. In this case, Worker 1 will send back `b` and Worker 2
11 | will send back `a`.
12 |
13 |
14 | ```
15 | ┌────────────────────────────────────────────────────────────┐
16 | │ Main Thread │
17 | │ b ▲ ▲ a │
18 | │ │ │ │
19 | │ ┌──────────────┘ └──────────────┐ │
20 | │ a ▼ ▼ b │
21 | │ ┌─────────────────┐ ┌─────────────────┐ │
22 | │ │ │ │ │ │
23 | │ │ │ │ │ │
24 | │ │ Worker 1 │◄────────────────►│ Worker 2 │ │
25 | │ │ │ MessageChannel │ │ │
26 | │ │ │ │ │ │
27 | │ └─────────────────┘ └─────────────────┘ │
28 | └────────────────────────────────────────────────────────────┘
29 | ```
30 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/app/todo/services/todo.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable, NgZone } from '@angular/core';
2 | import { BehaviorSubject } from 'rxjs';
3 | import { v4 as uuidv4 } from 'uuid';
4 |
5 | import { TodoAction, createTodo, removeTodo } from '../actions';
6 | import { Todo } from '../entities';
7 |
8 | @Injectable({
9 | providedIn: 'root',
10 | })
11 | export class TodoService {
12 | private syncWorker?: SharedWorker;
13 | private todos: Todo[] = JSON.parse(localStorage.getItem('todolist') || '[]');
14 |
15 | todos$ = new BehaviorSubject(this.todos);
16 |
17 | constructor(private ngZone: NgZone) {
18 | if (typeof SharedWorker !== 'undefined') {
19 | this.syncWorker = new SharedWorker('assets/sync.worker.mjs', {
20 | type: 'module',
21 | });
22 |
23 | this.syncWorker.port.onmessage = (message: { data: TodoAction }) => {
24 | this.ngZone.run(() => {
25 | this.handleAction(message.data);
26 | });
27 | };
28 | }
29 | }
30 |
31 | addTodo(todo: string) {
32 | const action = createTodo(uuidv4(), todo);
33 |
34 | this.handleAction(action);
35 |
36 | this.syncWorker?.port.postMessage(action);
37 | }
38 |
39 | removeTodo(id: string) {
40 | const action = removeTodo(id);
41 |
42 | this.handleAction(action);
43 |
44 | this.syncWorker?.port.postMessage(action);
45 | }
46 |
47 | private handleAction(message: TodoAction) {
48 | switch (message.type) {
49 | case 'ADD': {
50 | this.todos = [...this.todos, { id: message.id, todo: message.todo }];
51 |
52 | break;
53 | }
54 | case 'REMOVE': {
55 | this.todos = this.todos.filter(({ id }) => id !== message.id);
56 | }
57 | }
58 |
59 | localStorage.setItem('todolist', JSON.stringify(this.todos));
60 |
61 | this.todos$.next(this.todos);
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/solutions/webassembly/3-mandelbrot/step-2-workerpool/src/index.mjs:
--------------------------------------------------------------------------------
1 | import { spawnWorkers } from './worker-pool.mjs';
2 | import { colors } from './utils.mjs';
3 |
4 | console.clear();
5 |
6 | const $executionTime = document.querySelector('#executionTime');
7 | const $threadSlider = document.querySelector('#threads');
8 | const $threadCount = document.querySelector('#thread-count');
9 | const $runButton = document.querySelector('#run');
10 |
11 | let threadCount = $threadSlider.valueAsNumber;
12 |
13 | $threadSlider.oninput = (event) => {
14 | threadCount = event.target.valueAsNumber;
15 | $threadCount.innerHTML = threadCount;
16 | };
17 |
18 | const WIDTH = 1200;
19 | const HEIGHT = 800;
20 |
21 | const canvas = document.createElement('canvas');
22 |
23 | canvas.width = WIDTH;
24 | canvas.height = HEIGHT;
25 |
26 | const ctx = canvas.getContext('2d');
27 |
28 | document.body.appendChild(canvas);
29 |
30 | let running = false;
31 |
32 | $runButton.addEventListener('click', () => {
33 | if (running) {
34 | return;
35 | }
36 |
37 | running = true;
38 |
39 | ctx.clearRect(0, 0, canvas.width, canvas.height);
40 |
41 | run().then(() => {
42 | running = false;
43 | });
44 | });
45 |
46 | async function run() {
47 | const rowsPerWorker = Math.ceil(HEIGHT / threadCount);
48 |
49 | const workers = spawnWorkers(threadCount);
50 |
51 | const start = performance.now();
52 |
53 | const promises = [];
54 |
55 | for (let i = 0; i < threadCount; i++) {
56 | const worker = workers[i];
57 | const startRow = i * rowsPerWorker;
58 | const endRow = Math.min((i + 1) * rowsPerWorker, HEIGHT);
59 |
60 | promises.push(worker(startRow, endRow, WIDTH, HEIGHT, colors));
61 | }
62 |
63 | const blocks = await Promise.all(promises);
64 |
65 | const pixels = new Uint8Array(WIDTH * HEIGHT * 4);
66 |
67 | let length = 0;
68 |
69 | for (let block of blocks) {
70 | pixels.set(block, length);
71 | length += block.length;
72 | }
73 |
74 | const imageData = ctx.createImageData(WIDTH, HEIGHT);
75 | imageData.data.set(pixels);
76 |
77 | ctx.putImageData(imageData, 0, 0);
78 |
79 | const elapsed = performance.now() - start;
80 |
81 | $executionTime.innerHTML = `${elapsed.toFixed(2)}ms`;
82 | }
83 |
--------------------------------------------------------------------------------
/exercises/webworkers/4-angular-todo/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including
12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * By default, zone.js will patch all possible macroTask and DomEvents
23 | * user can disable parts of macroTask/DomEvents patch by setting following flags
24 | * because those flags need to be set before `zone.js` being loaded, and webpack
25 | * will put import in the top of bundle, so user need to create a separate file
26 | * in this directory (for example: zone-flags.ts), and put the following flags
27 | * into that file, and then add the following code before importing zone.js.
28 | * import './zone-flags';
29 | *
30 | * The flags allowed in zone-flags.ts are listed here.
31 | *
32 | * The following flags will work for all browsers.
33 | *
34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 | *
38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
40 | *
41 | * (window as any).__Zone_enable_cross_context_check = true;
42 | *
43 | */
44 |
45 | /***************************************************************************************************
46 | * Zone JS is required by default for Angular itself.
47 | */
48 | import 'zone.js'; // Included with Angular CLI.
49 |
50 | /***************************************************************************************************
51 | * APPLICATION IMPORTS
52 | */
53 |
--------------------------------------------------------------------------------
/exercises/webworkers/2-angular-fibonacci/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including
12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * By default, zone.js will patch all possible macroTask and DomEvents
23 | * user can disable parts of macroTask/DomEvents patch by setting following flags
24 | * because those flags need to be set before `zone.js` being loaded, and webpack
25 | * will put import in the top of bundle, so user need to create a separate file
26 | * in this directory (for example: zone-flags.ts), and put the following flags
27 | * into that file, and then add the following code before importing zone.js.
28 | * import './zone-flags';
29 | *
30 | * The flags allowed in zone-flags.ts are listed here.
31 | *
32 | * The following flags will work for all browsers.
33 | *
34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 | *
38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
40 | *
41 | * (window as any).__Zone_enable_cross_context_check = true;
42 | *
43 | */
44 |
45 | /***************************************************************************************************
46 | * Zone JS is required by default for Angular itself.
47 | */
48 | import 'zone.js'; // Included with Angular CLI.
49 |
50 | /***************************************************************************************************
51 | * APPLICATION IMPORTS
52 | */
53 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-1-worker/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including
12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * By default, zone.js will patch all possible macroTask and DomEvents
23 | * user can disable parts of macroTask/DomEvents patch by setting following flags
24 | * because those flags need to be set before `zone.js` being loaded, and webpack
25 | * will put import in the top of bundle, so user need to create a separate file
26 | * in this directory (for example: zone-flags.ts), and put the following flags
27 | * into that file, and then add the following code before importing zone.js.
28 | * import './zone-flags';
29 | *
30 | * The flags allowed in zone-flags.ts are listed here.
31 | *
32 | * The following flags will work for all browsers.
33 | *
34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 | *
38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
40 | *
41 | * (window as any).__Zone_enable_cross_context_check = true;
42 | *
43 | */
44 |
45 | /***************************************************************************************************
46 | * Zone JS is required by default for Angular itself.
47 | */
48 | import 'zone.js'; // Included with Angular CLI.
49 |
50 | /***************************************************************************************************
51 | * APPLICATION IMPORTS
52 | */
53 |
--------------------------------------------------------------------------------
/solutions/webworkers/2-angular-fibonacci/step-2-comlink/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including
12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * By default, zone.js will patch all possible macroTask and DomEvents
23 | * user can disable parts of macroTask/DomEvents patch by setting following flags
24 | * because those flags need to be set before `zone.js` being loaded, and webpack
25 | * will put import in the top of bundle, so user need to create a separate file
26 | * in this directory (for example: zone-flags.ts), and put the following flags
27 | * into that file, and then add the following code before importing zone.js.
28 | * import './zone-flags';
29 | *
30 | * The flags allowed in zone-flags.ts are listed here.
31 | *
32 | * The following flags will work for all browsers.
33 | *
34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 | *
38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
40 | *
41 | * (window as any).__Zone_enable_cross_context_check = true;
42 | *
43 | */
44 |
45 | /***************************************************************************************************
46 | * Zone JS is required by default for Angular itself.
47 | */
48 | import 'zone.js'; // Included with Angular CLI.
49 |
50 | /***************************************************************************************************
51 | * APPLICATION IMPORTS
52 | */
53 |
--------------------------------------------------------------------------------
/solutions/webworkers/4-angular-todo/step-1-shared-worker/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes recent versions of Safari, Chrome (including
12 | * Opera), Edge on the desktop, and iOS and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /**
22 | * By default, zone.js will patch all possible macroTask and DomEvents
23 | * user can disable parts of macroTask/DomEvents patch by setting following flags
24 | * because those flags need to be set before `zone.js` being loaded, and webpack
25 | * will put import in the top of bundle, so user need to create a separate file
26 | * in this directory (for example: zone-flags.ts), and put the following flags
27 | * into that file, and then add the following code before importing zone.js.
28 | * import './zone-flags';
29 | *
30 | * The flags allowed in zone-flags.ts are listed here.
31 | *
32 | * The following flags will work for all browsers.
33 | *
34 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37 | *
38 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
40 | *
41 | * (window as any).__Zone_enable_cross_context_check = true;
42 | *
43 | */
44 |
45 | /***************************************************************************************************
46 | * Zone JS is required by default for Angular itself.
47 | */
48 | import 'zone.js'; // Included with Angular CLI.
49 |
50 | /***************************************************************************************************
51 | * APPLICATION IMPORTS
52 | */
53 |
--------------------------------------------------------------------------------