ES6 for beginners, part 3 | Hacker News Reader

ES6 for beginners, part 3

hackernoon.com

64 pointstzury29 comments

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)

Try to write a react app. Watch youtube tutorials and fork a react webpack starter kit on github, at least thats what i did.

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

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.

I had the "true frontend" case in mind: knowing sufficient HTML/CSS/JS that I can write complex client-side web applications by myself.

I'd say, to refresh your memory, try and rewrite some of your old code with ES6 syntax. I don't think you even need a transpiler since new versions of node and chrome have very good support for new additions to the syntax. And if you used jQuery before, try to use native APIs too.

You'll end up with code that is almost unrecognizable but easier to read and …prettier?

If you don't come to like the language then, you'll find the ecosystem of transpilers and bundlers and tooling unbearable.

I would agree that it looks very complex today. But it's not too challenging to learn.

I would advise learning React (they have both create-react-app and Expo now to make the experience simpler) from the docs.

When learning React, some things were alien at first, but after getting the basics down I realized writing JS applications with React felt much simpler than what I used to be doing. It resulted in shorter file lengths and cleaner code, and the concepts shouldn't feel too foreign if you have backend experience (it's probably harder if you learned JS through jQuery and webpage interactivity logic).

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

[2] http://es5.github.io/#x15.4.4.20

[3] http://es5.github.io/#x15.4.4.21

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?

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.

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>).

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.

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.

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.

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.

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

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

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.

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.

Well, JavaScript slowed down after ES2015 too.

On the other hand, the module system really takes time and async/await was one big step.

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!

IMO, async/await itself makes it worth upgrading to ES6. So much cleaner.

Agreed, but Async/await is ES2017!

I was talking about the standardization.

Sure there is a bunch of proposals, but after ES2015 only a few per year are included.

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.

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.

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.

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.

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).

Reply on news.ycombinator.com