Biting the Bullet and Actually Learning JavaScript

Colorado Reed

PhD Student at Berkeley

Metacademy creator

@obphious

You learned JavaScript in 21 days. Maybe 21 hours. Maybe 21 minutes. You completed a handful of online tutorials and even read some of John Resig's blog posts. But for you, writing JavaScript is 15% coding and 85% Googling how to accomplish every task.

How can you move beyond this point?The vicious JavaScript circle.

I've been working in JavaScript for about 4 years, and the first two years consisted of Googling my way through every problem. The language was a nuisance, and my mindset was always "oh, just make this thing work so I can get back to my real work and forget about this stupid language." The problem was that I had half-heatedly learned the language: randomly reading blog posts, completing code academy snippets, and occasionally using StackOverflow to "understand" the tricky parts of prototypal inheritance, hoisting, and closures. I expected that my Java background would mostly transfer. It didn't.

But why bother really learning JavaScript? It's a horrible, poorly designed language, right? As it turns out, this is pretty far from the truth. Granted, it has some quirks, but as Douglas Crockford points out in the presentation below, JavaScript is actually an incredibly powerful, ubiquitous, write-once-run-anywhere language. He describes it as "the world's most important programming language," and gives a strong rationale for this perspective.

So here was my turning point of enlightenment: I started making a conscious effort to learn JavaScript away from my computer: I went hard copy. I spent 30 minutes each day reading and reviewing the language itself. Stepping away from my computer helped me focus on learning the language paradigms, rather than spending my effort copy-n-pasting "did you know" tidbits into an online JavaScript interpreter. When reading, if I wanted to try something on the computer, I placed a pink post-it on the relevant page and removed it once I had computerized the idea. If I had the time, I spent the next 30 minutes on my computer working through the pink post-its or testing out new ideas.

I'm certainly not claiming that textbooks are a panacea, but consciously dividing my time between "offline" study and "online" implementation helped me understand how to think in JavaScript, not defer my thinking to Google and StackOverflow — plus I couldn't flash to gmail every time I felt stuck. If you're having trouble moving beyond the GoogleOverflow crutches, consider trying this approach for a few days. Also, whether you beg, borrow, print, pirate, or buy the textbook, make sure you have to invest something in obtaining your learning resources: even if it's just printing off parts of a free online textbook; I've found that a small investment is exponentially correlated with my learning drive.

Here's my shortlist of JavaScript books and resources that substantially changed my perspective of the language and helped me move away from the GoogleOverflow mindset. I based this selection on my own experience, and you should learn in whatever way works best for you. But whatever you do, don't fall into the common trap of trying to avoid learning JavaScript when you're learning JavaScript, e.g. by starting with jQuery, node.js, a JS framework (e.g. Angular), Meteor, or CoffeeScript. If you want to learn JavaScript, then you have to learn JavaScript.

Level 0: Where to even begin?

If you're new to programming, or don't have any experience with HTML, CSS, and/or JavaScript: don't start with a textbook. Use them once you're ready to really deepen your knowledge and capabilities. Depending on your goals, starting with CS classes at Coursera, EdX, or any other structured platform is a good idea. I've had several non-CS friends use Treehouse to get started in web development, and from what I've heard, it's much more immediately applicable than most intro-to-CS MOOCs. The above link is a promotion I found that gives you a free month with Treehouse, which should give you enough time to decide whether their platform meshes with your learning style. During this time, though, try out other learning alternatives; don't commit to the wrong pedagogy early on.

Level 1: Language Structure and Fundamentals

Don't cheat your foundational understanding of JavaScript. Sure, you can build a responsive, ajax-magical super flashy website by copy-n-pasting code snippets from Grandpa Google. You can even impress non-programmers this way, but it won't help you really understand the language or build something innovative. Professional JavaScript for Web Developers is a large book, but it's a really fast read, and it is much more digestible than "the definitive guide" or "the good parts".

Expectations: You'll understand JS syntax, types, relationship between objects & functions & closures, scope [issues], inheritance, design patterns, browser quirks, and some maintainable coding styles and good practices.

Necessary Background: A bit of coding experience (you should be deadly with a for-loop), CSS and HTML familiarity, and a touch of JavaScript knowledge will go a long way.

How to Read This Book: Keep a spiral notebook nearby when reading this book. The first page of this notebook should be a "Definitions" page, where you can write down one-sentence definitions of new syntax and vocabulary terms. You'll want to eventually transfer these terms into Anki and consistently review them (this will make you a fast coder). Read this book away from your computer, and when you want to fiddle with an idea or try something out for yourself, avoid the immediate impulse to grab the keyboard, and instead, mark the page with a post-it (maybe a pink one), and then come back to it when you're finished with offline mode. This general advice applies to all books mentioned in this post.

Key Chapters: It's a big book, but a fast read. Plus, every chapter is not immediately essential. At the bare minimum: read Chapters 1-4, skim chapters 5 & 6 (don't worry about memorizing all inheritance patterns, just understand why OO-style inheritance is tricky, and at least have a good understanding of one of the final 3 inheritance types), read chapter 7, then read chapter 24 (this is a brilliant chapter).

Alternative: I've heard good things about Eloquent JavaScript, though I haven't read it, so I can't personally recommend it, but you may want to check it out.

Level 2: Tricks-of-the-trade

Once you get a good feel for the language, you'll want to learn some common design patterns and tricks for writing maintainable code. This is especially important if you plan on working with other people, creating big projects, or working on projects for a longer than one day. Of the various blog posts and books I've read on this subject, nothing compares to Resig and Bibeault's Secrets of the JavaScript Ninja. It's short, readable, and you can directly start applying these techniques to your projects.

Expectations: You'll become much more familiar testing practices, debugging programs, thinking about code performance (when it's appropriate!), and cross-browser considerations.

Necessary Background: You should be reasonably comfortable with JavaScript. Here's some litmus tests:

Key Chapters: It's a pretty small book and a fast read. The key chapters are 1-6, 12, and 14/15. Chapters 7 and 12 should also be conferred when necessary.

Alternative: I've also heard good things about JavaScript Allonge as an intermediate JS endeavor, though I haven't read it, so I can't comment on it.

Level 3: Diversification (frameworks)

Backbone.js Tutorial - Beginners

By this point, you should feel very comfortable sketching out JavaScript programs using paper-and-pencil, i.e. you shouldn't be too Google-reliant. Now is a good point to learn a JavaScript framework (I see a lot of people trying to learn frameworks before learning JavaScript, avoid doing this). I won't shed any ink debating the various frameworks, there's plenty of that already floating around the web. Backbone is a great starting point for thinking in terms of MV-whatever design patterns — it's less opinionated than alternative frameworks, which means you'll have to do extra work at first but won't constantly wonder "why the hell doesn't this code work as expected." Watch [some of] the above video, and if it resonates with your learning goals, dive into the donation-based ebook that gives all royalties to charity:

Expectations: You'll be able to write well-structured JavaScript applications using Backbone.js.

Necessary Background:You should first feel comfortable writing JS applications without a framework. If you're confused by why you should use a framework, you're probably not ready for this step.

Key Chapters It's less than 60 pages. Every example and discussion is important. Read it all =) and build small demo apps to test new concepts. Oh, and if you don't builda TODO list at some point, you're doing it wrong.

Alternatively, several of my colleagues suggested I learn AngularJS, and I'm about 100 pages into the following book (it's great so far, but I can't fully endorse it yet): Pro AngularJS

Level 4: Diversification (Node.js)

Okay, so you feel good with JavaScript and you're dangerous with a framework or two. Now what? At this point, I'm sure you've heard plenty about Node.js. Once you've nailed down JavaScript in the browser, expanding your skill set to the server will let you build entire web-scale applications or contribute to existing projects. Node.js in Action is a fantastic book: the writing is clear, the examples are straightforward and [mostly] illuminate particular aspects of node. One problem, however, is that the Express examples in the text do not reflect the latest version of Express — this caused a bit of initial confusion since Node and Express give pretty cryptic error messages. You've been warned =-)

Expectations: You'll be able to write non-trivial and well-structured node.js servers, as well as interface with the file system and work fluently with data streams.

Necessary Background: It's very helpful to be familiar with browser-based JavaScript and ideally at least one JS framework, but it's also possible to pick up node before learning browser JS.

Key Chapters: Chapters 1-7 will form the core of your Node understanding. You should tackle the remaining chapters as you need them.

Extra: When trying to understand data streams, check out John Resig's excellent http://nodestreams.com/

Level 42: Let me know what you think

Feel free to shoot me a tweet at @obphious. Or, if you have any private questions, criticisms, or would like to grab coffee (I'm in Berkeley) feel free to contact me at colorado %-AT-% berkeley %-DOT-% edu. Or, if you'd like to read more of tech/programming/education type posts, you can subscribe to receive very occasional updates.