We use a lot of nicely written JavaScript in our web application. If you need to write new features, fix bugs or help refactor the code you should learn how we approach the JavaScript development. Below is the list of learning resources to get you up to speed. If you are a beginner you can learn everything you need to know by finishing each resource. If you are a seasoned developer you still might find something useful to fill knowledge gaps.
Install Nodejs or io.js, I suggest using Node Version Manager - it allows installing and using multiple versions of Node on the same machine.
Get comfortable running a piece of JavaScript using Node either through REPL or by running a file. This will speed up the experimentation and learning process.
Read the following books from this list. While reading the books make sure to run small examples through the Node to see them in action.
- JavaScript patterns
- Effective JavaScript
- Async JavaScript
Subscribe to "A drip of JavaScript" email newsletter and bookmark a few websites from JavaScript learning resources
In addition to built-in methods, we use a lot of utilities from two libraries lodash and Ramda.
Our programming style is leaning heavily towards the functional paradigm. A good introduction to the JavaScript functional approach is Functional Programming presentation by Scott Sauyet (the author of Ramda).
JavaScript is very dynamic language and a lot of things can go wrong at runtime. We defend against the unexpected inputs using Paranoid coding style preferring to fail early and report the error to the real time crash monitoring system.
We use gulp to "build" our source code into bundles. One needs to understand at least the principle behind it.
Our front end framework is AngularJS. There are lots of learning resources. I suggest the following three:
- Read and do exercises from Just Enough Angular for Designers
- Watch "Introduction to Angular.js in 50 examples" part 1 and part 2. This is very fast paced overview of the main features.
- Look for good angular tutorials in the list at AngularJS-Learning.
- Buy and read slowly the ebook ng-book playing with the included examples in the browser. We run a book club at work based on this book reading and discussing a chapter every week.
- Briefly look through the additional AngularJs and JavaScript nuggets. They might be useful at some point.
The JavaScript code controls the browser, but underneath it all there is document object model (DOM). Read the DOM Enlightenment book by Cody Lindley to learn how the browser sees the document at runtime.
The way the website looks is controlled by cascading style sheets (CSS). We do not use CSS directly, instead compiling either SASS or LESS into CSS.
We use the layout helpers and widgets from a very popular bootstrap library.
Follow good front end developers on twitter. Here are a couple people to start following:
Learn how to use promises to handle asynchronous computations. More information about promises available in
- We have a problem with promises
- I have lots of blog posts about promises, mostly advanced stuff.
I also suggest looking at two promise libraries:
Q has a very rich API and its lightweight version is included with AngularJS.
Bluebird is fast and includes multiple utility methods for simple chaining / running promises in parallel.
Testing
- We unit test our code using Jasmine testing framework that we run using Karma test runner. There are other alternatives of course.
- Read the 1, 2, 3, tested to start with unit testing AngularJs code using our own library ng-describe
Charts
The charts we use the excellent D3 library. To learn the D3 principles read the short online book Interactive Data Visualization.
We are using React library for some of our charting code, see how to start with React
Learning
- If you ever want to see how to do a certain thing, search our code base for words "GOOD EXAMPLE". This finds the code we thought was good enough to emulate and learn from.
Finally, please read my blog - I explain in detail a lot of decisions we made in our code through blog posts.
Outside links
- Essential JavaScript links - read / watch as many as possible, very good collection for learning JS.
- A Baseline for Front-End [JS] Developers: 2015
- JavaScript the right way
- How to Become a Great JavaScript Developer