Содержание
- 2. Обо мне Духовняк Александр Старший разработчик, Tinkoff.ru shanhaichik@gmail.com https://github.com/shanhaichik
- 3. Будем говорить о том:
- 4. Будем говорить о том:
- 5. Демо №1 Рассмотрим на примере! https://github.com/shanhaichik/angular-meetup-worker-demo
- 6. Рассмотрим Что такое Web Worker и какие задачи решает
- 7. Рассмотрим Что такое Web Worker и какие задачи решает Как создается и конфигурируется Web Worker
- 8. Рассмотрим Что такое Web Worker и какие задачи решает Как создается и конфигурируется Web Worker Как
- 9. Рассмотрим Что такое Web Worker и какие задачи решает Как создается и конфигурируется Web Worker Как
- 10. Web Worker - это Инструмент для асинхронной загрузки сторонних скриптов и запуска их выполнения в отдельном
- 11. Web Worker - это Инструмент для асинхронной загрузки сторонних скриптов и запуска их выполнения в отдельном
- 12. Создание обычным программистом https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker const options = { name: 'MyWorker’ }; const worker = new Worker(’getMyWorker.js’,
- 13. Создание скучающим программистом https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker const code = new Blob([`(${worker_code.toString()})()`], {type: 'text/javascript'}); const url = URL.createObjectURL(code); const
- 14. Получение и отправка данных https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker worker.addEventListener('message', event => { console.log(event.data); }, false);
- 15. Получение и отправка данных https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker const params = { count: 10, size: 300 } worker.postMessage(JSON.stringify(params));
- 16. Возможные типы данных Строки
- 17. Возможные типы данных Строки Любые сериализуемые объекты
- 18. Возможные типы данных Строки Любые сериализуемые объекты ArrayBuffer
- 19. Важно помнить Данные передаваемы между потоками КОПИРУЮТСЯ!
- 20. Важно помнить Данные передаваемы между потоками КОПИРУЮТСЯ! 50Mb = 300-500ms
- 21. Получение и отправка данных Передача управления из потока в поток (TransferList) const data = new ArrayBuffer(1000);
- 22. Важно помнить 50Mb = 10-20ms
- 23. Как создается и конфигурируется Web Worker? const someTask = params => {/* just do it */};
- 24. Как создается и конфигурируется Web Worker? const someTask = params => {/* just do it */};
- 25. Как создается и конфигурируется Web Worker? В Dedicated Worker Global Scope есть доступ к: https://developer.mozilla.org/ru/docs/Web/API/DedicatedWorkerGlobalScope к
- 26. Как создается и конфигурируется Web Worker? В Dedicated Worker Global Scope есть доступ к: https://developer.mozilla.org/ru/docs/Web/API/DedicatedWorkerGlobalScope к
- 27. Как создается и конфигурируется Web Worker? В Dedicated Worker Global Scope есть доступ к: https://developer.mozilla.org/ru/docs/Web/API/DedicatedWorkerGlobalScope к
- 28. Как создается и конфигурируется Web Worker? В Dedicated Worker Global Scope есть доступ к: https://developer.mozilla.org/ru/docs/Web/API/DedicatedWorkerGlobalScope к
- 29. Как создается и конфигурируется Web Worker? В Dedicated Worker Global Scope есть доступ к: https://developer.mozilla.org/ru/docs/Web/API/DedicatedWorkerGlobalScope к
- 30. Как создается и конфигурируется Web Worker? В Dedicated Worker Global Scope есть доступ к: https://developer.mozilla.org/ru/docs/Web/API/DedicatedWorkerGlobalScope к
- 31. Как создается и конфигурируется Web Worker? В Dedicated Worker Global Scope есть доступ к: https://developer.mozilla.org/ru/docs/Web/API/DedicatedWorkerGlobalScope к
- 32. Как создается и конфигурируется Web Worker? В Dedicated Worker Global Scope нет доступа: к DOM
- 33. Как создается и конфигурируется Web Worker? В Dedicated Worker Global Scope нет доступа: к DOM к
- 34. Как создается и конфигурируется Web Worker? В Dedicated Worker Global Scope нет доступа: к DOM к
- 35. Как создается и конфигурируется Web Worker? В Dedicated Worker Global Scope нет доступа: к DOM к
- 36. Как это выглядит
- 37. Выводы Web Worker - это внешний подгружаемый и исполняемый файл
- 38. Выводы Web Worker - это внешний подгружаемый и исполняемый файл Это изолированный процесс со своей областью
- 39. Выводы Web Worker - это внешний подгружаемый и исполняемый файл Это изолированный процесс со своей областью
- 40. Выводы Web Worker - это внешний подгружаемый и исполняемый файл Это изолированный процесс со своей областью
- 41. Sub Workers 39
- 42. Sub Workers 39
- 43. Демо №2 Рассмотрим пример с Web Worker-ом! https://github.com/shanhaichik/angular-meetup-worker-demo
- 44. Shared Workers
- 45. Преимущества Shared Workers Синхронизация между вкладками без костылей
- 46. Преимущества Shared Workers Синхронизация между вкладками без костылей Оптимизация сетевых ресурсов и ресурсов системы
- 47. Преимущества Shared Workers Синхронизация между вкладками без костылей Оптимизация сетевых ресурсов и ресурсов системы Борьба с
- 48. Получение и отправка данных https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker const worker = new SharedWorker(’getMyWorker.js’); worker.port.onmessage = event => { console.log(event.data);
- 49. Получение и отправка данных https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker const worker = new SharedWorker(’getMyWorker.js’); worker.port.onmessage = event => { console.log(event.data);
- 50. Получение и отправка данных https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker const worker = new SharedWorker(’getMyWorker.js’); worker.port.onmessage = event => { console.log(event.data);
- 51. Получение и отправка данных https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker onconnect = (e) => { const port = e.ports[0]; port.addEventListener('message', function(e)
- 52. Web Workers в Angular
- 53. Демо №3 Рассмотрим пример Angular приложения https://github.com/shanhaichik/angular-workers-in-action
- 54. Web Worker в Angular – это механизм для выноса и запуска Angular приложения в отдельном потоке.
- 55. Решает следующие задачи Дает возможность распараллелить работу приложения
- 56. Решает следующие задачи Дает возможность распараллелить работу приложения Вынести сложные части бизнес логики в отдельный поток
- 57. Решает следующие задачи Дает возможность распараллелить работу приложения Вынести сложные части бизнес логики в отдельный поток
- 58. Решает следующие задачи Дает возможность распараллелить работу приложения Вынести сложные части бизнес логики в отдельный поток
- 59. Решает следующие задачи Дает возможность распараллелить работу приложения Вынести сложные части бизнес логики в отдельный поток
- 60. Шаг 1: Установить нужные зависимости. npm install -S @angular/platform-webworker @angular/platform-webworker-dynamic Конфигурация Web Worker в Angular
- 61. Шаг 2: Обновить импорты основного модуля Конфигурация Web Worker в Angular в файле app.module.ts заменяем BrowserModule
- 62. Шаг 3: Добавить загрузчик worker-a Конфигурация Web Worker в Angular в файле main.ts заменяем platformBrowserDynamic().bootstrapModule(AppModule); на
- 63. Шаг 4: Создать файл worker-a для запуска приложения Конфигурация Web Worker в Angular import 'polyfills.ts'; import
- 64. Вот и все, вы в Треде!
- 65. Ограничения Такие же ограничения как и обычного Web Worker-a (DOM, window и т.д.)
- 66. Ограничения Такие же ограничения как и обычного Web Worker-a (DOM, window и т.д.) Но есть нюанс
- 67. Ограничения Такие же ограничения как и обычного Web Worker-a (DOM, window и т.д.) Но есть нюанс
- 68. Ограничения Такие же ограничения как и обычного Web Worker-a (DOM, window и т.д.) Но есть нюанс
- 69. RenderCompiler Core + App UI Tread Worker Tread Routing channel Events channel Render channel
- 70. Получение и отправка данных MessageBus - это абстракция низкого уровня, которая предоставляет API-интерфейс для связи с
- 71. Получение и отправка данных MessageBroker - это абстракция сообщений верхнего уровня, которая находится поверх MessageBus. Она
- 72. MessageBroker
- 73. MessageBroker в основном треде bootstrapWorkerUi(’worker.js').then(afterBootstrap); function afterBootstrap(ref: PlatformRef) { const bRef = ref.injector.get(ClientMessageBrokerFactory); // код… }
- 74. MessageBroker в основном треде bootstrapWorkerUi(’worker.js').then(afterBootstrap); function afterBootstrap(ref: PlatformRef) { // код… bRef.createMessageBroker(CHANNEL, RUN_IN_ZONE); // код… }
- 75. MessageBroker в основном треде bootstrapWorkerUi(’worker.js').then(afterBootstrap); function afterBootstrap(ref: PlatformRef) { // код… const fnArg = new FnArg(data,
- 76. MessageBroker в основном треде bootstrapWorkerUi(’worker.js').then(afterBootstrap); function afterBootstrap(ref: PlatformRef) { // код… appBrokerRef.runOnService(sendData, SerializerTypes.PRIMITIVE) .then(result => {
- 77. MessageBroker в воркере export class SomeComponent implements OnInit { constructor(private broker: ServiceMessageBrokerFactory { } ngOnInit() {
- 78. MessageBus
- 79. MessageBus в основном треде bootstrapWorkerUi(’worker.js').then(afterBootstrap); function afterBootstrap(ref: PlatformRef) { const bRef = ref.injector.get(MessageBus); // код… }
- 80. MessageBus в основном треде bootstrapWorkerUi(’worker.js').then(afterBootstrap); function afterBootstrap(ref: PlatformRef) { // код… bRef.initChannel(CHANNEL); // код… }
- 81. MessageBus в основном треде bootstrapWorkerUi(’worker.js').then(afterBootstrap); function afterBootstrap(ref: PlatformRef) { // код… bRef.to(CHANNEL).emit(sendData); // код… }
- 82. MessageBus в воркере export class SomeComponent implements OnInit { constructor(private broker: MessageBus){ } ngOnInit() { this.broker.initChannel(CHANNEL);
- 83. Роутинг
- 84. Роутинг import { bootstrapWorkerUi, WORKER_UI_LOCATION_PROVIDERS } from '@angular/platform-webworker'; bootstrapWorkerUi('webworker.js’, [WORKER_UI_LOCATION_PROVIDERS]);
- 85. Роутинг providers: [ WORKER_APP_LOCATION_PROVIDERS, {provide: APP_BASE_HREF, useValue : '/' } ],
- 86. Общие выводы Использовать Web Worker-ы не только классно, но и полезно. Это наше настоящее и не
- 88. Скачать презентацию