Alexey Kupriyanenko "The State of Modern JavaScript and Web in 2020 - Real use cases"
Download as PPTX, PDF1 like475 views
The document discusses the state of modern JavaScript and web technologies in 2020, highlighting advancements such as service workers for faster app performance, offscreen canvas for multithreading rendering, and the AV1 video codec for improved compression. It emphasizes the importance of keeping up with emerging technologies like virtual scrollers, task scheduling APIs, and CSS Houdini for enhancing web development. The author encourages immediate adoption of these technologies to enhance application performance and user experience.
![Unblock main thread
const offscreen = document.querySelector('canvas').transferControlToOffscreen();
const worker = new Worker('myworkerurl.js');
worker.postMessage({ canvas: offscreen }, [offscreen]);](https://image.slidesharecdn.com/kuprayanenko-190319112029/85/Alexey-Kupriyanenko-The-State-of-Modern-JavaScript-and-Web-in-2020-Real-use-cases-15-320.jpg)
Alexey Kupriyanenko "The State of Modern JavaScript and Web in 2020 - Real use cases"
- 1. The State of Modern JavaScript and Web in 2020 Alexey Kupriyanenko, R&D manager Wix.com
- 2. The frontend world is moving really fast % of Pages Loaded via HTTPS
- 3. Modern JavaScript is optimized
- 4. What you build is super rich and complex
- 6. Service Workers - benefits and costs make your app work much faster.
- 7. Well known benefits ▪ Requests can skip the network entirely ▪ Stale response can be returned immediately
- 8. Automatically store the bytecode representation of JS in the cache parse compile execute
- 9. Automatically store the bytecode representation of JS in the cache parse compile execute cached
- 10. But, Service Worker startup time isn’t free Best case SW asleep Slow cache No SW Cache miss Worst case SW Cache latency Network latency SW Boot latency
- 11. Header Navigation request for full content Content Navigation Request Navigation request for partial content using streams Time to first byte Use streams and partial content Footer
- 13. Streaming Best case SW asleep Slow cache No SW Cache miss Worst case Streaming w/ Nav Preloading No SW SW Cache latency Network latency SW Boot latency
- 14. Offscreen Canvas Now you can render your graphics off the main thread with OffscreenCanvas!
- 15. Unblock main thread const offscreen = document.querySelector('canvas').transferControlToOffscreen(); const worker = new Worker('myworkerurl.js'); worker.postMessage({ canvas: offscreen }, [offscreen]);
- 17. The AV1 Standart royalty-free more efficient way to compress videos.
- 18. Video codecs ▪ H.264/MPEG-4 ▪ Theora/Ogg ▪ VP9/WebM ▪ H.265/MPEG-H HEVC ▪ AV1/WebM
- 19. Video codecs ▪ H.264/MPEG-4 ▪ Theora/Ogg ▪ VP9/WebM ▪ H.265/MPEG-H HEVC ▪ AV1/WebM
- 20. You can try it ffmpeg -i input.mp4 -c:v libaom-av1 -crf 30 -b:v 0 -strict experimental av1_test.mkv AV1 by 30% better compression than VP9, and achieves gains of 50.3% compared to H.264
- 21. One excuse AV1 transcoding is about 10 000 times slower
- 22. Site Isolation so each <iframe> (not website) is a single thread. More secure way for the Web
- 23. Independent process for iframes
- 24. NEW FEATURES & APIs COMING SOON
- 25. Virtual Scroller native out-of-the-box handling for TMI.
- 26. <script type="module"> import 'std:virtual-scroller'; const scroller = document.querySelector('virtual-scroller'); scroller.updateElement = (el, contact, idx) => el.textContent = contact.name; async function getData() { const resp = await fetch('contacts.json'); scroller.itemSource = await resp.json(); } getData(); </script> <virtual-scroller></virtual-scroller>
- 27. <script type="module"> import 'std:virtual-scroller'; const scroller = document.querySelector('virtual-scroller'); scroller.updateElement = (el, contact, idx) => el.textContent = contact.name; async function getData() { const resp = await fetch('contacts.json'); scroller.itemSource = await resp.json(); } getData(); </script> <virtual-scroller></virtual-scroller>
- 28. <script type="module"> import 'std:virtual-scroller'; const scroller = document.querySelector('virtual-scroller'); scroller.updateElement = (el, contact, idx) => el.textContent = contact.name; async function getData() { const resp = await fetch('contacts.json'); scroller.itemSource = await resp.json(); } getData(); </script> <virtual-scroller></virtual-scroller>
- 29. <script type="module"> import 'std:virtual-scroller'; const scroller = document.querySelector('virtual-scroller'); ... getData(); </script> <virtual-scroller> <template> <div>content will be here</div> </template> </virtual-scroller>
- 31. so you can set priority for each and every JS call. Task Scheduling API
- 32. Input handlers rAFs Document Lifecycle (Style, Layout, Paint) Next Frame User-blocking tasks Default tasks Idle tasks Task Scheduling Pipeline ~16ms
- 34. CSS Houdini so you could build your own CSS rules.
- 36. // main.js CSS.paintWorklet.addModule('my-paint.js'); // my-paint.js registerPaint('circle', class { paint(ctx, geom, properties) { ctx.fillStyle = 'pink'; ctx.arc( geom.width / 2, geom.height / 2, // center Math.min(geom.width, geom.height), // radius 0, 2 * Math.PI // full circle ); ctx.fill(); } });
- 37. // index.html <style> .element { background-image: paint(circle); } </style>
- 40. CSS Houdini OFF THE MAIN THREAD
- 41. WebAssembly and Threads so you can communicate between threads directly.
- 42. Web App JS Engine Worker JS Engine Create Worker Worker JS Engine Workers don't talk to each other
- 43. Web App JS Engine Worker Wasm Module Worker Workers don't talk to each other SharedArrayBuffer
- 44. Great coffee machine so workers will make you the cappuccino.
- 45. Great coffee machine so workers will make you the cappuccino. BUT NO :(
- 46. USE NOW DON’T WAIT! NEW COMING SOON #1 SERVICE WORKERS & SMART CACHING #2 OFFSCREEN CANVAS #3 AV1 #4 SITE ISOLATION #1 VIRTUAL SCROLLER #2 TASK SCHEDULER #3 CSS HOUDINI #4 WEB ASSEMBLY & THREADS
- 47. Thank You Alexey Kupriyanenko, [email protected] Slides bit.ly/fwd-web20
- 48. Q&A Alexey Kupriyanenko, [email protected] Slides bit.ly/fwd-web20
- 49. N/A
- 50. ...but performance is a real blocker to deal with. Regular phone High-end phone