5 ms·

In the live talk, Sophie also discussed how Javascript classes are difficult for machines: minifiers aren't able to shorten the names of methods (because it's a

In the live talk, Sophie also discussed how Javascript classes are difficult for machines: minifiers aren't able to shorten the names of methods (because it's apparently hard to work out all the ways that the method could be invoked), and they cause stability problems with hot code reloading. So there are benefits beyond ease of use for humans. (Also, I'm pretty fluent in Javascript and I still forget to bind event handlers all the time, which suggests to me that it's a counterintuitive pattern even if I know "how it works" on a technical level. And you either have to put a bunch of "this.handler = this.handler.bind(this)" in the constructor, or rely on class properties which are an unstable syntax feature, both of which are suboptimal.)

adpirz 8y ago
It may have been on purpose (came off as a sincere mistake), but Dan Abramov forgets to bind them in this talk while giving an example. It's a very common problem, even for the authors of React itself :)
- azangru 8y ago
  It did come off as a sincere mistake, but remember, they had a dry run of the talks a day or so before. So could have easily been staged. But was hilarious anyway.
Touche 8y ago
You can just do `onChange={() => this.handler()}`.
- jotaen 8y ago
  This would create a new inline function on every render though, which potentially might cause rendering performance issues.
  - Touche 8y ago
    The Hooks way creates a lot of inline functions on every render.
  - lilactown 8y ago
    Hardly ever.
codefined 8y ago
> because it's apparently hard to work out all the ways that the method could be invoked Simple example case of a statement that makes it impossible to minify function names: class Test { static func() { /* function code */ } } test[prompt('function to call')]()
- baddox 8y ago
  Doesn’t that example also make it impossible to minify the names of anything? Perhaps other than JavaScript modules, since AFAIK the popular module builders like Webpack do compile-time module importing (I believe that even the dynamic import function is recognized at compile time and doesn’t support throwing in a prompt).
  - AgentME 8y ago
    No, that issue is unique to class/object property names. You can't dynamically reference a variable in a scope by name supplied by a variable in the same way (except by using `eval`, which does in fact cause minifiers and javascript engines to disable a bunch of optimizations in the scope it's used).
  - deleted 8y ago
    [deleted]
boubiyeah 8y ago
Of course it's unintuitive. I see dev veterans make the mistake all the time. JS was so poorly designed. An implicit (not passed as an arg), dynamic this parameter. You couldn't be more cheeky than that really. something like console.log.bind(console.log) is beyond silly. It's what we're stuck with but I will minimize the occurences of that kind of crap any single time I can.

adpirz 8y ago

It may have been on purpose (came off as a sincere mistake), but Dan Abramov forgets to bind them in this talk while giving an example. It's a very common problem, even for the authors of React itself :)

azangru 8y ago
It did come off as a sincere mistake, but remember, they had a dry run of the talks a day or so before. So could have easily been staged. But was hilarious anyway.

Touche 8y ago

You can just do `onChange={() => this.handler()}`.

jotaen 8y ago
This would create a new inline function on every render though, which potentially might cause rendering performance issues.
- Touche 8y ago
  The Hooks way creates a lot of inline functions on every render.
- lilactown 8y ago
  Hardly ever.

codefined 8y ago

> because it's apparently hard to work out all the ways that the method could be invoked Simple example case of a statement that makes it impossible to minify function names: class Test { static func() { /* function code */ } } test[prompt('function to call')]()

baddox 8y ago
Doesn’t that example also make it impossible to minify the names of anything? Perhaps other than JavaScript modules, since AFAIK the popular module builders like Webpack do compile-time module importing (I believe that even the dynamic import function is recognized at compile time and doesn’t support throwing in a prompt).
- AgentME 8y ago
  No, that issue is unique to class/object property names. You can't dynamically reference a variable in a scope by name supplied by a variable in the same way (except by using `eval`, which does in fact cause minifiers and javascript engines to disable a bunch of optimizations in the scope it's used).
- deleted 8y ago
  [deleted]

boubiyeah 8y ago

Of course it's unintuitive. I see dev veterans make the mistake all the time. JS was so poorly designed. An implicit (not passed as an arg), dynamic this parameter. You couldn't be more cheeky than that really. something like console.log.bind(console.log) is beyond silly. It's what we're stuck with but I will minimize the occurences of that kind of crap any single time I can.