Alexey Kupriyanenko "The State of Modern JavaScript and Web in 2020 - Real use cases"
Download as PPTX, PDF1 like468 views
Web technologies are on a constant rise, and as time goes by, they’re just getting better, quicker and making our lives much easier. In this talk, we will review some of them, including those still in experimental stages. We’ll kickoff with “Web Standards” and “Browser Features”, that you can start using right away. Following that, we will tackle some of the interesting ideas flying around out there, and explore them via real use cases most of us probably deal with on a daily basis. And the cheery on top of all of this - Upcoming APIs. Although still in early stages, we’ll examine them and even challenge them with different use cases and problems that they are solving.
![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)
Ad
More Related Content
What's hot (20)
Similar to Alexey Kupriyanenko "The State of Modern JavaScript and Web in 2020 - Real use cases" (20)
![[1C1]Service Workers](https://cdn.slidesharecdn.com/ss_thumbnails/1c1serviceworkers-140927225946-phpapp02-thumbnail.jpg?width=560&fit=bounds)
Ad
More from Fwdays (20)
![[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...](https://cdn.slidesharecdn.com/ss_thumbnails/softskillsfwdays25-250317080651-1a2cccb1-thumbnail.jpg?width=560&fit=bounds)
![[QUICK TALK] "How to study to acquire a skill, not a certificate?", Uliana Du...](https://cdn.slidesharecdn.com/ss_thumbnails/ulianadutchakhowtostudytoacquireaskillnotacertificate-250317080232-421f309c-thumbnail.jpg?width=560&fit=bounds)
![[QUICK TALK] "Coaching 101: How to Identify and Develop Your Leadership Quali...](https://cdn.slidesharecdn.com/ss_thumbnails/softskillsfwdays25ilonalesko-250317075721-cb56ed6c-thumbnail.jpg?width=560&fit=bounds)
Ad
Recently uploaded (20)
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