TodoMVC App Written in Vanilla JavaScript

Post by recursive » Sat, May 07, 2022, 3:03 PM UTC

dymk wrote: post #26

anonymoushn wrote: post #20

Earlier quoted context omitted.

it sounds sort of wild to expect there to be diffing! why do you have to generate a whole copy of the stuff instead of just telling the browser what changes to make? bonus: the existing apis instead of one that don't exist yet.

Diffing is exactly what you need to do (barring newer methods like svelte) to figure out what to tell the browser to change. The vdom tree is much faster to manipulate than DOM nodes.

Post by ricardobeat » Sat, May 07, 2022, 3:05 PM UTC

chacham15 wrote: post #49

ricardobeat wrote: post #43

Earlier quoted context omitted.

There’s absolutely no way you’ll have worse performance with this vs React. The app is modifying the target elements directly, not recreating the whole page with innerHTML. React will do the same amount of work at a minimum, and that’s after rebuilding the whole tree and diffing it. The main bottleneck here are the synchronous localStorage calls happening in the render path, they could be moved to a separate timer.

It seems like you didnt actually look at the code because thats exactly what its doing: https://github.com/1Marc/todomvc-vanillajs-2022/blob/main/js... it clears innerHTML there and then rerenders the children

Post by sarchertech » Sat, May 07, 2022, 3:11 PM UTC

toomim wrote: post #46

ricardobeat wrote: post #43

Earlier quoted context omitted.

There’s absolutely no way you’ll have worse performance with this vs React. The app is modifying the target elements directly, not recreating the whole page with innerHTML. React will do the same amount of work at a minimum, and that’s after rebuilding the whole tree and diffing it. The main bottleneck here are the synchronous localStorage calls happening in the render path, they could be moved to a separate timer.

One way React can be faster than hand-written code is by batching all dom manipulation into animation frames.

Post by SemanticStrengh » Sat, May 07, 2022, 3:18 PM UTC

chacham15 wrote: post #49

ricardobeat wrote: post #43

Earlier quoted context omitted.

There’s absolutely no way you’ll have worse performance with this vs React. The app is modifying the target elements directly, not recreating the whole page with innerHTML. React will do the same amount of work at a minimum, and that’s after rebuilding the whole tree and diffing it. The main bottleneck here are the synchronous localStorage calls happening in the render path, they could be moved to a separate timer.

It seems like you didnt actually look at the code because thats exactly what its doing: https://github.com/1Marc/todomvc-vanillajs-2022/blob/main/js... it clears innerHTML there and then rerenders the children

Post by grabanski » Sat, May 07, 2022, 3:30 PM UTC

ricardobeat wrote: post #42

ghubcoder wrote: post #38

I get this running it in chrome Uncaught SyntaxError: Missing initializer in const declaration (at helpers.js:4:14) Installed and ran with: npm install npm run start Any idea what went wrong...?

The assignment (=) is missing from those const declarations, except for the first one; I guess they were hastily converted from function declarations to satisfy modern tastes.