HN Explorer

Ask HN: What's the best path to learn JavaScript as a beginner?

38 points by applecrazy ↗ HN
Hello Hacker News. I come from the world of Java and I never took JS seriously. I had previously used it to create websites using jQuery, etc but times have changed. JavaScript is popping up everywhere, so I decided to learn it last year. Unfortunately, I was extremely unsuccessful, since I finished learning ES5 and immediately decided to jump into frameworks such as React and Angular. Both confused the crap out of me, and then I saw VueJS (supposedly framework of the year) and that was a little easier for me.

But I still have a feeling that I'm going at learning JS the wrong way. For instance, TypeScript, Babel, and Webpack are very alien to me, even though they seem to be indispensable tools for writing safe, cross-browser apps.

What order do you recommend for learning the various aspects of JavaScript, and as an extension, front end development?

Thanks for your time.

18 comments

[ 2.6 ms ] story [ 21.5 ms ] thread
codegeek
I am learning JS myself and here is the order that seems to work for me:

1. DO not start with ANY framework. None. Forget about react, vuejs or whatever the flavor of the month is. Just don't pay attention to it.

1. Start with plain ES5. One good resource:

http://eloquentjavascript.net

2. Once you have a good grasp of ES5, then learn ES6. Again, for ES6, don't worry about Babel or shit like that. Just learn the syntax and new things about ES6 and directly test in Chrome

3. Learn how to compile ES6 into ES5 (Babel etc)

4. Learn Typescript (the daddy of all). Typescript will convert to ES5 or ES6 both. So make sure your concepts of ES5/ES6/ES(n) are clear before you do typescript so that it is not all magic for you.

5. Then, start learning about the bundlers and compilers like webpack and Babel etc. For bundlers, webpack is hot right now. Babel is good for ES6 to ES5 conversion but then again, typescript could take care of that.

6. Finally, time for frameworks. Start with one. React is good. Vuejs is good. They are all good at something. By the time you are at this step and you did all the steps before it, you will know what you are doing.

My 2 cents. This could change depending on which month/year are we talking about :)

applecrazy
Thanks for your suggestions. One question: why use Babel at all if TypeScript offers type safety and ES6 conversion? Or does Babel have some other "killer feature" that makes it useful in a TypeScript project?
ohstopitu
if you use TS, you don't really need Babel at all.

However, if you don't (I used TS, it was great, but I had some weird issues so I moved back to JS), Babel is awesome!

I just use Babel (with gulp - backend or webpack - frontend) and use just one preset - babel-preset-latest and never worry about ES(x).

Not because ES(x) is not important, but because if you keep reading more and more features, you'll get stuck on just those. ES(x) should be more natural...

As an example, a function in ES5 would be along the lines of

function () { //your_stuff_here }

but in ES6 it's more like

() => { //your_stuff_here }

which is a lot less typing.

Also, I'd advice you to use ESlint from the very beginning as it helps you maintain a good coding style from the start.

PeterisP
Can you elaborate why you recommend starting with ES5 instead of going directly for ES6, which allows doing some things in a bit more sane way?

It's just as likely that OP won't ever write any ES5, if any ES5 code will be needed, then it will be generated/compiled.

codegeek
Only reason is that ES5 is technically the supported version by all major browser as of today. Yes, you can write ES6 and compile to ES5 but I feel like there are lot of goodies in ES5 that you will miss if you do directly with ES6. Just a preference. I probably won't be saying this in next 2-3 years once ES6 is the norm.
devwastaken
When learning about ES6, I found some nice videos on it. https://youtu.be/yswb4SkDoj0

No facecam, gimmicks, or bad audio/voice. Simply just shows the code, its output, and outlines the logic.

applecrazy
These tutorials look really helpful, thanks.
LiamPa
https://www.codecademy.com/
applecrazy
I've tried Codecademy for Python, but their approach doesn't really teach you the concepts very well or in enough detail. For example, their AngularJS tutorial didn't explain how to set up tooling or how to structure an application. It just jumps into directives (I think?) without giving you much context.
matbram
Personally, the best resources that were invaluable to me were the Jon Duckett books called...

JavaScript and jQuery: Interactive Front-End Web Development

http://javascriptbook.com/

and..

HTML and CSS: Design and Build Websites

http://www.htmlandcssbook.com/

The Javascript one gives a really solid foundation for learning Javascript from the ground up and front-end web development in general. Also there are practical examples of many things the beginner/average developer usually is tasked with building and doing.

There is also the companion book that he did a couple years earlier on HTML and CSS.

They are pretty much both the first things that show up on Amazon when you search for Javascript and jQuery as well as HTML and CSS, and best sellers in their respective category.

In terms of what you should start with, I'd recommend basic front-end development, but browser extensions are good too.

Hope that helps!

GrumpyOldDev
In alignment to codegeek's recommendation, and depending on your conditions / preferences:

You can also pick up small gig building more (and better) websites for local businesses. There's always a dumpy restaurant wanting a new website for few hundred bucks. The time you would spend with a textbook / tutorial, you can also consider synchronously apply them to real life commercial use. Also, you know Java and probably a lot of backend / db stuffs... you can bundle the whole stack together and build business solutions too instead of just "websites". Like a simple restaurant POS UI, sends order to kitchen kind of system... again, depending on how much free time you have and willingness to code for little pay just to learn.

JS / Front End Dev is one of the best setup to pair up with small jobs like that IMO.

I can also recommend Douglas Crockford's book JavaScript: The Good Parts http://shop.oreilly.com/product/9780596517748.do

Disclaimer: Never an academia kind of person, I take forever to go through any book. I found myself learn faster when I can go hands-on and fail within reasonable comforts. Now 15+ years into front end, I consider myself doing quite alright...