JavaScript libraries and tools: what are the bare essentials?

question.md

Question: If a newcomer to JavaScript asked you for essential libraries and tools, what would you tell them? You don’t want to overwhelm them with too many suggestions!

Focus: language-related functionality (as opposed to browser-related functionality).

• Libraries: including, say, Underscore.js and promises libraries, but excluding jQuery et al.
• Tools: package managers, build tools, unit test tools, etc.
  • Less important: editors, IDEs. Rationale: it’s fairly obvious that you need them. There are other tools that people might not even know that they need.

For a newcomer

• an EcmaScript 5 polyfill library (https://github.com/kriskowal/es5-shim seems to do the job) - since they are starting now, they should learn EcmaScript 5 directly
• Chrome + Inspector and some links to learn how to get the best out of them
• Sublime Text 2 with a list of recommended plugins (SublimeCodeIntel and JSHint in that list),
• links to MDN to get them started (to avoid google taking them on that w3 schools site)

Then as WebReflection said, the rest depends on what they need to do

Tools

I think a newcomer can benefit enormously by looking at code posted on sites like jsFiddle. Couple that with live reloading and real-time jsHinting and you have a pretty good environment to learn and experiment. I have tried to create an environment like that on Plunker: http://beta.plnkr.co/edit/gist:1986619?p=preview

Language functionality

For a true newcomer, I think several things are necessary:

• Understanding of asynchronous programming and the specific paradigms for attacking this in javascript (callbacks vs. promises)
• Understanding chained APIs vs. functional APIs
• Understanding when Javascript code will be run (onload, inline, bottom of body, etc..) and the consequences of the timing on the availability of the DOM
• Understanding how CSS selectors work in order to identify and act on different DOM elements.
• Understanding what can be done with elements and how to effect changes

Once these items are addressed, a newcomer could be introduced to different frameworks that aim to address one or more of these elements, like:

• jQuery provides a Promise API, onload callbacks, a selector engine and chained API
• Underscore gives algorithms and shortcuts to common, lower-level requirements
• Etc...