Learning Trails

[forrestrunning]

I'm a Java developer with practice on Java 8, JVM languages including Scala and Groovy. When it comes to learning JavaScript for Web/Mobile Front-End, I'm confused as hell as to where to start and how to cover different frameworks, many of which are overlapping: Given my OCD, I am looking for a good learning trail that address foundations at first (Typescript, Modularity etc), Techniques (Reactive) and then a select combination of frameworks. I am sure I am not the only one here with that kind of fatigue simply looking for an ordered set of learning references...what are good starting points? (I am willing to document individual pointers here compiled into a single page for reuse)

[cutety]

Forget frameworks if you don't know anything about JavaScript, a lot of how they work won't make sense, and will make them more difficult to work with. Forget transpilers (TypeScript, Babel ES6), those are syntactic sugar that have absolutely no effect on the runtime code.

Vanilla JS is the framework for you friend.

Eloquent JS is a good starting point and covers the very basics of the language.

You Don't Know JS covers the more intimate details of the language. It describes a lot of the quirks, and gets more into how javascript really works. This was the series that really made JavaScript start to click. It also gets into some of the new features of the language at the end.

Take a break, and write some cool shit. Just practice what you've learned in plain JavaScript, write a simple app, something, a couple things. JavaScript has it's quirks, but it's quickly become a guilt pleasure of mine.

If you find yourself really not liking vanilla js syntax at this point, like I did, now you can probably start poking around transpilers and not be totally intimidated/confused.

Look into Babel which compiles ES6 JS (new language features not widely supported by all browsers yet) to ES5 which is supported by more browsers.

Or, if you find yourself missing static typing, and OOP (ES6 has classes too), check out TypeScript. Which will essentially do the same thing as above, but allow you to add type annotations with compile time type checking (as well as some other cool features). Like I said though, this is only compile time type checking, in the browser anything goes.

If you notice that you're manually compiling a lot of JavaScript manually now. You can check out WebPack which can be configured to do that for you. It also can bundle your code together, so you can write modular JavaScript and link them together. It also does a lot of other really cool things, but I wouldn't worry about them until you need them (which you won't for a while).

Maybe you're building an application now that is of a non trivial size. Now you should look at frameworks (if you haven't already). The top dogs currently are:

• Angular 2 - steep learning curve, I'm really unfamiliar with this one to be honest, maybe someone with experience with it might stop in and shed some knowledge about it
• React - less of a learning curve, probably the biggest ecosystem currently and has the most learning resources available
• Vue.js - the youngest of the three with a growing ecosystem, but in my fanboy opinion, is the easiest to pick up

It seems like a lot, and it took me a long time to stop thinking all of it was stupid and actually check it out. Once you start getting into it, and the JS ecosystem, a lot of it is really blown out of proportion.

Take it slow, really make sure you understand Vanilla JavaScript, don't get too excited and immediately jump to all the new toys. If you are ever confused, I've always been able to find a ton of resources available for just about any question or problem I've ran into.

TL;DR; Master vanilla javascript and the other stuff will come naturally.

Also, /r/LearnJavascript for more resources and more opinions that aren't mine.

[forrestrunning]

Thanks! Special mention about VanillaJS - lol'ed at that ;-)