Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alan0buchanan

Reliance on ES5 syntax?

Recommended Posts

I may be wrong, but it seems like all usages of GSAP – even very recent ones – do not make use of ES6 syntax. Most noticeably sticking to `var` instead of `const` or `let`, and no use of arrow functions.

I wonder why this is, considering:
• the now extensive browser support
• ease of using Babel for transpilation
• ease of using ES6 syntax in Codepen without any external dependencies

Is it just that everyone is used to ES5 and is happy with its syntax? Is it that people are unaware of ES6? Is it an 'unwritten rule' of using GSAP that people just use ES5 and likely always will? Or something else?

  • Like 1
Link to comment
Share on other sites

Hi @alan0buchanan

 

It really depends on where you look. On this forum, and places like CodePen, you're not gong to find a lot of people using ES6. Look around a place like HTML5 Game Devs, and it's a completely different story.

 

I think most people start using ES6 because of some library/framework they are using. If a person is using React, there's a good chance they are also using ES6 because it's used in all the examples. But I've noticed that a lot of people still live in a jQuery world. The only code they are exposed to is what they see in jQuery's documentation and 10 year old answers on Stackoverflow.

 

So I would have to say that the reason you don't see a lot of ES6 is just plain ignorance. A lot of people have never heard of it, or are misinformed. You'd be surprised by how many times people have asked me how to convert Babel into JavaScript. If you want to see more ES6 examples, people need to be informed, so help spread the word.

 

What is ES6? 

It's the 6th version of JavaScript, and is also known as ECMAScript 2015. ES5 was the previous version, and came out in 2009.

 

Why should I use it?

Because it's JavaScript. There's a lot of new features that can help you write code that is cleaner, smaller, and more concise e.g. arrow functions, string templates, destructuring assignment, computed property names, classes.

 

What is Babel?

It's a tool to convert modern JavaScript (ES6) into code that can be used in older browsers.

 

What about performance?

There are some new features that haven't been optimized by browsers yet or need a polyfill. This will of course change over time, but if something is too slow, don't use that feature. Most of the features are syntactic sugar, so there should be no difference in performance.

 

  • Like 7
Link to comment
Share on other sites

Yep, Blake is right (as usual). It's not that we don't like ES6 or aren't aware of it, but it's largely syntactic sugar and we've got to be concerned about backwards compatibility more than most libraries out there. Plus, there are some concerns about performance and file size with transpiling. I've definitely read that "let" and "const" can be slower. I guess I just don't see much of a benefit, quite frankly, to switching to that stuff right now. However, when we rewrite for v2.0.0, we are indeed planning to go all ES6-style and drop support for IE8. 

  • Like 2
Link to comment
Share on other sites

You can't have my 'var'. I'm still just a newbie in the JS world and it's my security blanket. :D

 

Speaking for myself, I'm slowly learning all the ES6 stuff, but the few times I've tried to put it into use, I end up breaking something in an older browser that could easily be fixed by not using it. Yep - I could use Babel to help with that, but there's just so much to learn and not enough hours in the day. For now I'm fine with what I know, but that will most certainly change over time. There are lots of interesting and helpful things in ES6. Though, the first time I saw an arrow function, I was a tad confused. :blink:

 

I guess, as with all things, everyone changes and embraces the new and unknown at their own pace.

 

  • Like 4
Link to comment
Share on other sites

I love both let and var.

 

let is better than var in a for loop when binding events so each event can get there own index and scope, and bind correctly.

 

check this out

 

See the Pen Ogeovq by jonathan (@jonathan) on CodePen

:)

  • Like 3
Link to comment
Share on other sites

 

14 hours ago, PointC said:

You can't have my 'var'. I'm still just a newbie in the JS world and it's my security blanket. :D

 

Hehe. I know what you mean. I've been using ES6 syntax since 2013, and still haven't fully embraced using let and const.

 

I suggested using a function in that post because that is going to be the end result once the for loop is converted to ES5. So the code from @Jonathan's first example will look like this using Babel or TypeScript. Pretty much the same thing as his third example.

 

var list = document.getElementById('list');
var _loop_1 = function(i) {
    var item = document.createElement('li');
    item.appendChild(document.createTextNode('Item ' + i));
    item.onclick = function(ev) {
        console.log('Item ' + i + ' is clicked.');
    };
    list.appendChild(item);
};

for (var i = 1; i <= 5; i++) {
    _loop_1(i);
}

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×