ES6 Classes Discussion

[shiffman]

I'd like to open a thread for general discussion about using ES6 classes in p5.js examples and tutorials. I imagine a full integration of this style of OOP should likely wait until the p5 codebase itself adopts ES6, I'm starting to teach with ES6 classes at ITP and in my video tutorials.

@rasca0027 did a wonderful job porting several of my Learning Processing tutorials to p5js.org, thank you! For my ITP course, I'm working on porting the Learning Processing OOP tutorial using p5.js and ES6 classes for this week's reading.

1. Does this make sense to publish at p5js.org or should I put it on my own site for now in a more "experimental" way?

2. If I'm porting examples to use ES6 classes, at what point should I consider submitting them as pull requests to the p5.js website, etc.?

[lmccart]

I think the ES6 port probably needs to happen this school year. I don't see any reason not to start adding ES6 examples to the website to get the momentum going.

[shiffman]

Sounds good, as a matter of update, my tutorial port is here:

https://shiffman.github.io/Learning-p5.js/ch08.html
https://github.com/shiffman/Learning-p5.js/blob/master/ch08.html

Once I get it into shape I can consider adding it to p5.js-website as well as porting some of the examples. I'm trying to do this work this week and next, including making some video tutorials on Friday.

If anyone wants to contribute and help chime in here!

[brysonian]

A related question is let and const vs var. @shiffman have you started using those as well?

[shiffman]

@brysonian Yes, I'm using let with my students but not explaining it in detail, mostly just saying "let" is the new "var." We have not covered const. I also made two video tutorials about let and const (but these are not aimed at beginners):

https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YgpA3Oht-7B4NBQwFVe3pr

[meiamsome]

Note that if discussing the difference between these two function assignments: function a() {} vs var a = function() {} - the effect of variable/function hoisting is problematic. That is: function a() {} and let a = function() {} are significantly different. One important example of this is if you use the follow code p5 will be unable to find draw as it is not attached to window by default

let draw = function() {
  // Code here
}

Instead, you can do:

window.draw = function() {
  // Code here
}

[brysonian]

@meiamsome I think function draw() {...} would be more idiomatic and a better choice either way.

FWIW, in es6+, I believe that arrow functions are preferred when using the function expression syntax, and because it is a function, you'd want to use const, not let: const draw = () => {...} because they don't have the overhead of a prototype, and they are bound to the current context and avoids the need for bind() etc.

[shiffman]

I'm converting a bunch of examples for my class now and am leaving this regex here for when I (or anyone who wants to jump in) works on converting p5 website examples:

FIND: this\.(.*)\s+=\s+function(\(.*?\))
REPLACE: $1$2

[designbyadrian]

I'm thinking the requirement for a sketch.js should go altogether.

Why not

import P5 from 'p5'

const myP5 = new P5('canvasId', someOptions)

myP5.setup = () => {
    this.size(100, 100)
}

myP5.draw = () => {
   // etc
}

Is P5 meant for non-JS-coders or for experienced coders? ProcessingJS allowed you to choose. You can't have both.

[brysonian]

Currently there is "instance mode" for a similar, though not idiomatic ES2015 style, usage. Perhaps a future move for instance mode would be to extend a base class with setup and draw defined which would feel more like projects such as react and vue. Certainly something to think about moving forward!

[tawez]

I think that ES6 has a lot more to offer than classes.

• let/const with block scope
• array/object destructuring
• rest operator
• default values
• more builtin methods of Array, String -> less shims
• last but not least - ES modules

All of this allows to write more readable and compact code.
Just need to add a bit of Babel and Webpack, and voilà ;-)

Well, sounds like a huge change, but I think that it is worth to do it in a long term perspective.
Right now all modern browsers supports ES5 in 100%
and ES6 in 93% and more (depending on the browser),
which means less shims -> more native implementation -> faster code.

[brysonian]

Yes for sure, though this thread is specifically about teaching and official examples using ES2015 class syntax with p5, not about the p5 codebase itself.

[tawez]

OK, got it ;)

So I would go with let/const for sure.
Global scope + var may be really annoying and missleading for newcomers.
What else?
Arrow functions, especially in a form:

(arg) => (arg * arg)

But don’t go and replace all of your named and anonymous functions with arrow functions ;)
Be wise, use them when it is suitable.