In the world of web development, you cannot escape Javascript. Every other month there is a new framework, and you find yourself falling behind still stuck with the fundamentals. This post lists awesome resources from the web covering each topic in Javascript that you should know to get a better grasp at the language. The resources are listed in the order in which they should be read for the most comprehensive understanding of Javascript.
This very brief introduction by Mozilla gives you an insight into fundamental programming elements like data types, objects, control structure, functions, arrays, regular expressions, etc.
Asynchronous Programming
Asynchronous programming in javascript is a confusing yet important concept. Below are several guides to help you understand asynchronous programming and how javascript evolved to this point:
Exploring JS - Asynchronous Programming: This gives a history of how javascript evolved into asynchronous programming, why it is needed, and what are the different ways in which we can achieve asynchronous programs.
Callback Hell: You'll come to know about it when you read continuation passing style. A tricky thing, as the name suggests. Do not skip this, but of course, make sure you understand the previous concepts well.
Some terms you must be familiar with before going ahead:
DOM. Another useful MDN link about DOM.
Ajax
MVC
Rest APIs
Basics of Modern Web Architecture
There is a really good tutorial on modern web architecture and how to build a modern web app on the Mozilla Developer Network here. It serves as a complete guide for newbies to the modern web architecture, but requires some basic understanding of HTML, CSS and Javascript.
Javascript Frameworks
You probably heard about Javascript because of some new hyped framework. React, angular, node, ember, backbone, and a 1000 others. Each framework solves a different problem, is used for different functionalities, can be used together with other frameworks. It is best to understand what type of frameworks exist in Javascript and distinguishing one framework from the other.
Note: You will often come across the term SPA when reading about latest frameworks. An SPA is a Single Page Application, meaning the entire application can mostly be operated from a single page at the client side. This is a pretty vague description, so read more about what an SPA is from here: SPAs and learn more about their disadvantages. Here's a Stackoverflow discussion on SPAs if you're interested.
Below are some links comparing of some popular javascript frameworks:
10 best javascript frameworks for modern SPAs
Comparison of javascript mv frameworks
Sitepoint: Top javascript frameworks reviewed
Now that you are almost done with the learning part, it's time to put your ideas to implementation starting now. The most effective way of learning anything is by doing, making mistakes, and learning from them. Just like in any language, where reading gives you vocabulary, but you have to practice speaking to be able to use the language to its fullest, in any programming language, you have to write some code to learn the ins and outs of the language. Not convinced? Here's a technical report for you: Learn by Doing.
As for what you should implement, think of any real world problem you can solve using code. Look at existing web apps, and see if there is any particular web app you like, but wanted to be implemented in a certain way. If you want to start small, you can start with a web app for building a todo list application. A todo list is essentially the new "Hello World" program. You can then move onto more heavier projects. If you don't want to build a new app from scratch or can't think of an idea, look for open source projects that are beginner friendly and need your help. All the best for your endeavours!
If you think this post could be further improved, or if you have an interesting article you would like to be added in this post, please feel welcomed to mention them in the comments section.
