~/talk

What the v...DOM?

Talkat JSHeroes 2018 · on Wednesday, 2018-04-11· [react, frontend-architecture]

Shows how JSX becomes an AST using Babel (Babylon) + traverse + generator, implements an H function that returns virtual nodes, wires components with a component.base and setState, and adds a simple diff that inserts only one list item instead of re-rendering 100. Mentions Preact, explains JSX pragma and hyperscript H, and reports the example app compiles to 3.75 KB, 129 lines while enabling selective re-rendering and render-queue optimizations.

AI-written summary · about

  1. 0:00Start
  2. 2:34SOMETIMES IT FEELS LIKE MAGIC
  3. 2:50TAKE A BREAK!
  4. 3:40The imperative programming paradigm uses statements that change a program's state.
  5. 4:09The declarative programming paradigm expresses the logic of a computation without describing its control flow.
  6. 4:42INTERFACES
  7. 5:48CODE TRANSFORMS
  8. 7:03AST (Abstract Syntax Tree)
  9. 8:11VISITOR PATTERN (design pattern described by the "Gang of Four")
  10. 10:09BABEL PLUGIN
  11. 14:22NICELY DECLARATIVE
  12. 14:55A LOT OF WORK TO DO
  13. 17:30COMPONENT RENDERING
  14. 19:22renderComponent()
  15. 19:55COMPONENTS RENDER AUTONOMOUSLY
  16. 24:58BENEFITS
  17. 25:24LIMITED DOM OPERATIONS
  18. 26:20I READ A LOT OF PREACT CODE
  19. 26:39YOU'LL NEVER GET IT!
  20. 27:15THERE IS NO MAGIC IN CODE!
~/search
type to search 6,249 conferences, 138,987 speakers and 185,172 talks
~/help
cmdctrl k
search every conference, speaker and series
/
focus the filter search
h
home
c
conferences
s
speakers
e
series
t
light / dark — the status bar button does the same
?
this help
esc
close this, then clear every filter — or just the search, while you are typing in it

Ignored while you are typing. Pages without a filter rail have no search to focus.