Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Chrome Dev Summit 2018 - Personal Take Aways

188 views

Published on

My talk about experience in Chrome Dev Summit 2018 at Chrome Dev Summit Extended

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Chrome Dev Summit 2018 - Personal Take Aways

  1. 1. CHROME DEV SUMMIT my personal takeaways
  2. 2. @rizafahmi
  3. 3. @rizafahmi22
  4. 4. GOOGLE DEVELOPER EXPERT how I became
  5. 5. this guy
  6. 6. warat wongmaneekit
  7. 7. interview with googler
  8. 8. i got in!
  9. 9. expe9 summit
  10. 10. CHROME DEV SUMMIT
  11. 11. we’re on stage!
  12. 12. Intro to PWA - Udacity
  13. 13. Pete LePage - Dev Advocate
  14. 14. JeD Posnick - Dev PlaEorm Engineer
  15. 15. Paul Irish - PeGormance Engineer
  16. 16. Jason Waterman - Co-founder Momentum
  17. 17. Alex Russell - Senior Engineer
  18. 18. CHROME DEV SUMMIT day 1
  19. 19. anniversaries 10 years 10 years 20 years 10 years
  20. 20. v8 improvement 100x faster garbage collector
  21. 21. v8 improvement optimizing modern javascript
  22. 22. v8 improvement optimizing modern javascript
  23. 23. v8 improvement suppo? webassembly!
  24. 24. peGormance budget
  25. 25. day 1 keynote — hPps://www.youtube.com/watch?v=zPHyxvPT0gg
  26. 26. CHROME DEV SUMMIT day 2
  27. 27. “frameworks sometimes make web apps slower.” — nicole sullivan
  28. 28. “but they are also our best hope to make them faster.” — nicole sullivan
  29. 29. framework improvements 
 of the year
  30. 30. Foundational work for Brst code spliCing and breaking up rendering into tiny chunks. * Lazy * Suspense * Concurrent react react
  31. 31. * 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
  32. 32. vue * Modern mode - only ships modern code to modern browsers. Remove unnecessary polyBlls. * Preloading and prefetching by default
  33. 33. polymer * Transition to lit-element for super small components * Web Components now suppo? natively by Brefox
  34. 34. svelte * Already super fast * Idiomatic Hacker News app in total under 20KB!
  35. 35. 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.
  36. 36. ember * Remove jQuery from default (-20%) * Incremental progressive rendering
  37. 37. day 2 keynote — hPps://www.youtube.com/watch?v=SbUAkQ_s7Os
  38. 38. actor model, for the web
  39. 39. actor model, anyone?!
  40. 40. 45 years old model Actor Actor ActorMailbox Mailbox Mailbox
  41. 41. 45 years old model UI State Broadcaster Mailbox Mailbox Mailbox StorageMailbox
  42. 42. architecting web apps - lights, camera, action! — hPps://www.youtube.com/watch?v=SbUAkQ_s7Os
  43. 43. houdini
  44. 44. “much like service workers are a low-level JavaScript API for the browser’s cache” 
 — sam richard
  45. 45. “houdini introduces low-level JavaScript APIs for the browser’s render engine”
 — sam richard
  46. 46. “so you can teach css how to render things” — riza fahmi
  47. 47. <!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>
  48. 48. // 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);
  49. 49. textarea { width: 300px; height: 300px; background-image: paint(circle); }
  50. 50. state of houdini — hPps://www.youtube.com/watch?v=lK3OiJvwgSc
  51. 51. webassembly
  52. 52. webassembly a new language for the web not a replacement for JavaScript compiled from other languages oDers pe2ormance
  53. 53. webassembly
  54. 54. webassembly emscripten .wasm .js
  55. 55. real-world app
  56. 56. real-world app
  57. 57. real-world app
  58. 58. language suppo9ed
  59. 59. coming soon
  60. 60. int fib (unsigned long int term) { if (term < 2) { return term; } return fib(term - 1) + fib(term - 2); }
  61. 61. $ emcc fib.c -s WASM=1 -o fib.wasm
  62. 62. 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); });
  63. 63. github.com/rizafahmi slideshare.net/rizafahmi rizafahmi@gmail.com twiCer.com/rizafahmi22 facebook.com/rizafahmi

×