Image by Kevin Harber
- run a web server
- test a webpage
- program your Arduino
- render 3D graphics
- write an app for your phone
- build a desktop app
- control a robot
- play with IoT
Some friends asked me how to get started with JS. Well, I learned JS not so long ago and I talked with some dev-people about their experience of learning JS. Based on that I will describe what in my opinion seems to be a good approach.
I will assume that you are not a complete newbie to programming and you know what a for loop is. This post will cover the most common use case for learning JS - writing web apps. When you learn the language you can try other things from the list above.
The good news - there is a lot of free content on how to learn JS and you can make use of that.
For starters, you need to learn the basics. It doesn’t really matter how. What matters is that you need a solid foundation. And you don’t start with jQuery or React.
Some people recommend books:
- Head First HTML5 Programming - focused on JS for web development
- You Don’t Know JS - this one is a popular recommendation lately
Some people don’t like books and recommend online courses instead:
- Code School - probably the best one. Why? It’s well structured so you are learning it step by step, in a logical order, finishing tasks in web editor. I took the course myself, so that’s why I’m recommending it.
- Code Academy
- Frontend Masters - there is a course or two for beginners. An advantage - it features some recent JS superstars.
Taking an online course is an option if you are willing to pay. What’s nice about online courses is that they are interactive and they can get you to the point where you can say “I know some handy JS tricks now, let’s see what I can do with those”.
Some people don’t like neither online courses nor books. They recommend watching The Ultimate JS Superstar - Douglas Crockford.
In my opinion it’s worth watching to complement your knowledge, but not a good thing for beginners.
The Good Parts
At this point, you should feel that you know what JS is about and feel confident about using it. You should also have the feeling that JS is somehow broken but you can’t say what’s wrong exactly.
JS can be strange sometimes. Its dynamic nature can lead to the funniest bugs you’ll ever encounter.
js love <3 pic.twitter.com/TAFBVq4cEQ— Krzysztof Jendrzyca (@kjendrzyca) February 19, 2015
JS has some awful parts that are best avoided. This book describes most of them and provides the distilled version of the language:
If you want to be a serious JS developer you should read this book. The benefits of doing that:
- you can call yourself a serious JS developer because every serious developer has read The Good Parts
- you will become aware of the bad parts
- you will know how to avoid them
The same guy who wrote this book is an author of the first widely-used linter (aka static code analysis tool) for JS - JSLint. Later it was replaced by JSHint and now we are using ESLint, but more about that later.
Some of the bad parts were fixed by the new version of JS (the previous one is called ES5, the new one ES2015) and we’ll come to that in a minute, too.
The Ongoing Task Of Mastering JS
This is where things become serious. I think learning JS is a never-ending story. You know the good parts and the bad ones, but there is always something new waiting ahead. Below are the things you need to learn simultaneously to fully grasp the topic.
Design patterns are useful for programmers. They help with communication and with solving common programming problems. But design patterns are a concept. The implementation may differ depending on what language you are using.
The cool thing about JS is that you can do one thing in a thousand different ways. The same goes for applying design patterns. To stay sane I would recommend picking one way of doing things and stick to it until you or someone else discovers how to do it better (hardcore JS people reading this are laughing because they already know how fast the ecosystem is changing).
Eric Elliot wrote two great posts about the pillars of JS:
Deep knowledge about those two will help you write better JS code. Without this knowledge, you are like a child wandering in the fog.
Libraries and Frameworks
You don’t want to do things from scratch. Your employer doesn’t want you to. To provide value ASAP you need tools.
Node comes with a package manager called NPM. NPM registry seems to be the largest ecosystem of open source libraries - just as they say on their website. What they don’t say is that a lot of those libraries are just crap and you should avoid installing too much of them. However, there is a lot of great ones that will solve most problems that can come to your mind. Just don’t rely on this power too much. If you can write something in 8 lines, do it and put it in the
utils directory instead of downloading a library. You don’t want a left-pad incident in your life.
If you want to write a frontend app there is also a lot of options: jQuery is a good thing to know. Especially if you are coding websites. It’s used for animations, galleries, form’s validation, making AJAX request and a ton more. Some people say it can solve every problem there is.
jQuery is not enough for web applications. For that the most popular pick right now is React and its ecosystem. It was designed by Facebook to deal with complex web applications but it’s cool for the small ones too. I’m using it because of its simplicity. It focuses on doing one thing well and it can be adjusted to your needs. Redux plays well with it.
There is also Ember, Backbone, Angular 1 and 2, Vue (this is my second favorite), Elm, Aurelia, Cycle, Polymer, Meteor, Mithril and the list goes on and on.
I’ve been using Angular 1 for some time but it kicked my butt so many times that I decided it’s not worth my efforts.
For modern frontend you’ll also need:
- a way to download the libraries, the one you should go for is NPM, (or super-fresh Yarn) there is also Bower, but it’s slowly dying
- a way to package the app: Webpack (more swag), Browserify (less swag), Rollup (total swag, but not yet as popular as the previous two) or SystemJS which also has its own package manager - jspm
- a way to test your app: the most popular test runners are Mocha, Jasmine, and tape, all of them are cool and you really need to judge yourself which one to use
- linter (aka static analysis tool): this one can help with a lot of problems caused by JS “bad parts”, right now most people are using ESLint which is the most powerful one.
Modern JS - ES201x
Most of the really bad parts were fixed in the new version of JS - ES2015, which is still often called ES6 - if you want to know why and what’s the full story click here. Introduced fixes should be your main reason to use it. You will be able to write more readable and robust code.
ES2015 is pretty mainstream right now. Most of the examples for modern libraries are written in ES2015. It’s backward compatible so all the ES5 examples from the books mentioned above work with the new version.
Browser support is getting better and better (Chrome 54 supports 97% of new functionalities) but if you want to be sure it will work on older browsers you should use babel. It transpiles the code from ES2015 to ES5 that is supported by all browsers.
Here is the compatibility table for browsers: http://kangax.github.io/compat-table/es6/
The current version of Node (7.0.0) supports 99% of ES2015 features - no need for transpiling at this point.
Here is the compatibility table for Node: http://node.green/
You should also keep an eye for the next ES201x releases.
In my opinion, the solution is to have a solid understanding of the basics and foundations. With that knowledge the fatigue disappears and it’s just another framework/library/convention to learn. A part of our job.
Of course, you can pick just one solution that suits your needs and use it everywhere. That’s also a way. Just remember not to become religious about the tools you’ve chosen.
- avoid w3schools.com, if you want correctness use MDN
- visit http://www.2ality.com/ if you are looking for “in-depth” blog posts about JS
- know your tools, it will spare you the frustration (for starters I recommend understanding Chrome DevTools)