Hacker News Reader

Comment by tim333 | Hacker News Reader

>State control

It took me a long time to figure that was the point and it still kind of seems you could write in good old plain javascript:

x = "some state"

if (you want to change it) { x = "some other state"

    DrawThingOneThatDependsOnx()

    DrawThingTwoThatDependsOnx()}

Rather than spending days learning the tons of bloat, tools and tech that effectively does that for you under the hood anyway?

(Plus with vanilla js running up to 40x faster than React https://news.ycombinator.com/item?id=9824884 apparently)

View on HN

> vanilla js running up to 40x faster than React

That particular link is a strawman argument. React isn't magically fast. Writing a 5 line shouldComponentUpdate would normalize the performance.

If you think you can do better with something else, feel free to ignore the React hype. For my part, I've been doing frontend full time more or less exclusively since 2005 and have tried dozens of libraries/frameworks in earnest. I don't know of a better way to write client side code.

How do you know what things depend on X? if you have Z=Y+X, do you also refresh Z?

State control is not simple when you have many moving parts. A very good solution (which both Angular and React bring to the table without destroying performance most of the time) is to remove all the moving aspects to the parts. This doesn't matter in microbenchmarks, but in real apps, having something be slightly slower but bug-free is better than fast but wrong.

I like Douglas Crockford's "Class Free OOP" approach for managing dependencies and composing functions:

  function constructor(spec) {
    let {member} = spec,
    {other}  = other_constructor(spec),
    method   = function () {
          // accesses member, other, method, spec
    };

    return Object.freeze({
      method,
      other
    });
  }

but prefer to use an immutable data structure instead of Object.freeze().

All application state can be stored in a single "Atom" (i.e immutable data) and all message passing can be achieved through CSP channels.

When dealing with the DOM, 'incremental-dom' is a nice option.

Of course, separating pure functions from side-effects inducing code is key to maintaining control.

This is my approach when going "framework-less".

Reply on news.ycombinator.com