Dom manipulation in web workers: The future of your mobile web apps

Google DevFest18 Utah (GDG)

The AMP Project ❤⚡: https://www.ampproject.org/

worker-dom: https://github.com/ampproject/worker-dom

Javascript concurrency and the DOM: https://www.youtube.com/watch?v=XyVQfqmx2CI

Demo code: https://github.com/juanlizarazo/devfest-18-concurrent-dom-manipulation

Transcript

1. Juan Lizarazo @juanlizarazog DOM Manipulation in Web Workers: The future of your mobile web apps
2. Hi! I am Juan Lizarazo I ❤ • Open source @amphtml • instructor @udemy • engineering @impartnerprm • "# @juanlizarazog
3. DevFest Sponsors!
4. Salt Lake Students can enroll for free!
 Get a code from me (after this session) http://bit.ly/jasmine-udemy @juanlizarazog
5. ampproject.org The AMP Project Building the future web, together. Salt Lake @juanlizarazog
6. @juanlizarazog
8. Concurrent DOM Manipulation @juanlizarazog
9. WEB WORKER Background script independent of any user interface scripts @juanlizarazog
10. // main.js const worker = new Worker('worker.js'); worker.postMessage('hello world') @juanlizarazog
11. // worker.js onmessage = function(e) { console.log('Main thread says ', e.data); postMessage('Hello from worker thread!'); } @juanlizarazog
12. // main.js const worker = new Worker('./worker.js'); worker.addEventListener('message', function(e) { console.log(e.data); }, false); worker.postMessage('hello world'); @juanlizarazog
13. WEB WORKER Background script independent of any user interface scripts @juanlizarazog
14. https://afshinm.github.io/50k/ @juanlizarazog
15. “For example, you can't directly manipulate the DOM from inside a worker…” - http://bit.ly/about-web-workers @juanlizarazog
16. @juanlizarazog
17. AMP documents don't allow JS...
 … yet Why? @juanlizarazog
18. https://developers.google.com/web/fundamentals/performance/rail @juanlizarazog
19. https://github.com/ampproject/amphtml/issues/13471 Web page Web worker Gesture events DOM mutations @juanlizarazog
20. Worker-dom @juanlizarazog
21. Upgrade element Hydration Mutation How does it work? Learn more: https://www.youtube.com/watch?v=XyVQfqmx2CI @juanlizarazog
22. Demo time! @juanlizarazog
23. Love your users ❤ @juanlizarazog
24. Salt Lake Thank you! Slides: https://speakerdeck.com/juanlizarazo/dom-manipulation-in-web-workers-the- future-of-your-mobile-web-apps Demo source code: https://github.com/juanlizarazo/devfest-18-concurrent-dom-manipulation @juanlizarazog