JavaScript is everywhere, and learning it is almost a requirement for anyone working in web development now. Even in projects that use relatively little JavaScript, the tooling that modern front end applications can require is predominantly driven by JavaScript in the form of the Node.js runtime.
In fact, I would go as far as to say that if you are new to web development JavaScript should be the priority over languages like PHP, Ruby or Python.
Learning JavaScript has never been more important, but with the language evolving at such a rapid pace and with the new ES6 (a.k.a. ES2015) version of JavaScript being close to 100% supported by evergreen browsers and Node.js v6.0.0 it’s becoming increasingly difficult to figure out where to even begin if you want to get into it.
Despite the explosion in popularity of JavaScript as a language there is still a lot of misunderstanding about what JavaScript is and how it works.
For example, a lot of developers still treat JavaScript as a Class-based Object-Oriented language and become frustrated with it when it doesn’t work in the way they expect.
This is only compounded by the fact that the ES6 version of JavaScript now, unfortunately, supports the class keyword. This kind of stuff is a problem because new developers, or those who just don’t know any better, are mislead and never realise JavaScript’s true potential as a Prototype-based Object-Oriented language.
In this post I hope to provide a few simple (if somewhat long) steps, with links to resources, that you can follow to get started with JavaScript in the right way, without all of the misinformation that can otherwise be found on the internet and even in professionally published books.
So, where should we start?
The Beginning
When you decide to learn something new, the beginning is always the most difficult part, and things can seem even more difficult when it comes to learning a programming language like JavaScript; especially when you see how much churn there is in the ecosystem surrounding it now.
Due to JavaScript’s fragmented past, along with a few poor design decisions in the language itself and people having to deal with buggy browser runtimes and the inconsistent DOM API, it’s garnered more than it’s fair share of criticism and misunderstanding. This means that there’s a lot of bad information floating around out there, whether it’s just people trying to put the language down, or tutorials, articles and courses that are just plain wrong.
JavaScript today is an amazing language, and while it still has some quirks from it’s past, JavaScript runtimes are far less fragmented than they used to be and much more consistent, making it a very nice language to work with.
You need to start your adventures in JavaScript, like anything else, with a strong foundation. If you’re lacking in these foundations then you will inevitably become frustrated with the language, not through any fault of it’s own, but because you couldn’t be bothered to understand the tool you’re working with.
JavaScript looks and feels a lot like the popular C-style, Class-based Object-Oriented languages that most people enjoy working with today, such as Java or C++. This makes JavaScript approachable, and you may feel like you already know the language. But I urge you to resist the temptation to just start hacking things together with it. It always ends in tears.
No matter how simple or familiar the language may seem at first, you need to forget everything you already know about the Class-based Object-Oriented paradigms you might already be used to; the techniques used in that paradigm to do with things like inheritance don’t apply here. If you can do that, and approach JavaScript with an open mind, you will be able to truly enjoy working with the language and reap the benefits of JavaScript’s Prototype-based roots.
My first recommendation is mostly for those of you who are new to programming in general and need to get started with the basics. Having said that, even if you feel as though you know the basics it might still be worth doing this first step, since you might find a few differences in the basics of JavaScript when compared to whatever language you’re used to working in.
Just remember that for the entire time that you’re learning you should also be trying to write small programs yourself with what you’ve learnt.
1. Codecademy and FreeCodeCamp
I suggest that you first complete the free interactive tutorials on the Codecademy website and perhaps even look into the tutorials on FreeCodeCamp.
They will walk you through not only the basics of JavaScript, but also the basics of programming in general, explaining things like variables, functions, conditionals and loops. These are all concepts you will need to be familiar with no matter which language you decide to learn.
The next step I would suggest is to read some books.
There are a lot of JavaScript books out there, and if you search Google you will find a lot of recommendations for lots of different titles.
So which books should you read?
2. You Don’t Know JS (YDKJS)
I suggest reading a series of 6 books by Kyle Simpson called “You Don’t Know JS”.
The series is split into 6 separate books, each covering a different topic in JavaScript. You can buy the whole series in either print form or as a digital download through O’Reilly, but Kyle has also made them freely available to read online via GitHub.
You can find the entire series free to read here: YDKJS GitHub
Although the first book in this series goes over a few of the basics in JavaScript it isn’t particularly beginner friendly, which is why I suggested the Codecademy interactive course or FreeCodeCamp as the first step.
The best part about these books in that they don’t pretend that JavaScript is Class-based and properly explains enough of the details about how JavaScript actually works using prototypes.
If you don’t want to read them all, then at least read the first 3.
Up & Going gives you enough information about JavaScript to start writing some basic programs. You will have probably learnt most of this from the Codecademy course, but this book may contain a few extra useful pieces of information. Even if you feel confident with the basics I would still recommend reading it to recap everything you have learnt so far.
Scope & Closures, as the name suggests will teach you all about JavaScript’s scope and closures. Without understanding how JavaScript defines lexical scope and how it treats variables in those scopes you will have a hard time debugging your code when reference errors crop up. Closures are just as important to learn about because they can counteract some of the bugs you will create if you aren’t used to JavaScript’s scope system. Not only that, but learning about closures becomes extremely important when you start writing asynchronous code, or trying to use JavaScript for functional programming.
this & Object Prototypes shows you how to think about objects and the this keyword in JavaScript and how they relate to prototypes. This book is the last important one to read as far as “getting started” with the language goes, since it explains why you should treat JavaScript like the Prototype-based language it is, and not like any of the other Class-based languages that you might already know.
I would still recommend reading all 6 books, but it could take you some time to get through them if you make sure to understand every single concept.
The Middle
There are still a few JavaScript runtimes out there that don’t support the latest features in JavaScript, but those runtimes are now mostly limited to older browsers that most people don’t support any more.
Even if you do have to support older browsers there are plenty of tools out there that will enable you to write your code in the latest version of JavaScript without having to drop support for those browsers; it just requires more work, that’s all.
That brings us to the next step.
3. Learn ES6 (ES2015)
By this point you should have confidence in your knowledge of the fundamentals of JavaScript and be able to build some applications in the browser at least.
But the JavaScript you’re writing is probably the ES5 version of the language, and there is nothing wrong with that, but the community is moving on to the next version of JavaScript in order to take advantage of the latest features.
ES6 is not just the future of JavaScript any more, it’s the now, and you need to know how to use it.
ES6 is also referred to officially as ES2015, but most people still call it ES6. In case you’re wondering ES stands for ECMAScript. ECMA is the standards body that standardises ECMAScript, which is then implemented as JavaScript by the JavaScript runtimes.
The latest version of Chrome at the time of writing supports over 90% of the ES6 spec and will soon cover 100% of it.
You can see the current support for new JavaScript features at kangax.github.io.
For a quick overview on how to write and use all of the latest important ES6 features go through this Learn ES2015 page on the Babel website.
4. Understand the Tooling
There are plenty of choices out there when it comes to tooling for JavaScript, but if you only learn about one tool right now, make it Babel.
Babel is what’s called a transpiler. A transpiler is just a tool that converts the source code of one language into another. Essentially, it translates your code and compiles into another language.
Transpilers have been around in web development for a while. If you’ve heard of a language called CoffeeScript, the tool that you run to convert your CoffeeScript into JavaScript is the transpiler.
Babel is a transpiler that will translate your ES6 code into ES5 compatible code for you.
This means you can write ES6 compliant JavaScript and run Babel on those ES6 files to output a file that would be compatible with older browsers.
It doesn’t support 100% of ES6 since some features can only be implemented in the language itself, but it does support about 74% of ES6 at the time of writing, so you’re unlikely to run into any problems using it if you need to support older runtimes.
So try installing Babel and start using some of the ES6 features, like arrow functions (fat arrows), if you haven’t already.
Other tools you should look into include NPM, Grunt, Gulp, Browserify and Webpack.
You will have no choice but to learn about NPM since it’s the canonical package manager for Node.js and by extension most of the JavaScript ecosystem.
5. Learn about Unit Testing
Unit testing can be a difficult thing to get into, but if you do it will give you confidence in your code base because you know that you have creating automatic tests for the functionality of your application.
It may not be immediately obvious as to why unit testing is so important, but later on in a project you will start to see that you’re saved by your unit tests time and time again; especially when it comes to refactoring.
There isn’t much else to say about unit testing, other than that you should do it.
There are plenty of unit test frameworks out there to learn about, but I suggest looking into Jasmine, Mocha or Tape to begin with.
6. Get into the Community
By this point, assuming you understood all of the previous material and have been practising with it, you should be able to build applications with confidence.
Next, I would suggest reinforcing everything you’ve learnt up until this point and listening to, or reading, the opinions and articles of prominent figures in the JavaScript community.
A great way to keep up on what’s going on with JavaScript and the surrounding ecosystem is to try following these people on Twitter. For example there is @BrendanEich (Creator of JavaScript), @getify (Kyle Simpson), @jhusain (Jafar Husain), @_ericelliott (Eric Elliott) and @drboolean (Brian Lonsdorf) to name a few.
Eric Elliot also has a list of “Essential JavaScript Links” on his GitHub that I would suggest you try to get through.
The End
And so finally, we come to the end of our journey. Or at least, the end of the beginning, ready to move on to the beginning of the middle… or something like that. Whatever the case may be we can never stop learning, so try to enjoy the journey.
7. Choose a Path
Considering everything you have learnt up until this point, you should have more than enough knowledge to start writing some interesting applications in a well structured maintainable way.
Unfortunately this is where a step by step guide breaks down a bit. After building a solid foundation with the language and reading articles or watching conference videos you’ll find yourself at a fork in the road.
Now is the time to decide for yourself what you want to learn next.
This isn’t always an easy decision, but the foundations of JavaScript will serve you well regardless of which path you choose.
If you want to get into server-side programming then you should learn about Node.js. Now more than ever is a great time to learn about Node. v6.0.0 of the runtime which supports 96% of the ES6 features with the --harmony flag and about 92% without it was just released and you can see Node’s support for new features at node.green.
The most popular server-side framework for building applications is currently Express, but there are plenty of other good frameworks out there to try, like Hapi.
Or maybe you want to build larger interactive single page applications (SPAs) on the client-side in the browser. In order to do that you might decide you want to learn more about React from the Facebook team, or Angular 2 from the team at Google.
If you decide to go with Angular 2 then you might also try to learn more about TypeScript, which is a superset of JavaScript that supports type checking before it’s transpiled into ES5 or ES6 compatible JavaScript. This is because Angular 2 itself is written in TypeScript and most of the tutorials or guides about it assume TypeScript is the language you will use.
Whichever path you decide to take you will probably eventually end up learning about all of these things. Especially now that Universal JavaScript (sometimes also called Isomorphic JavaScript) is starting to make more of an appearance.
In case you’re wondering, Universal JavaScript is JavaScript that can be rendered on the server using Node.js as well as in the browser on the client-side. This means you can now build SPAs in JavaScript but the initial page load can still be rendered on the server so that search engines like Google can index it without having to run the JavaScript itself. It’s supported by both React and Angular 2 in addition to many other frameworks.
If you go with React then you may enjoy learning about Cycle.js too.
Or maybe you want to skip working with the browser and the server and work with the mobile or desktop platform instead.
If you want to write programs for the desktop then perhaps you should try looking into Electron, a framework built by the people at GitHub for the purpose of building cross-platform JavaScript applications. The Atom editor is built on top of the Electron framework, which is what it was originally created for.
On the other hand if you would like to get more into mobile application development for iOS or Android you could look into something like React Native, a framework that allows you to build native apps using React.
After that you might want to learn more about functional programming using popular libraries like Ramda, in which case I would suggest reading Professor Frisby’s Mostly Adequate Guide to Functional Programming by Brian Lonsdorf. I would also recommend watching his videos on YouTube on the subject too.
You can also try learning more about reactive programming using another popular library like RxJS. In addition, have a read through The introduction to Reactive Programming you’ve been missing by André Staltz on GitHub.
Whatever path you choose, it’s up to you at this point. I encourage you to try learning about all of it, but keep in mind that JavaScript and it’s ecosystem are evolving at a rapid pace, so even if you learn some of these frameworks or libraries they may not be around later.
If you have the time or money to spare you may also find it worthwhile to try a few video courses on Front End Masters or Egghead.io.
Egghead.io even has about half of their videos available to watch for free if you can’t spare the money.
All I can say at this point is, good luck!