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.

[RoseCrime]

As I already mentioned on youtube channel : I feel like it's much better to let "old" tutorials stay and just make separate playlist for it. Even if prototypes + constructor functions + var will became legacy in js => people will still use it for like future 5 years at least. (if they care about web development or development for phones).

Now both ways are popular and in usage. ES5 and below - about to everywhere. ES6 and higher - in node apps or new and "cool stuff" - popular, but if people want to be sure their app or site will be supported by most devices - they'll use ES5 --. So...Now we may have both playlists open. Then just mark old playlist as "old" or "out-of-date"

---

P.s. Yep, new tutorials for sure should be on ES6.

[dhowe]

Should libraries use ES6 now as well?

[lmccart]

at this point we don't yet have clear guidelines or suggestions, but I don't think it would be a bad idea to start using ES6 as we are planning to make that transition with the rest of the library and examples in the future. we're working right now on creating a roadmap so we have a clearer sense of when that might happen.

[limzykenneth]

@lmccart I'm recently thinking about updating the browser support wiki as well and that probably should be taken into account somehow.

[Janglee123]

Hey @lmccart , I am interested to work on migration of codebase to ES6. This seems like a great place to start work on the project. I see how most examples have already been converted to ES6 and I can already start seeing that the codebase would look so much better and much more readable after the entire migration project is executed. I cannot wait to start contributing to the migration project and I need advice on the modules that should be taken up first. I would be glad if I can get a heads-up on where to dive into. Looking forward to a great intern season. Thanks!

[limzykenneth]

Codebase migration to ES6 are not currently schduled to happen yet and we have not really talked in detail about what that would entail (using babel or not, which features of ES6 to include in the library etc). I believe @outofambit and @stalgiag's fellowship this year to bring p5.js to 1.0 does include this migration so maybe have a chat with them if you are keen to help out.

[ankur54]

Hello everyone. I am interested in "Update p5.js library to ES6" project that is assigned as a GSoC project. But it seems that the codebase won't be shift any time in the recent. So, what issues should I solve, in order to be eligible to work on this project as a part of GSoC this year? Any ideas, please?

[lmccart]

@ankur54 thanks for your interest! it is not necessary to solve any issues or contribute any code to the p5.js repositories prior to GSOC in order to be considered. we look at the proposal that you've submitted and your application materials. so I would suggest spending time developing your proposal in the forum. if you'd like to solve issues, take a look at those labeled help-wanted which could be good starting points.

[lmccart]

The main question of this issue has been answered and we've now updated all examples to ES6 in the reference and examples page. I'll close this issue now. We can open other more specific ones as we work on the last piece of ES6 updating which is the codebase itself.