Chrome Dev Summit 2018 - Personal Take Aways
•
0 likes•475 views
My talk about experience in Chrome Dev Summit 2018 at Chrome Dev Summit Extended
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Chrome Dev Summit 2018 - Personal Take Aways
Similar to Chrome Dev Summit 2018 - Personal Take Aways (20)
More from Riza Fahmi
More from Riza Fahmi (20)
Recently uploaded
Recently uploaded (20)
Chrome Dev Summit 2018 - Personal Take Aways
- 1. CHROME DEV SUMMIT my personal takeaways
- 2. @rizafahmi
- 3. @rizafahmi22
- 4. GOOGLE DEVELOPER EXPERT how I became
- 5. this guy
- 9. i got in!
- 11. expe9 summit
- 13. we’re on stage!
- 14. Intro to PWA - Udacity
- 15. Pete LePage - Dev Advocate
- 16. JeD Posnick - Dev PlaEorm Engineer
- 17. Paul Irish - PeGormance Engineer
- 18. Jason Waterman - Co-founder Momentum
- 19. Alex Russell - Senior Engineer
- 20. CHROME DEV SUMMIT day 1
- 21. anniversaries 10 years 10 years 20 years 10 years
- 22. v8 improvement 100x faster garbage collector
- 23. v8 improvement optimizing modern javascript
- 24. v8 improvement optimizing modern javascript
- 28. day 1 keynote — hPps://www.youtube.com/watch?v=zPHyxvPT0gg
- 29. CHROME DEV SUMMIT day 2
- 30. “frameworks sometimes make web apps slower.” — nicole sullivan
- 31. “but they are also our best hope to make them faster.” — nicole sullivan
- 32. framework improvements of the year
- 33. Foundational work for Brst code spliCing and breaking up rendering into tiny chunks. * Lazy * Suspense * Concurrent react react
- 34. * Angular CLI enabled peLormance budgets by default * Unnecessary polyBlls removed * Working on Ivy, a compiler promising to slash the runtime cost of Angular views angular
- 35. vue * Modern mode - only ships modern code to modern browsers. Remove unnecessary polyBlls. * Preloading and prefetching by default
- 36. polymer * Transition to lit-element for super small components * Web Components now suppo? natively by Brefox
- 37. svelte * Already super fast * Idiomatic Hacker News app in total under 20KB!
- 38. amp * Shipped Feature Policy against synchronous XHR for all ads * Reduce JS size on the wire by up to 20% with the brotli compression algorithm.
- 39. ember * Remove jQuery from default (-20%) * Incremental progressive rendering
- 40. day 2 keynote — hPps://www.youtube.com/watch?v=SbUAkQ_s7Os
- 41. actor model, for the web
- 43. 45 years old model Actor Actor ActorMailbox Mailbox Mailbox
- 44. 45 years old model UI State Broadcaster Mailbox Mailbox Mailbox StorageMailbox
- 45. architecting web apps - lights, camera, action! — hPps://www.youtube.com/watch?v=SbUAkQ_s7Os
- 46. houdini
- 47. “much like service workers are a low-level JavaScript API for the browser’s cache” — sam richard
- 48. “houdini introduces low-level JavaScript APIs for the browser’s render engine” — sam richard
- 49. “so you can teach css how to render things” — riza fahmi
- 50. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="main.css"> </head> <body> <textarea></textarea> <script type="text/javascript"> CSS.paintWorklet.addModule('circle.js'); </script> </body> </html>
- 51. // circle.js class CirclePainter { paint(ctx, geom, properties) { ctx.beginPath(); ctx.fillStyle = '#bada55'; ctx.arc(geom.height / 2, geom.width / 2, 150, 0, 2 * Math.PI); ctx.fill(); } } registerPaint(‘circle', CirclePainter);
- 52. textarea { width: 300px; height: 300px; background-image: paint(circle); }
- 54. state of houdini — hPps://www.youtube.com/watch?v=lK3OiJvwgSc
- 55. webassembly
- 56. webassembly a new language for the web not a replacement for JavaScript compiled from other languages oDers pe2ormance
- 57. webassembly
- 59. real-world app
- 60. real-world app
- 61. real-world app
- 63. coming soon
- 64. int fib (unsigned long int term) { if (term < 2) { return term; } return fib(term - 1) + fib(term - 2); }
- 65. $ emcc fib.c -s WASM=1 -o fib.wasm
- 66. let wasmfib; const loadWasm = (filename) => { return fetch(filename) .then((response) => response.arrayBuffer()) .then((bits) => WebAssembly.compile(bits)) .then((module) => new WebAssembly.Instance(module)); }; loadWasm('fib.wasm').then((instance) => { wasmfib = instance.exports.fib; wasmfib(46); });