Choosing classic Javascript Blocks or ESNEXT Blocks

[davidperezgar]

Hello,
Which code do we should to use to build Gutenberg's blocks? Classic seems to be cleaner and easiest code, but I don't know which one do we have to use in order to work with code that will work in next year...

What do you recommend?

[gziolo]

I assume you mean by classic ES5 JavaScript that works in every browser out of the box today. Correct me if I’m wrong. Taking into account the way JavaScript language evolves you can safely bet that ES5 will be supported for a very long time. We didn’t have any breaking changes that would make any bits of old syntax to break since I remember. General approach has changed since they introduced ES.next which has started with ES6, aka ES2015. The add new features to the language every year, but don’t modify the existing syntax. One of the drawbacks of using ES.next is that it isn’t fully supported by all browser vendors, which enforces using build step that transforms your code to ES5 to make sure it works everywhere. In the future this difference might become less prominent as all the browsers implement new JS features.

To answer your question, you can safely start with classic (ES5) today and dive into ES.next once your block is working as expected. The best part about ES.next is that it has to work with ES5 syntax, too. So migration done this way is going to be straightforward, you will have to figure out how to add build step I mentioned before. We have some examples of blocks which present how this can be done. In the future we might be offering a recommended script for builds when someone wants to use ES.next.

If you want me to elaborate more on something or I wasn’t clear enough let me know 😃

[davidperezgar]

Hello! Thanks for your arguments... I’ve saw the code examples and the classic(I assume that is ES5) has less files and I understand better. So, I’ll use it then...
Thanks!

[gziolo]

👍

[Shelob9]

Related : wp-cli/scaffold-command#106

[ntwb]

Also checkout the Gutenberg-Examples repo: https://github.com/WordPress/gutenberg-examples

[stgoos]

One of the drawbacks of using ES.next is that it isn’t fully supported by all browser vendors, which enforces using build step that transforms your code to ES5 to make sure it works everywhere. In the future this difference might become less prominent as all the browsers implement new JS features.

@gziolo, that only has impact when you want to write / edit a post, right? Not when a user just visits the website, or am I wrong here?

[gziolo]

@gziolo, that only has impact when you want to write / edit a post, right? Not when a user just visits the website, or am I wrong here?

Nope, this applies in general to JavaScript usage in browsers.