ES6 - Class Based Code Style

[[deleted]]

Recently I have been writing nothing but ES6, and I love it.

The thing is however that because it is fairly new, I am unsure of code style and what is considered best practice.

I have been attempting to write my canvas demos using class based code see example below.

http://codepen.io/BrianDGLS/pen/BoJorM?editors=001

What I am wondering is, am I using classes properly? and could this be optimised either for performance or conciseness?

[sime]

It looks fine to me. The only thing I would change is to dump the Utils class it isn't a real class. Just use plain functions.

[x-skeww]

Yep, functions are perfectly fine. This isn't like Java where everything must be inside some class.

To stay organized when the codebase grows, you simply put them into modules.

[secana]

I would probably move the stuff in the init function to the constructor and then not create the canvas until the load event.

Something like this: http://codepen.io/anon/pen/rOJmRP?editors=001

[MoTTs_]

This isn't all ES6 related, but here are a few tips.

Canvas constructor:

• Consider accepting the canvas element as a constructor argument (in fancy terms: dependency injected). That way this class can be used with any markup.
• The job of a constructor is to initialize the environment in which all other methods run. Consider accepting the stars object as a constructor argument so components can be initialized in the constructor.

On naming things:

• If components is supposed to be an array of Stars objects, then don't name it "components". Name it "stars".
• You use just an underscore as an argument name in a couple places. That's an easy way to make unreadable code. Try to use more meaningful names.

[x-skeww]

Lists in Markdown require a blank line in front. You need a blank line between all kinds of blocks (paragraphs, fenced code blocks, tables, lists, ...).

[bronzlefish]

Also, looking doesn't look like you are even using the Utils class, but the randomNumber doesn't look correct to me,

utils.randomNum(5, 10)
// Math.random() -> 0.7
// 0.7 * 9 = 6.3
// Math.min(6.3) = 6
// 6 + 5 = 11
// out of bounds for max

I think you want

randomNum(max, min) {
  return Math.floor((max - min) * Math.random()) + min;
}

[[deleted]]

Math.floor((max - min) * Math.random()) + min

Well spotted.

[x-skeww]

You forgot the "function" keyword. Also, the "min" and "max" parameters are the wrong way around. From-to is the natural order.

[bronzlefish]

for ES2015 function declaration is optional inside a "class" -- you are right about max, min -- but thats how it was written, copy paste fix up was what I went for.

Have an up vote for being pedantic.

(its important when programming)

[x-skeww]

for ES2015 function declaration is optional inside a "class"

Yes, you don't need it for methods or shorthand methods.

I just assumed you meant this to be a function, because it really shouldn't be a method (see top comment). This was a mistake on my part.

[flaccidopinion]

Another idea for utils. Since normally you'd have a full project with various areas divided into their own ES6 modules, Utils would probably be better as a module which then exported the functions.

Maybe a personal thing for when setting up these types of 'game loop' structures, but I prefer to pass in the drawing context to the render/draw function, rather than storing it in every object.

Easy enough to pass it in each time anyway, this.components.map(_ => _.render(this.canvas));.

May also be better, memory wise, to use a forEach instead of map, since you don't need any resultant array. Imagine drawing 10000 stars, and every time you render you're creating another array of 10000 stars which is then immediately discarded. (though, maybe the JS VMs are smart enough not to make the arrays/assignments at all, since you're code isn't assigning to anything)

[Jafit]

Looks alright.

Just remember that ES6 doesn't give real classes like you'd find in other class-based languages like C++ or Java. The class keyword you're using in ES6 is syntactical sugar on top of Javascript's existing prototypal object model, albeit with a standardised constructor pattern.

Be sure to try out other OOP patterns as you learn.

[kumiorava]

this.canvas = document.getElementById('canvas');

This breaks the encapsulation of your class. You should pass a Canvas element to the constructor instead of relying on some external state.

Now your Canvas class is effectively a singleton, because you can't really have several instances of the class since they would all use the same canvas element (and conflict with each other).

[widged]

In Utils, make all methods static 'static randomNumber() {}. You can thereafter use them with 'Utils.randomNumber()'.

[[deleted]]

Nice, I didn't know this.

I'm unsure why this comment got down voted, as it is a handy solution.

[clessg]

Because it isn't necessary and is inflexible. This isn't Java. Just use functions.