Published Jun 13, 2016Last updated Jan 18, 2017

Learning JavaScript in 2016 - 8 Magical Steps

Learning JavaScript in 2016 - 8 Magical Steps

1. Have an open mind

Preconceptions on how you can utilize what you already know about coding from another language can and may be your major downfall into learning JavaScript.

One of the main reasons people want to learn JavaScript is to learn how to develop websites. Many of us come from different backgrounds and the major problems with learning JavaScript is how different it is. JavaScript as of 2016 is moving more functional than object-oriented.

2. Learn by doing

You can grab a popular book such as JavaScript: The Good Parts (which I did!) but found it to be very intense and presumptuous of the reader's knowledge and motivation. I found some great interactive tutorials at Codecademy (if you like free) and CodeSchool (if you like production value).

3. You don't know JS

“You don’t know JS” book series by Kyle Simpson were a big part into actually learning relevant information about JavaScript. You can find them all on Github

Having it open source is a great way to find a community struggling in the language, because the best way to learn something is to be surrounded by other people who are facing the same problems!

Up and Going! is a great place to start the series. When going through the literature you get a confident feeling that what you are learning has been thoroughly thought out due to its open source nature.

4. You still don't know JS

Get a good understanding of Scopes and Closures. Test your knowledge by writing some of what is given in the book. I recommend using JSBin. It has a great interface, HTML CSS JS Console Output panels take the cake in my book.

5. Get social!

So you’re learning more and more, testing code out. What I did next was to try and be a part of the JavaScript community.

Twitter and Github are great places to receive a nice amount of feed from the cutting edge experts and all around fun.

With twitter, start following influential JavaScripters, blogs and news sites. I'll list a few I recommend:

@drboolean, @getify, @BrendanEich, @holtbt, @jhusain, @andrestaltz,

Github is a superb place to look for examples of code, to see how others are doing it and numerous other tools/frameworks/libraries that talented people make.

It’s also a good way to start sharing what you do or even collaborate with others. Open source is marvelous (in my opinion) for the whole ecosystem, for any language you are using. Some still argue it is a bad idea but I’m all for sharing my knowledge and using or contributing with others (and employers really love to look at github accounts!)

6. Take a stab

Around reaching the dreaded intermediate stage, you may feel like you're learning the basics but was just unable to think of how I could progress from here.

Others, like myself, felt too good for 'basics' or 'tutorials' and wanted a real struggle.

This is where frameworks come into light: lots of hype and talk of how easy they are to use and all the great things they can do. A few years ago when I really got into front-end, Angular seemed like a good choice, it had a strong community. I’d be able to get a lot out of the box and actually start making things.

Taking this choice for me was a slight time waster, not because the Frameworks are bad ones but I’ve come to realize that Frameworks are just tools, they come and go so often in JavaScript that picking one might not be the right direction to take.

I then realigned my goals and felt that I wanted to learn how these Frameworks work under the hood! Optimistic I know, but in my eyes if you learn vanilla JavaScript then your skills/knowledge will stretch much furthers and for a longer duration than putting all your eggs inside a Framework.

I felt as if I was failing and finding it difficult to reach where I wanted to be, in reality I was being impatient. I did watch this magnificent video by Milton Glaser on the whole subject of failing and if I’m honest I still do. When dealing with a flexible language like JavaScript be ready to see endless options and opinions! So try not to get disheartened and try to think of the bigger picture. (Easy to say I know!)

7. To the Cutting Edge!

I'll start with the "what's popular now"

  • React - implementations of the virtual dom are great and React is the most popular. Huge community, highly recomended for a front-end library.

  • Redux - Flux architecture made absolutely convoluted as possible. .. Just kidding, but this thing is a real tackle to some people (including myself). Bringing in immutability to your state might make you wonder 'why'. True it does create quite a bit of boilerplate, but the point is to create re-usable and readable code.

  • Webpack - The great webpack. Modular everything. What's so great about webpack though? Honestly you have to play with it yourself to understand why it is so great, but basically it is an ultimate bundle/optimizer/toolkit for creating a development and production stage for your code.

Now, to the 'what will be popular' - (patent pending)

  • Cycle.JS - This library is amazing. I honestly think it will run react to the floor within 6 months. Reactive programming is simply the future. If you haven't tried it, what are you waiting for?!

  • RxJS - While technically as of writing this, this is considered 'popular', but I still think there is room to grow. It's only been out for a year and there are some crazy ideas made true from reactive programming.

If you couldn't tell, I really recommend checking out reactive programming.

8. And back to the theory!

Professory Frisby's Mostly Adequate Guide to Functional Programming is one of the greatest books to better understand JavaScript. Check it out! The author also has a course over here

Fantasy Land takes your understanding of JavaScript to the next level. In before maths! (warning: extreme algebra)

Thanks for reading, I put quite some time into this tutorial.

If you'd like to hear more from me, check out my account here Contact me on Codementor

or you can check out my twitter @artiestie

Building a Pokedex with React
Enhancing React Components: Inheritance & Composition
Quickly Setting up an ES6 Project with Browserify, Babel & Hot Reloading