If you decide to acknowledge all possible sources explaining "the best way of doing something," everything may seem more daunting than it is. I've been in your shoes, and while my journey is not yet complete, I wanted to share an excellent set of links and advice that will help you get immersed in the ecosystem.
The most important thing to keep in mind is that you will have to keep up with the language and the community as they grow.
After getting to know the fundamentals, you can start playing around with a framework. There are a lot of frameworks available, but to make things simpler, I've hand-picked a few popular ones. Not all projects benefit from using a framework, but a good set of tools, best practices, and paradigms will help you jump-start your JS career.
Angular 1 & 2
Angular 1 (also known as AngularJS) has been the most popular framework for a while, and you'll still find a huge community behind it. There are a lot of good tutorials for learning and mastering it. I’ve included Angular 1 because you’ll find it in a lot of legacy projects still in production.
You might have also heard about Angular 2. While it shares the name, it's entirely different from Angular 1. It leverages modern design principles and lessons learned from Angular 1 and other frameworks. It might look complicated at first, but it is certainly worth picking up at some point. You can kick-start your development with a template repository.
Ember is right behind Angular 2. It provides a full solution: a well-defined architecture that you have to follow, a powerful CLI that hides all the complexity from you, and built-in Handlebars helpers. It also implements common standards so you can focus on your app instead of reinventing the wheel. There's also a good amount of add-ons. Getting started with Ember should be straightforward due to its excellent guides.
React is quite specific since it's not a framework. It is missing state management (something that stores your data), and you'll hear its name in conjunction with Redux quite a lot. React is best learned by trying it out. For an easy setup take a look at the create-react-app generator. I'll also mention our state management library of choice - MobX. It’s much easier to start with compared to Redux, and it will help you understand and implement state management in your app with just a few lines of code.
A beginner should also consider Backbone since it provides a full experience which is more bare-bones than others. There are a lot of projects in production that work perfectly with Backbone, so it’s worth picking up and mastering.
I will also mention Vue.js, a framework you'll be hearing more and more about. You'll see almost instantly that its components look a lot like React and have a templating language similar to Angular 1.
Many of these frameworks can be seen live with sample source code on a project called Todo MVC. I recommend it as a starting point so you can get a feel of how the projects are structured.
Understand your tools and use them
Sooner or later you will need a set of tools in order to amp up your development. They range from basic ones like linting tools (ensuring your code is up to par), up to more complex ones, like build systems that prepare your work of art for deployment. The same principle applies here as well - learn the basics before you fully dive in.
Another tool you'll hear a lot about is a package manager called NPM - a registry of libraries and frameworks (both for JS and CSS). Advantages of installing your dependencies (e.g. jQuery) via a package manager instead of just adding them to
<head> are speed and having a better control of your dependencies.
Grunt is a popular tool, but it’s becoming outdated, even though you might still find it used in production. Its strengths were that you had a working build system after just a few lines of code. Compared to some other tools, Grunt is slower and not as versatile.
Webpack is the last one I'm going to mention. It is a very powerful and complex tool, but it also happens to be our favorite. The best way of mastering Webpack is following the official documentation. The way it works is probably too complicated for this text and might warrant a post by itself, but to keep things short - it does a lot out of the box. After getting used to its ways, you will get a robust build system for any target.
Picking up your marbles and moving on
It's critical to stay in touch with the community and keep track of successful projects, so I recommend our #FrontendCookies newsletter that brings you fresh and exciting stuff on a weekly basis.
To recap, here are my recommendations:
- pick an editor that works for you
- start with the basics, but move up from vanilla JS to frameworks as your understanding grows
- try React once you feel you're ready, build a simple app, and then think of adding state management if you need it
- learn and master Webpack since it's here to stay
In attempting to write this comprehensive guide, I’m sure that I left out a bunch of important things. After you skim through all of the links, you'll have to continue investigating on your own. I know that the price for entering this ecosystem may seem a bit steep, but the fruits it bears are sweet and plentiful. For any of you experienced JS devs out there, what recommendations would you have for people getting into JS development?