5 ms·

ES6 for beginners, part 3

64 points by tzury 9y ago

frou_dh 9y ago
Perhaps I'm odd, but I'm not going to go past ES5. ES5 feels like the last version of the JavaScript language that is true to itself ("As in, pure WAT?" No, I mean not huge). When I want more capabilities, I will select from the many wonderful compile-to-JS languages that are a genuine departure.
- _sdegutis 9y ago
  Out of all the languages I've been using lately, I actually like the direction JavaScript has been going. Swift started off cool as a kind of Objective-C with less C cruft and more Haskell type expressiveness, but started turning into C++. Clojure started off fast adding destructuring within 3 versions, but hasn't really done anything cool since then, whereas JS picked up destructuring but kept going. Ruby started focusing on optional typing but JS left that up to TypeScript which seemed like a better way of going about it. Python 3 has just been a mess from my perspective. I still can't figure out why after all this time they haven't added anonymous functions without having to give it a name (lambdas don't count, they can only have expressions). Go continues to be the hipster language that says copy/pasting is fine, and that if you have a problem with it then go write a script that generates code, not learning any lessons from Java. Java 8 adds nice FP functionality but it feels very unidiomatically tacked on and doesn't fit into the rest of the Java stdlib very well (e.g. how Optional isn't meant to be used directly pretty much ever). JavaScript keeps adding more features that I liked from all the above languages and then some. My main gripe about JS is the unfortunate confusing naming scheme situation.
  - k__ 9y ago
    Well, JavaScript slowed down after ES2015 too. On the other hand, the module system really takes time and async/await was one big step.
    - Klathmon 9y ago
      I disagree! After ES2015 includes: * Async/await * a bunch of destructuring with the rest and spread operators * More class "nice to haves" like static properties and possibly more soon * Async iteration * Shared memory and atomics (which I'm not all that happy about, but many people are) And going even further "in the future" it might have stuff like: * Decorators (of they can ever settle on it!) * Observables * Defensible classes (again, not really happy with this, but what can ya do!) * Function bind syntax * Some "collection" nice to haves And more. JS isn't going to be slowing down any time soon!
      - parthdesai 9y ago
        IMO, async/await itself makes it worth upgrading to ES6. So much cleaner.
        Klathmon 9y ago
        Agreed, but Async/await is ES2017!
      - k__ 9y ago
        I was talking about the standardization. Sure there is a bunch of proposals, but after ES2015 only a few per year are included.
        WorldMaker 9y ago
        ES2015 rolled up around five/six years worth of changes since ES5 (which we could call ES2009, I suppose), so of course it's going to feel like it standardized a bunch more stuff. The new system is faster as annual releases, even if it seems like ES2016, and ES2017, seem "light" relative to previous standards.
  - Klathmon 9y ago
    Don't forget PHP! Despite it's reputation, it's gotten quite a large speed boost, a lot of new features (like typing!), And a lot more! It's shooting to be what Java always felt like it should have been in my eyes.
    - _sdegutis 9y ago
      I've looked into modern PHP for a new potential job, and it looks like it adopted a lot of Java features in the past few years. But one thing that really unsettles me is that anonymous functions need the `use` keyword to manually capture variables from lexical scope, which seems completely stupid and I don't know why they went that route instead of inferring this data from -- wait for it... -- lexical scope.
      - Klathmon 9y ago
        That one bothers me as well, and I'd be interested in the reasoning behind it (sadly I think it might have been added because of limitations with the 5.3-ish engine). But while it still has it's warts, it's a refreshingly nice language to work in compared to many others, and I'm honestly a little sad I don't really use it any more at my job.
- mercer 9y ago
  I'm not a fan of kitchen-sink approach for ES6+ features, but honestly at this point I can't do without const/let and arrow functions (and to a lesser degree destructuring assignment and template literals).
anon3433 9y ago
Array.prototype.map()[1] has been in js since ES5. Likewise with filter[2] and reduce[3]... [1] http://es5.github.io/#x15.4.4.19 http://es5.github.io/#x15.4.4.19 [2] http://es5.github.io/#x15.4.4.20 http://es5.github.io/#x15.4.4.20 [3] http://es5.github.io/#x15.4.4.21 http://es5.github.io/#x15.4.4.21
- Xyzodiac 9y ago
  I found it confusing it was mentioned in this article because of this. I wonder if they just wanted to show off how elegant arrow functions are and used those as an example?
- abritinthebay 9y ago
  Yeah, it's strange - a lot of ES6/next tutorials seem to think that FP concepts in JS just showed up. I don't get it.
  - WorldMaker 9y ago
    Possibly says something about how long it took for people to trust ES5 was supported by the browsers they were writing for. It seemed to some people that ES5 and ES6/ES2015 were added to browsers "at the same time", due to legacy effects of browsers many felt a need to support for far too long in major enterprise environments (<cough>IE6</cough>).
smnrchrds 9y ago
I have kind of a tangential question. I have done back-end development, mostly with Python and Django. I know some basic HTML, CSS, and JavaScript but not much. A couple of years ago, when I started dabbling in web development, those were much smaller and less complex. You could go through a couple of resources (JavaScript: The Good Parts, jQuery documentations, etc.) and learn everything there was that you needed to know. Now, they have grown exponentially in complexity and scope, and there are so many choices and paradigms that I don't even know how to start. For someone who has done back-end development, but is now trying to steer his career into front-end development, what resources would you suggest? What do I need to know, and which books and documentations do I need to read, before I can claim I am a front-end developer? (I will be basically starting from zero. I cannot use the resources that build up on previous knowledge and assume you know everything that came before)
- tutfbhuf 9y ago
  Try to write a react app. Watch youtube tutorials and fork a react webpack starter kit on github, at least thats what i did.
- ChrisSD 9y ago
  I'm not in a position to be able to recommend beginner tutorials as I've been following along for many years. However, the advice I'd give is to learn the following: Firstly, make sure you're familiar with modern HTML and CSS. This is actually quite important even if you're concentrating on the JS side of things as they are closely related. Secondly, React would be the big framework to learn. It's not too complex if you follow some examples. I wouldn't worry too much about modern JS features to start with but if you do want to brush up then try: https://github.com/getify/You-Dont-Know-JS https://github.com/getify/You-Dont-Know-JS
- abritinthebay 9y ago
  When you say "front end development", what exactly do you mean? Because that will strongly influence what you need to learn. If you mean "JavaScript Programmer" then it'll be mostly JS focused, some tooling, some html and css but minor on those. If you mean a true frontend dev then you'll need a LOT more on CSS (Flexbox, Grids, box model, etc) and a bunch of UI/UX/HCI type reading in addition to learning in depth modern HTML and CSS and Javascript. If you mean "I want to learn HTML and CSS" then you'll just want the first half of the previous one. So I'm curious as to what you're looking for. I'd be happy to recommend reading lists, tooling, etc. I've been doing frontend work for 20 years (and now also do a lot of JS on the server) so I've got a grounding in this! Just let me know what you're looking to do and I'll help any way I can.
sAbakumoff 9y ago
I recently started with Angular 4 and it seems to be the final point, the best front-end app framework the humanity ever created. Combining it with type script renders JS obsolete. I am ready to get all the downvotes you have, go ahead.
tomcam 9y ago
Really good stuff that will be almost impossible for beginners to find because they will be searching for Javascript
qualitytime 9y ago
I stopped reading after this: let modifiedArr = arr.map(element => element * 10); console.log(modifiedArr); Cool right :) ... let modifiedAarr = arr.filter((element, index) => element%2 == 0) Hope you got it. And don’t forgot to notice, only the first parameter is mandatory. Other two parameters are optional. Array Reduce
qwerty456127 9y ago
Does it make sense to start learning EcmaScript today? More and more people are migrating to TypeScript as the coding language, WebAssembly has arrived to replace JavaScript as the browser native language other languages will compile to. Isn't EcmaScript going to become legacy soon? I'm actually curious, seriously, not trolling.
- brlewis 9y ago
  Around maybe 2015 there was a dilemma as to whether to go in a TypeScript direction or an ES6 direction from basic JavaScript. TypeScript has adapted since then so that it's more in harmony with ES6. WebAssembly has arrived, but it has a long road ahead to popular use.
- WorldMaker 9y ago
  Typescript tries to be a pure superset of ECMAScript, so learning ES is still a useful starting place to working in Typescript. WebAssembly currently has very different use cases than JavaScript, and still has a while before it could be considered the "native language" of the web given that there are still key web concepts like the DOM that WebAssembly currently does not speak. ECMAScript is not yet in danger of becoming a legacy.

64 points by tzury 9y ago

Perhaps I'm odd, but I'm not going to go past ES5. ES5 feels like the last version of the JavaScript language that is true to itself ("As in, pure WAT?" No, I mean not huge). When I want more capabilities, I will select from the many wonderful compile-to-JS languages that are a genuine departure.

_sdegutis 9y ago
Out of all the languages I've been using lately, I actually like the direction JavaScript has been going. Swift started off cool as a kind of Objective-C with less C cruft and more Haskell type expressiveness, but started turning into C++. Clojure started off fast adding destructuring within 3 versions, but hasn't really done anything cool since then, whereas JS picked up destructuring but kept going. Ruby started focusing on optional typing but JS left that up to TypeScript which seemed like a better way of going about it. Python 3 has just been a mess from my perspective. I still can't figure out why after all this time they haven't added anonymous functions without having to give it a name (lambdas don't count, they can only have expressions). Go continues to be the hipster language that says copy/pasting is fine, and that if you have a problem with it then go write a script that generates code, not learning any lessons from Java. Java 8 adds nice FP functionality but it feels very unidiomatically tacked on and doesn't fit into the rest of the Java stdlib very well (e.g. how Optional isn't meant to be used directly pretty much ever). JavaScript keeps adding more features that I liked from all the above languages and then some. My main gripe about JS is the unfortunate confusing naming scheme situation.
- k__ 9y ago
  Well, JavaScript slowed down after ES2015 too. On the other hand, the module system really takes time and async/await was one big step.
  - Klathmon 9y ago
    I disagree! After ES2015 includes: * Async/await * a bunch of destructuring with the rest and spread operators * More class "nice to haves" like static properties and possibly more soon * Async iteration * Shared memory and atomics (which I'm not all that happy about, but many people are) And going even further "in the future" it might have stuff like: * Decorators (of they can ever settle on it!) * Observables * Defensible classes (again, not really happy with this, but what can ya do!) * Function bind syntax * Some "collection" nice to haves And more. JS isn't going to be slowing down any time soon!
    - parthdesai 9y ago
      IMO, async/await itself makes it worth upgrading to ES6. So much cleaner.
      - Klathmon 9y ago
        Agreed, but Async/await is ES2017!
    - k__ 9y ago
      I was talking about the standardization. Sure there is a bunch of proposals, but after ES2015 only a few per year are included.
      - WorldMaker 9y ago
        ES2015 rolled up around five/six years worth of changes since ES5 (which we could call ES2009, I suppose), so of course it's going to feel like it standardized a bunch more stuff. The new system is faster as annual releases, even if it seems like ES2016, and ES2017, seem "light" relative to previous standards.
- Klathmon 9y ago
  Don't forget PHP! Despite it's reputation, it's gotten quite a large speed boost, a lot of new features (like typing!), And a lot more! It's shooting to be what Java always felt like it should have been in my eyes.
  - _sdegutis 9y ago
    I've looked into modern PHP for a new potential job, and it looks like it adopted a lot of Java features in the past few years. But one thing that really unsettles me is that anonymous functions need the `use` keyword to manually capture variables from lexical scope, which seems completely stupid and I don't know why they went that route instead of inferring this data from -- wait for it... -- lexical scope.
    - Klathmon 9y ago
      That one bothers me as well, and I'd be interested in the reasoning behind it (sadly I think it might have been added because of limitations with the 5.3-ish engine). But while it still has it's warts, it's a refreshingly nice language to work in compared to many others, and I'm honestly a little sad I don't really use it any more at my job.
mercer 9y ago
I'm not a fan of kitchen-sink approach for ES6+ features, but honestly at this point I can't do without const/let and arrow functions (and to a lesser degree destructuring assignment and template literals).

anon3433 9y ago

Array.prototype.map()[1] has been in js since ES5. Likewise with filter[2] and reduce[3]... [1] http://es5.github.io/#x15.4.4.19 http://es5.github.io/#x15.4.4.19 [2] http://es5.github.io/#x15.4.4.20 http://es5.github.io/#x15.4.4.20 [3] http://es5.github.io/#x15.4.4.21 http://es5.github.io/#x15.4.4.21

Xyzodiac 9y ago
I found it confusing it was mentioned in this article because of this. I wonder if they just wanted to show off how elegant arrow functions are and used those as an example?
abritinthebay 9y ago
Yeah, it's strange - a lot of ES6/next tutorials seem to think that FP concepts in JS just showed up. I don't get it.
- WorldMaker 9y ago
  Possibly says something about how long it took for people to trust ES5 was supported by the browsers they were writing for. It seemed to some people that ES5 and ES6/ES2015 were added to browsers "at the same time", due to legacy effects of browsers many felt a need to support for far too long in major enterprise environments (<cough>IE6</cough>).

smnrchrds 9y ago

I have kind of a tangential question. I have done back-end development, mostly with Python and Django. I know some basic HTML, CSS, and JavaScript but not much. A couple of years ago, when I started dabbling in web development, those were much smaller and less complex. You could go through a couple of resources (JavaScript: The Good Parts, jQuery documentations, etc.) and learn everything there was that you needed to know. Now, they have grown exponentially in complexity and scope, and there are so many choices and paradigms that I don't even know how to start. For someone who has done back-end development, but is now trying to steer his career into front-end development, what resources would you suggest? What do I need to know, and which books and documentations do I need to read, before I can claim I am a front-end developer? (I will be basically starting from zero. I cannot use the resources that build up on previous knowledge and assume you know everything that came before)

tutfbhuf 9y ago
Try to write a react app. Watch youtube tutorials and fork a react webpack starter kit on github, at least thats what i did.
ChrisSD 9y ago
I'm not in a position to be able to recommend beginner tutorials as I've been following along for many years. However, the advice I'd give is to learn the following: Firstly, make sure you're familiar with modern HTML and CSS. This is actually quite important even if you're concentrating on the JS side of things as they are closely related. Secondly, React would be the big framework to learn. It's not too complex if you follow some examples. I wouldn't worry too much about modern JS features to start with but if you do want to brush up then try: https://github.com/getify/You-Dont-Know-JS https://github.com/getify/You-Dont-Know-JS
abritinthebay 9y ago
When you say "front end development", what exactly do you mean? Because that will strongly influence what you need to learn. If you mean "JavaScript Programmer" then it'll be mostly JS focused, some tooling, some html and css but minor on those. If you mean a true frontend dev then you'll need a LOT more on CSS (Flexbox, Grids, box model, etc) and a bunch of UI/UX/HCI type reading in addition to learning in depth modern HTML and CSS and Javascript. If you mean "I want to learn HTML and CSS" then you'll just want the first half of the previous one. So I'm curious as to what you're looking for. I'd be happy to recommend reading lists, tooling, etc. I've been doing frontend work for 20 years (and now also do a lot of JS on the server) so I've got a grounding in this! Just let me know what you're looking to do and I'll help any way I can.

sAbakumoff 9y ago

I recently started with Angular 4 and it seems to be the final point, the best front-end app framework the humanity ever created. Combining it with type script renders JS obsolete. I am ready to get all the downvotes you have, go ahead.

tomcam 9y ago

Really good stuff that will be almost impossible for beginners to find because they will be searching for Javascript

qualitytime 9y ago

I stopped reading after this: let modifiedArr = arr.map(element => element * 10); console.log(modifiedArr); Cool right :) ... let modifiedAarr = arr.filter((element, index) => element%2 == 0) Hope you got it. And don’t forgot to notice, only the first parameter is mandatory. Other two parameters are optional. Array Reduce

qwerty456127 9y ago

Does it make sense to start learning EcmaScript today? More and more people are migrating to TypeScript as the coding language, WebAssembly has arrived to replace JavaScript as the browser native language other languages will compile to. Isn't EcmaScript going to become legacy soon? I'm actually curious, seriously, not trolling.

brlewis 9y ago
Around maybe 2015 there was a dilemma as to whether to go in a TypeScript direction or an ES6 direction from basic JavaScript. TypeScript has adapted since then so that it's more in harmony with ES6. WebAssembly has arrived, but it has a long road ahead to popular use.
WorldMaker 9y ago
Typescript tries to be a pure superset of ECMAScript, so learning ES is still a useful starting place to working in Typescript. WebAssembly currently has very different use cases than JavaScript, and still has a while before it could be considered the "native language" of the web given that there are still key web concepts like the DOM that WebAssembly currently does not speak. ECMAScript is not yet in danger of becoming a legacy.