#gist-bookmark #js #es6 #es5 #class #oop #prototype #styleguide #decorator #computed #getter-setter

js-better-to-stop-using-classes.md

Stop using js-classes

Please, stop using classes in JavaScript!!! (not TS) by Michael Krasnov, 2020.01.12

ReactJS: Classes confuse both: people and machines.

Refactoring OOP code is extremely risky! Complex dependency graphs and state scattered all over OOP codebase, make it impossible for the human brain to consider all of the potential issues.

Comparison es6 classes with es5 abilities. Way to VanillaJS OOP: Object literal vs constructor+prototype.

Stop using getters and setters

Also Google JS styleguide recommended to not use setters & getters which arrive with classes & helps to define read-only properties. Why? Answer on stackoverflow: potentially surprising!

get functions appeared in es5, not for class but for objects.

As alternative for getter/setter, you can use ES5 prototype function solution.

Vue under the hood

Vue uses getters/setters for properties (that's why IE8 is not supported - it doesn't support es6)

• Evan You 2016 Vue2 opinion about classes: ES6 classes offer no practical advantages over plain object definitions except for syntax preferences.
• Evan You 2020 Vue3 opinion: In the early stages of designing Vue 3, we attempted to improve TypeScript integration by offering built-in support for authoring components using classes. The challenge was that many of the language features we needed to make classes usable, such as class fields and decorators, were still proposals—and subject to change before officially becoming part of JavaScript. The complexity and uncertainty involved made us question whether the addition of the Class API was really justified, since it didn’t offer anything other than slightly better TypeScript integration.

Author (viT-1) opinion

Reasonable question: And js-decorators also I should not use?! I think that js-code should be more vanilla (without classes & decorators) than ts-code (may use). For example, I'm using decorators with vue-property-decorator in TS project).

Further reading: article about js-decorators

Dilemma: To use function or object for collection of static methods?
Jest can't determine empty functions, that's why coverage we have <100% coverage of functions.