3 ms·

Why not Vue? Unlike React it doesn't recalculate everything on every mouse move event. Also I would like something that doesn't require to install Node.JS and

Why not Vue? Unlike React it doesn't recalculate everything on every mouse move event. Also I would like something that doesn't require to install Node.JS and unly packer like Webpack which invents its proprietary syntax instead of using standard EcmaScript. I like to make small apps that I run by clicking on HTML file and I don't have time to go to console and install things or type commands just to open a webpage.

neoberg 1y ago
The article says "use React (or Vue, or Svelte, or Angular if you're a masochist - the point is a modern framework"
- thunky 1y ago
  > modern framework Modern usually doesn't last long.
  - neoberg 1y ago
    Dunno. React has been around for 12 years, Angular’s current incarnation for 8 (older than React if you count <1.5), and Vue for 10.
schwartzworld 1y ago
> Unlike React it doesn't recalculate everything on every mouse move event. Where did you ever get the idea react does this?
- codedokode 1y ago
  The react's algorithm of detecting changes is based on rebuilding a Virtual DOM tree (i.e. recalculating all components) and comparing that tree to the previous one. It is done, as I understand, every time someone calls update() or similar method on a component. So React won't cause performance issues only if you have few model variables or manually optimize the code by using immutable data structures (which have their own performance issues) and pure components. For comparison, Vue detects changing by wrapping all model variables with proxies and linking them to UI components that use them. This has an advantage of not having to recalculate everything and disadvantage of having an overhead for using proxies and creating a dependency graph. Also, having to deal with proxies adds more pain for the programmer.
  - neoberg 1y ago
    > The react's algorithm of detecting changes is based on rebuilding a Virtual DOM tree Not exactly. This is the "mental model" but not how the algorithm works internally. There are a lot of optimizations to do as little work as possible while "appearing" to rerender everything. This is not to say one is better than the other - each has its own benefits. But that's not a reason to choose Vue over React.
  - unconed 1y ago
    This is the virtual DOM mental model of react, and it is pretty much entirely wrong. - React doesn't really distinguish between DOM components and your own components in how it evaluates. It's all part of the same "VDOM" tree. Creating and updating HTML tags doesn't flow differently from updating the props on your own components. - React does sparse updates, starting at the topmost component(s) whose state changed. Frequently this is just one widget or a button. Full tree re-evaluation is rare. - If a component has the _exact_ same `children` prop as before (`===`), as is often the case with e.g. context providers, because it was assigned by a parent, then React will skip re-rendering the children entirely with no effort from the developer. - If a component is memoized with `memo(...)`, then a re-render will be stopped if it has the same props as before. This means even if your state lives high up in the tree, judicious use of memo can make it zippy af. TLDR: If your react app is re-calculating the entire tree, you suck at react and you never bothered to learn it. Skill issue, git gud, etc. You're welcome.
    - codedokode 1y ago
      > If a component is memoized with `memo(...)`, then a re-render will be stopped if it has the same props as before This works only with immutable data structures. Am I wrong? Because a modified array will pass the identity test (=== operator). If you are using mutable data structures, you cannot use identity operator to detect changes. Also if "memo" optimization is that good why does one have to add it manually? > If your react app is re-calculating the entire tree, you suck at react The point of UI framework is to do the optimization for me and not require me to use some special style of coding like immutable structures or manually write functions like componentShouldUpdate. What I write is how UI variables depend on model variables and the rest is framework's job. I don't want to use weird patterns like a function with a giant switch that processes update events and clones the whole model graph to change a single variable. Vue of course has its own set of issues, caused by using proxies (for example when adding on object to the set you must "unwrap" it manually to prevent adding a proxy to the set).
pier25 1y ago
> and unly packer like Webpack Huh? People are still using Webpack?

neoberg 1y ago

The article says "use React (or Vue, or Svelte, or Angular if you're a masochist - the point is a modern framework"

thunky 1y ago
> modern framework Modern usually doesn't last long.
- neoberg 1y ago
  Dunno. React has been around for 12 years, Angular’s current incarnation for 8 (older than React if you count <1.5), and Vue for 10.

schwartzworld 1y ago

> Unlike React it doesn't recalculate everything on every mouse move event. Where did you ever get the idea react does this?

codedokode 1y ago
The react's algorithm of detecting changes is based on rebuilding a Virtual DOM tree (i.e. recalculating all components) and comparing that tree to the previous one. It is done, as I understand, every time someone calls update() or similar method on a component. So React won't cause performance issues only if you have few model variables or manually optimize the code by using immutable data structures (which have their own performance issues) and pure components. For comparison, Vue detects changing by wrapping all model variables with proxies and linking them to UI components that use them. This has an advantage of not having to recalculate everything and disadvantage of having an overhead for using proxies and creating a dependency graph. Also, having to deal with proxies adds more pain for the programmer.
- neoberg 1y ago
  > The react's algorithm of detecting changes is based on rebuilding a Virtual DOM tree Not exactly. This is the "mental model" but not how the algorithm works internally. There are a lot of optimizations to do as little work as possible while "appearing" to rerender everything. This is not to say one is better than the other - each has its own benefits. But that's not a reason to choose Vue over React.
- unconed 1y ago
  This is the virtual DOM mental model of react, and it is pretty much entirely wrong. - React doesn't really distinguish between DOM components and your own components in how it evaluates. It's all part of the same "VDOM" tree. Creating and updating HTML tags doesn't flow differently from updating the props on your own components. - React does sparse updates, starting at the topmost component(s) whose state changed. Frequently this is just one widget or a button. Full tree re-evaluation is rare. - If a component has the _exact_ same `children` prop as before (`===`), as is often the case with e.g. context providers, because it was assigned by a parent, then React will skip re-rendering the children entirely with no effort from the developer. - If a component is memoized with `memo(...)`, then a re-render will be stopped if it has the same props as before. This means even if your state lives high up in the tree, judicious use of memo can make it zippy af. TLDR: If your react app is re-calculating the entire tree, you suck at react and you never bothered to learn it. Skill issue, git gud, etc. You're welcome.
  - codedokode 1y ago
    > If a component is memoized with `memo(...)`, then a re-render will be stopped if it has the same props as before This works only with immutable data structures. Am I wrong? Because a modified array will pass the identity test (=== operator). If you are using mutable data structures, you cannot use identity operator to detect changes. Also if "memo" optimization is that good why does one have to add it manually? > If your react app is re-calculating the entire tree, you suck at react The point of UI framework is to do the optimization for me and not require me to use some special style of coding like immutable structures or manually write functions like componentShouldUpdate. What I write is how UI variables depend on model variables and the rest is framework's job. I don't want to use weird patterns like a function with a giant switch that processes update events and clones the whole model graph to change a single variable. Vue of course has its own set of issues, caused by using proxies (for example when adding on object to the set you must "unwrap" it manually to prevent adding a proxy to the set).

pier25 1y ago

> and unly packer like Webpack Huh? People are still using Webpack?