Learning JavaScript
This is by no means a ‘definitive’ guide or a ‘correct’ guide. The correct way to learn a language and all of it’s quirks and good parts is entirely subjective. However, there are some logical places to start, and to further progress to.
JavaScript
First up, JavaScript. Learn JavaScript. Not jQuery, not MooTools, not some other library or even framework. Just the language. It’s functional, prototype based, event driven and whatever else programming - it’s important to understand the quirks and odd parts of the language, as well as all of it’s wonderful and elegant parts. JavaScript is a lovely language to work with, and it’s future is looking even brighter with the arrival of ECMAScript.next around the corner..
(I’ve tried to keep the resources linked to free / open-source so that everyone can dive in to and enjoy the stuff here.)
Resources
Books
There are some fantastic free books for learning JavaScript.
Once you’ve read one or both of those (maybe read JavaScript: The Good Parts or something else instead, who knows!), you’ll have a really good knowledge of the language as a whole.
At this point I’d recommend delving a little deeper in to the more complex parts of the language - or at least acknowledging that there’s a bit more to come back to. These are the bits that I find really important:
Scope (variable scope, execution contexts etc) and Hoisting
Every language has it’s own scope rules etc, it’s important to know how JavaScript’s work. Hoisting is also essential to understand (or else you might wonder why you can’t call a function, that you’re sure you should be able to etc). Seriously, hoisting is overlooked sometimes, but it’s important.
What you need to know about JavaScript Scope
JavaScript scoping and hoisting
Closures
Closures took me a while to grok (sometimes I still wonder if I fully understand them, especially when it comes down to memory leaks etc), and are seemingly complicated on the surface. However, they are everywhere, and a fundamental part of JavaScript development. Basically, they are a very clever way of referencing variables etc that were originally part of a different scope. Due to the way JavaScript scoping works, an inner function has access to it’s parent functions scope (and therefore all of its variables etc), say you return this inner function, it will still have access to things from the parent scope. That’s my pathetic explanation, these will help much more:
Use cases for JavaScript closures
What is a closure in JavaScript
Anonymous functions and immediately-invoked function expressions
Immediately-invoked function expressions are commonly used in JavaScript, they’re a nice way of creating a new scope to avoid global pollution etc. They’re all over the place, but jQuery plugins make common use of them if you’d like to see them in the wild.
Immediately-invoked function expression
Design Patterns
Learning JavaScript design patterns e-book
Understanding design patterns in JavaScript
’This’
It’s important to understand exactly what ‘this’ is, and in what context (otherwise you can end up headbutting things when the context changes within an event handler, or something similar). But, it’s also important to understand that you can change the context of ‘this’ with things like call and apply. ‘this’ is at your mercy ;)
Better JavaScript - what is this?
Changing The Execution Context Of JavaScript Functions Using Call() And Apply()
Prototypes and prototypal inheritance
JavaScript isn’t a classical OOP language, it doesn’t have classes or anything like that. However, it is a prototype based language, and prototypes are beautiful once understood. Whilst you may not personally be creating your own function constructors, prototypes or instantiating anything with the ‘new’ keyword it’s still imperative to know this, in my opinion, as it’s critical to how JavaScript works ‘under the hood’ and prototypes are everywhere (array prototype, string prototype…).
Understanding prototypes in JavaScript
Prototypes and Inheritance in JavaScript
Introduction to Object-Oriented JavaScript
‘OOJS’ (a random find, but an enjoyable read)
Function declarations VS Function expressions
There is a difference (relates back to hoisting too).
What is the difference between a function expression vs declaration in Javascript?
Memory leaks and garbage collection
There’s a bit of a misconception that because JavaScript is a garbage collected (rather than you allocating and de-allocating memory manually) language, you need not pay attention to memory and how it works. This really isn’t true, you need to be aware that JavaScript ‘tracks’ it’s memory usage via references - when something no longer has a single reference to it, it can be cleaned up. Things like event handlers can easily cause a memory leak if not cleaned up properly. It’s important that things in your code that need them have an exit strategy. I tend to opt for a simple destroy() method, it’ll unbind necessary event handlers, null out things it needs to etc (even better when you can add these things in to a common prototype…). Be aware that traditional ‘circular references’ are handled very well by modern browsers, this should only really bother you in IE7 and below.
Understand memory leaks in JavaScript applications
High-Performance, Garbage-Collector-Friendly Code
Managing Memory in Windows Store Apps
jQuery
jQuery is a library that makes it a breeze to work with the DOM, perform AJAX requests and all sorts of other things.
It’s nothing but good old vanilla JavaScript under the hood, don’t think you need jQuery for everything, use it where it aids you.
Resources
books
Backbone.js
Now, once you’ve been working with JavaScript and jQuery (or whatever combination of libraries) for a while, you’ll start to crave structure, maintainability, state management and lots of other things that stop you ending up with a spaghetti code mess.
It’s not that you can’t achieve well structured, awesome code without a framework - it’s not that at all, it’s just that it’s a bit easier when you’re following tried and tested methods / patterns etc. In this case there’s a bunch of MV* frameworks at your beck and call - Backbone, Ember, Angular, Spine and so on. These give you the things you need to get the job done - models, views, controllers, routers, views etc.
The only reason I’ve named this section Backbone.js is it’s the one I work with the most, and felt I could link to the best resources on. The others are equally great.
Resources
Books
Backbone.js memory management
Backbone.js has recently added some really handy methods for aiding memory management - listenTo() and stopListening(). However, it’s still important to understand what’s going on with these methods, how Backbone.js handles event bindings and how things worked “in a time long ago”. They’re not magic save alls (unfortunately), you still need to know where you’re referencing things.
Backbone.js And JavaScript Garbage Collection
Zombies! RUN! (Managing Page Transitions In Backbone Apps)
Really with frameworks, I just recommend playing around. Some are very opinionated - Ember.js for example, some just give you minimal building blocks - Backbone.js. There’s no right or wrong really. Should views and models have direct references to each other? Or should they communicate purely via an Event Aggregator? Both are totally fine, it depends on what you need to build, and what it needs to do.
I hope this helps somebody in the pursuit of learning JavaScript. And remember, JavaScript is everywhere. Fancy some server action? You’ve got Node.js, fancy writing a Windows Store App? It’s cool, you can do that with JavaScript. Also, dig right in to source code. I’ve learnt a bunch reading through code behind things like Backbone.js.