Training Tracks: How to become amazing at JavaScript

20 March 2013, by

previous article in series

Here’s Rowan‘s Training Track on JavaScript: we hope you find it useful! 

(“Training Tracks” are one strand of our in-house training – see here for an explanation of what a Training Track is.)

Level 1 – JavaScript basics

Website – jQuery Fundamentals Chapter 2

jQuery is a popular front-end library for browsers, used to ease DOM manipulation and abstract away browser implementation differences. jQuery Fundamentals is an ‘open source’ book covering all of jQuery, but it starts with a nice, brief introduction to JavaScript as a language.

Website – Codeacademy

The Codecademy JavaScript fundamentals track is an interactive series of lessons and challenges, aimed mostly at those just starting to program. Sections 1-5, 7, 10-11 correspond to the concepts in Level 1. If you’re already an experienced programmer, you may find them a little slow – feel free to skim or skip them entirely if you don’t think you’re learning anything.

Level 2 – JavaScript Not-Quite-So-Basics

Website: JavaScript Garden

JavaScript Garden is a single fairly long page (with some nav if required) that contains only Good Stuff that you’ll be glad you knew.

Book: JavaScript – The Definitive Guide (David Flanagan)

‘The Definitive Guide’ is a seriously comprehensive reference book – in fact, it’s so iconic and ubiquitous that Mozilla’s Java implementation of their JavaScript engine is called Rhino, in reference to the book’s front cover.

As such, it’s probably best not to try and read it all cover-to-cover. Below are a list of sections covering some not-quite-so-basic topics that are required for a solid grounding in JavaScript.

  • Section 8.8 – Function Scope and Closures
  • Chapter 9 – Classes, Constructors, and Prototypes. (Note that Section 9.3 Simulating Classes in JavaScript is slightly controversial – some people think emulating classical inheritance in JavaScript is missing the point. It’s still worth reading the chapter, though – you’ll come across this style often.)
  • Chapter 11 – Pattern Matching with Regular Expressions. (Regular expressions are probably complicated enough to warrant their own track, so if you’re not familiar with them, you may want to find further resources. If you are familiar with them, pay particular attention to Sections 11.1.7, 11.2 and 11.3.)

Level 3 – Book: JavaScript: The Good Parts (Douglas Crockford)

Douglas Crockford is heavily involved in the development of the JavaScript language, tools and community – he is credited with the widespread adoption of JSON (JavaScript Object Notation – not covered in this track but see bonus material links at the end, as it’s best addressed in a web context).

He also created JSLint and JSMin, and he is generally considered to know what he’s talking about. Note, however, that some people consider him overly dogmatic and zealous – so take his book with a pinch of pragmatic salt.

JavaScript: The Good Parts is a distilling of his experience with JavaScript, guiding programmers to use a subset of JavaScript that he feels is both safe and powerful. Probably the most interesting chapter is Chapter 5, concerning inheritance (both ‘pseudoclassical’ and otherwise), but the whole book is worth a read, and it’s not particularly long.

Eloquent Javascript also comes well-recommended – it has a more tutorial-like nature, and if you read the HTML-version, you can edit and run the code in your browser as you read.

Level 4 – CoffeeScript

CoffeeScript is a Ruby-inspired language that compiles down to (JSLint-passing, fast-running) JavaScript. It describes itself as “an attempt to expose the good parts of JavaScript in a simple way,” and is really just a whole mountain of syntactic sugar. It’s usually possible to integrate CoffeeScript seamlessly into a build process, so that you write in CoffeeScript but the output is JavaScript, and everything else “just works”. Note that it supports both class and prototype based inheritance (and though it might upset Douglas Crockford, the class syntax does look very tempting indeed).

The CoffeeScript site has a comprehensive and easy-to-follow language reference, full of (interactive, runnable) examples. It also recommends a bunch of resources.

Level 5 – Beyond…

The previous levels should have provided a thorough introduction to the language of JavaScript, but to go further, it’s probably necessary to stop being so abstract and start learning about your target environment (e.g. jQuery, or Node). Look for good training resources for these kinds of topics, or wait for us to produce them!

In the meantime, the following might help:

  • jQuery
  • Frameworks for client-side (browser) code:
    • RequireJS – Dependency injection framework, provides much-needed scoping and code organisation for JS projects.
    • Knockout.js – Model-View-View Model pattern for JavaScript UIs. Allows dynamically updating declarative data binding
    • Backbone.js – Provides a flexible (but seemingly reasonably heavyweight) MVC structure, apparently with a skew towards consuming data from a RESTful service
    • Spine – Another MVC framework, inspired by Backbone.js, and supposedly with a lighter touch. Written in CofeeScript
    • More generally TodoMvc is a wonderful website (and github codebase) that presents the same simple app written in pretty much every JS library/framework under the sun. It’s a good way to compare them and to find example code – clone the github repo and dive in.
  • Node.js
    • CommonJS – a set of standards and libraries that Node.js is build on
    • – home page for Node.js, including some (fairly unstructured) documentation
    • Express.js – a Node.js web framework, using Jade as a templating engine by default
  • Rhino, a Java implementation of JavaScript suitable for embedding into scriptable apps.#

Congratulations, you are now an amazing JavaScript developer!

Tags: , ,

Categories: Technical


Leave a Reply

* Mandatory fields

− 3 = four

Submit Comment