Learn JavaScript in 10 Steps

Common Sense: As with anything in life, there are many different ways and paths to achieve a certain goal. Some might be faster. Other might be more complete. There are many factors I like to take into consideration when learning anything new (from a Programming Language to Wood Working).

So the following article is just a recommendation, the path I wish someone would have told me before I got started.

If you know who the author is: tell me. I would like to give the proper credits.

1. Foundations

There are so many options for beginners, it is sometimes hard to know where to start. This is where we’re mostly “covered”, it is kinda unlikely to stray really away from the Light.

I love free stuff. Who doesn’t? But in this case, Code School’s course is way better than the Free Alternative™.

Honestly? I enjoyed doing both courses. It’s a nice way to internalize syntax and concepts without having to see the same content twice.


2. Build Something

Can’t stress this enough. Nothing improves our understanding and comprehension like building something using our newly acquired powers.

It can (I’ll dare say, it should) be something small. Preferably a few small projects, maybe some Websites using JavaScript or some nice console.log adventures.


3. Dive Deeper

Whenever we’re building something, it is inevitable: things will go wrong. The website will crash and many times some a few perks of the language will show up and apparently make no sense.

JavaScript is notorious for precisely that reason.

That is why I believe that the “You don’t know JS” series is invaluable. You can buy print copies to support the author but the whole series of books is available for free on his website:

The ES6 part can also be augmented by Code School’s ES2015 Course. I’m not affiliated with them in any manner. I just loved their JavaScript courses.

The Async & Performance part can be strengthened by this awesome video by Phillip Roberts that explains how JavaScript’s V8 Engine works:


4. Build More Stuff™

Those concepts and theories and characteristics of the language won’t stand on their own. Without practical use, we soon forget a lot of what was read.

If you have a side project or if you’re already working for a company using JavaScript on a daily basis, the value of the aforementioned resources will become even more clear.


5. Understand Design Patterns

Design Patterns are not rules. They’re suggestions. But many of them permeate the JavaScript scene with such a strength (like the Module Pattern) that we can immediately extract value by understanding what is going on and why certain decisions were made.

In this particular case I prefer the free version. I also enjoyed going through Ben’s course and, as it is a video, it’s a different, more visual, approach.

One of the reasons I also like to learn from different sources is that, not only the content might be different, but each author might have different perspectives or different approaches to teaching. It helps me sharpen my own communication and teaching skills.

By the way, I’m writing my own JavaScript Design Patterns blog posts to help me strengthen my understanding and plant some good karma.


“Browserify contributor is not impressed by Webpack”. Oil on Canvas. Circa 1877.

6. Dependency Managers and Bundlers

It is very likely that, if you really made it this far, you’ve encountered a few different technologies, specifically:

  • Webpack or Browserify + Gulp / Grunt or Brunch
  • NPM and/or Yarn or Bower
  • Node

I don’t have a horse in this race. Actually I didn’t. I just started contributing to Webpack’s documentation, so I’m gonna ask you to have a nice, free overview right here, with my pal Sean Larkin:

With what we’ve covered thus far, we are able to jump into almost any JavaScript project and get things going.

Almost.

7. Go Functional

JavaScript is known to support several different programming paradigms like Imperative, Object Oriented and Functional Programming.

Pretty much all the aforementioned resources are related to the ubiquitous world of OOP JavaScript. But there are many reasons why we should also understand and leverage EcmaScript’s Functional possibilities.

  1. It is better.

Just kidding. (More or less). I’m not getting into this. Feel free to call me names at the comments. If you want to learn Functional JavaScript, I would start with the following free resources:


8. Build Stuff

You already know the drill. As GrandMaster Choa says: Practice, practice, practice.


9. Experiment with a Framework

Actually you should stick to Vue.js just because I’m telling you so. I’m paid to work with it. So it is the best.

This decision will be most likely be made by the company that hires you anyway. Unless you’re the decision woman. Then by all means dive deeper into the Framework Intergalactic Wars™ before making a decision.


10. Node

I haven’t gotten here yet. DO YOU SEE THE AMOUNT OF THINGS IN THIS LIST? Stop pressuring me.

In some sense, a better understanding of Node could be exclusively to those ones interested in doing server side JavaScript work. In other sense I bet it would be invaluable to understanding other Browser Related Stuff™.


MANDATORY EXTRAS

  1. Test Driven Development is a thing that let’s me sleep at night. So I’m writing about how to test Vue.js Apps. TDD is something I’m very fond of, and I also believe there is a proper way to do it.

2. You probably won’t escape from jQuery so soon. Learn it.

3. The Mozilla Developer Network is our friend. Use it.

I hope by now I have managed to offend some people. That’s why I pay the interwebs. Also learn Elixir for fun and profit.