about the dom

https://slides.com/swatinem/about-the-dom/

my goals in web dev

productivity

getting things done

control

knowing whats going on

debuggability

ability to fork and patch depedencies

also related to …

performance

as a reminder:

buttery smooth performance means ~60 fps

or ~16ms at most

a tale of two cities

hand written js

absolute control

can performance tune very easily

BUT low productivity

big ass frameworks

may improve productivity (for small things)

you give up (some/all) control

hard to performance tune

I feel like instead of solving problems;

I just work around the framework

can we somehow get the best of both worlds?

productivity + control?

it all started with a question

control:

given a DOM node X, transform it into DOM node Y

with as few dom manipulations as possible

productivity:

and use easy/flexible templates doing so

reactive templating

concept:

the library figures out how to manipulate the dom

for a given change in your model

examples:

http://www.ractivejs.org/

https://github.com/ripplejs/ripple

not satisfactory

`.set(keypath, value)`

loses both control AND productivity:

can’t map/reduce/filter my data

getting your data into the view is repetitive and tedious

event driven models

https://github.com/component/reactive

(has different adapters)

Your model emits `change prop` events when you write something

https://github.com/Swatinem/model

https://github.com/MatthewMueller/array

still not satisfactory

can get out of control quickly

sometimes I want child events, sometimes I don’t

events may be redundant; need some rate limiting?

so what is the point of all this?

lets take a step back

rethink the whole thing

I want control: plain old js models

I want productivity: simple templates; no `.set(keypath…)`

react

virtualdom

represents the dom as plain js objects

easy to create

easy to diff

then apply a patch

benchmark time

still not ideal

do not recreate virtual dom when things don’t change

do not diff resulting virtual dom when things don’t change

mutability?

"things change" reduced to comparing reference

how to make this convenient?

https://github.com/Raynos/observ

still has `.set()` calls

https://github.com/Swatinem/cow

still not as convenient as plain old js models

conclusion?

a lot of food for thought

getting both productivity and control

(and performance) is hard!

not entirely solved yet