O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
CHROME DEV SUMMIT
my personal takeaways
@rizafahmi
@rizafahmi22
GOOGLE DEVELOPER
EXPERT
how I became
this guy
warat wongmaneekit
interview with googler
i got in!
expe9 summit
CHROME DEV SUMMIT
we’re on stage!
Intro to PWA - Udacity
Pete LePage - Dev Advocate
JeD Posnick - Dev PlaEorm Engineer
Paul Irish - PeGormance Engineer
Jason Waterman - Co-founder Momentum
Alex Russell - Senior Engineer
CHROME DEV SUMMIT
day 1
anniversaries
10 years 10 years 20 years 10 years
v8 improvement
100x faster garbage collector
v8 improvement
optimizing modern javascript
v8 improvement
optimizing modern javascript
v8 improvement
suppo? webassembly!
peGormance budget
day 1 keynote — hPps://www.youtube.com/watch?v=zPHyxvPT0gg
CHROME DEV SUMMIT
day 2
“frameworks sometimes make web
apps slower.” — nicole sullivan
“but they are also our best hope to
make them faster.” — nicole sullivan
framework improvements 

of the year
Foundational work for Brst code spliCing and
breaking up rendering into tiny chunks.

* Lazy

* Suspense

* Concurrent rea...
* Angular CLI enabled peLormance budgets by default

* Unnecessary polyBlls removed

* Working on Ivy, a compiler promisin...
vue
* Modern mode - only ships modern code to modern
browsers. Remove unnecessary polyBlls.

* Preloading and prefetching ...
polymer
* Transition to lit-element for super small components

* Web Components now suppo? natively by Brefox
svelte
* Already super fast

* Idiomatic Hacker News app in total under 20KB!
amp
* Shipped Feature Policy against synchronous XHR for all
ads

* Reduce JS size on the wire by up to 20% with the brotl...
ember
* Remove jQuery from default (-20%)

* Incremental progressive rendering
day 2 keynote — hPps://www.youtube.com/watch?v=SbUAkQ_s7Os
actor model, for the web
actor model, anyone?!
45 years old model
Actor
Actor
ActorMailbox
Mailbox
Mailbox
45 years old model
UI
State
Broadcaster
Mailbox
Mailbox
Mailbox
StorageMailbox
architecting web apps - lights, camera, action!

— hPps://www.youtube.com/watch?v=SbUAkQ_s7Os
houdini
“much like service workers are a low-level
JavaScript API for the browser’s cache” 

— sam richard
“houdini introduces low-level JavaScript
APIs for the browser’s render engine”

— sam richard
“so you can teach css how to render things”
— riza fahmi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="main.css">
</h...
// circle.js
class CirclePainter {
paint(ctx, geom, properties) {
ctx.beginPath();
ctx.fillStyle = '#bada55';
ctx.arc(geom...
textarea {
width: 300px;
height: 300px;
background-image: paint(circle);
}
state of houdini

— hPps://www.youtube.com/watch?v=lK3OiJvwgSc
webassembly
webassembly
a new language for the web
not a replacement for JavaScript
compiled from other languages
oDers pe2ormance
webassembly
webassembly
emscripten .wasm .js
real-world app
real-world app
real-world app
language suppo9ed
coming soon
int fib (unsigned long int term) {
if (term < 2) {
return term;
}
return fib(term - 1) + fib(term - 2);
}
$ emcc fib.c -s WASM=1 -o fib.wasm
let wasmfib;
const loadWasm = (filename) => {
return fetch(filename)
.then((response) => response.arrayBuffer())
.then((bi...
github.com/rizafahmi
slideshare.net/rizafahmi
rizafahmi@gmail.com
twiCer.com/rizafahmi22
facebook.com/rizafahmi
Chrome Dev Summit 2018 - Personal Take Aways
Chrome Dev Summit 2018 - Personal Take Aways
Chrome Dev Summit 2018 - Personal Take Aways
Chrome Dev Summit 2018 - Personal Take Aways
Próximos SlideShares
Carregando em…5
×

Chrome Dev Summit 2018 - Personal Take Aways

233 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

×