A smarter way to learn javascript 

Study, practice, then rest.

If you’re intent on mastering the fundamentals of JavaScript,as opposed to just getting a feel for the language, work with this book and the online exercises in a 15-to-30-minute session, then take a break. Study a chapter for 5 to 10 minutes. Immediately go online at http://www.ASmarterWayToLearn.com/js and code for 10 to 20 minutes, practicing the lesson until you’ve coded everything correctly. Then go for a walk.

Use the largest, most colorful screen available.

This book can be read on small phone
screens and monochrome readers, but you’ll be happier if things appear in color on a
larger screen. I use color as an important teaching tool, so if you’re reading in black-andwhite, you’re sacrificing some of the extra teaching value of a full-color ebook. Colored
elements do show up as a lighter shade on some black-and-white screens, and on those
devices the effect isn’t entirely lost, but full color is better. As for reading on a larger
screen— the book includes more than 2,000 lines of example code. Small screens break
long lines of code into awkward, arbitrary segments, jumbling the formatting. While still
decipherable, the code becomes harder to read. If you don’t have a mobile device that’s
ideal for this book, consider installing the free Kindle reading app on your laptop.

If you’re reading on a mobile device, go horizontal.

For some reason, I resist doing this
on my iPad unless I’m watching a video. But even I, Vern Vertical, put my tablet into
horizontal mode to proof this book. So please: starting with Chapter 1, do yourself a
favor and rotate your tablet, reader, or phone to give yourself a longer line of text. It’ll
help prevent the unpleasant code jumble mentioned above.

Do the coding exercises on a physical keyboard.

A mobile device can be ideal for
reading, but it’s no way to code. Very, very few Web developers would attempt to do
their work on a phone. The same thing goes for learning to code. Theoretically, most of
the interactive exercises could be done on a mobile device. But the idea seems so
perverse that I’ve disabled online practice on tablets, readers, and phones. Read the book
on your mobile device if you like. But practice on your laptop.

If you have an authority problem, try to get over it.

When you start doing the
exercises, you’ll find that I can be a pain about insisting that you get every little detail
right. For example, if you indent a line one space instead of two spaces, the program
monitoring your work will tell you the code isn’t correct, even though it would still run
perfectly. Do I insist on having everything just so because I’m a control freak? No, it’s
because I have to place a limit on harmless maverick behavior in order to automate the
exercises. If I were to grant you as much freedom as you might like, creating the
algorithms that check your work would be, for me, a project of driverless-car
proportions. Besides, learning to write code with fastidious precision helps you learn to
pay close attention to details, a fundamental requirement for coding in any language.

Subscribe, temporarily, to my formatting biases.

Current code formatting is like
seventeenth-century spelling. Everyone does it his own way. There are no universally
accepted standards. But the algorithms that check your work when you do the interactive
exercises need standards. They can’t grant you the latitude that a human teacher could,
because, let’s face it, they aren’t that bright. So I’ve had to settle on certain conventions.
All of the conventions I teach are embraced by a large segment of the coding community,
so you’ll be in good company. But that doesn’t mean you’ll be married to my formatting
biases forever. When you begin coding projects, you’ll soon develop your own opinions
or join an organization that has a stylebook. Until then, I’ll ask you to make your code look
like my code.

Now JavaScript is developing very rapidly, and therefore it is easy to get confused when learning the language. We offer you a conveniently structured syllabus that covers all the necessary aspects of JavaScript and related technologies.Why JavaScript?

It is worth noting the openness of the language – companies usually competing with each other collaborate to develop JavaScript. The language is very flexible and will suit supporters of both object-oriented and functional approaches. A huge number of libraries and frameworks let you easily solve any type of problem, and the Node.js server platform lets you use the language not only in the browser, but also in the console. You can even write desktop and mobile apps – the former with the Electron framework, the latter with NativeScript or React Native.

Fundamentals

First you need to learn the basic concepts of JavaScript, web development and programming in general:

• Object-oriented JS – constructors and factories, inheritance;
• functional JS – higher-order functions, closures, recursion;
• Jasmine test specifications;
• basics of HTML, CSS and jQuery.

Git

Git is an essential tool for developers, so you should get familiar with it as early as possible. Here are the basic skills you should have:

• Creating and moving files in directories;
• initializing and committing to Git;
• Setting up repositories in GitHub.

Algorithms and data structures

Next, you’ll learn about algorithms (including algorithm complexity) and basic data structures: linked lists, queues, stacks, binary lookup trees and hash tables. Our series of articles will help you with this.

Backend

Node.js

Ten years ago, JavaScript could only be used for frontend development. Now, thanks to Node.js, it’s not just about the frontend. Node is just an environment for running JS code on the server side, so you won’t have to learn new syntax, but you will need to import and export files, break code into modules, and use the npm package manager.

Servers, HTTP, Express.js

After learning Node, it’s worth continuing with backend development and getting to grips with servers and routing. You can start with ports and protocols, with an emphasis on HTTP, and then move on to Express – the Node library for handling requests.

Asynchronous JavaScript.

Asynchrony is one of the distinctive features of JavaScript, although it creates a split among developers: some love it, and some hate it. You should understand the pros and cons of this technology. Start with the call stack, event loop, and callbacks, and then move on to learning about promises.

Databases, schemas, models and ORMs

Databases are one of the most important elements of web development. If your application needs to load or store any data that is not lost when the page is refreshed, you will have to use a database. You have to learn to distinguish between relational and non-relational databases, and understand the types of relationships. Then learn SQL and become familiar with different database management systems. Knowing how to work with ORM is also useful.

Frontend

HTML and CSS

HTML and CSS are essential for any web developer. You do not need to know them perfectly, but understand them you must. You can also learn some popular libraries (like Bootstrap) and CSS preprocessor like Sass to make CSS look like normal code. To make working with HTML easier, you can choose one of the popular templating tools such as pug.

jQuery and DOM manipulation

Having created the appearance of a page using HTML and CSS, you will be using event translators and the jQuery library to manipulate the DOM. Many people think jQuery is useless and will soon be replaced by Angular and React, but it’s insanely popular, so it’s worth knowing. Besides, one day you’ll find yourself in a situation where hammering nails with a React microscope won’t be comfortable for you, and then the lightweight jQuery will come to your rescue.

Chrome Developer Tools

It would be inexcusable to ignore the Chrome tools, which give a huge number of features. With them, you’ll be able to explore DOM elements, debug through the console, track routes, and much more. Our article describes a few handy features of the Chrome console that will make routine tasks easier.

AJAX

If you don’t want your app to reload pages after every database operation, you’ll definitely want AJAX-it sends out background asynchronous HTTP requests that only update part of the display. You can work with AJAX through jQuery using the .ajax method.

Advanced Topics

Test-Driven Development

Test-Driven Development, or TDD – is a development technique in which software development is divided into many small cycles: first tests are written to cover the desired change, then the code is written which passes these tests. After that code is refactored and new tests are written if necessary. If some tests fail a piece of code, this is fixed.

In case of JavaScript, we recommend you to pay attention to Jasmine, Chai and Mocha frameworks. By the way, there is a series of articles on our site devoted to frontend testing that may come in handy.

Web Sockets

We should pay special attention to this topic because web sockets are very useful. WebSocket, as opposed to HTTP, allows for bidirectional data flow, which makes it a unique technology. The most common implementation is socket.io – our tutorial on making a multiplayer browser game will help you figure it out and put your skills into practice.

ES6, Babel, Webpack

ES6 (ES2015) is now the primary standard, but ES2016 has already been adopted and ES2017 is in development, so you should always be aware of updates and use them. Compatibility issues are solved by just a couple of tools:

• Babel – compiles ES6 code (ES2016 support is coming soon) into ES5, which is supported by all browsers. It can even compile JSX/React components, making it indispensable for any web developer;
• Webpack – collects all your source files (images, fonts, stylesheets, JS files, etc.) into a single dependency graph. It’s not useful for creating small applications, but with React, its help is invaluable.

React and Redux

React is a library for creating user interfaces. It was created by Facebook in 2013 and quickly became popular with developers. You should read these 9 tips and then break down writing a simple application to understand how React works and what it’s for. React comes in handy not only for frontend development: Facebook has released framework variants for mobile (React Native) and VR development (React VR).

Redux is a predictable state container commonly used in conjunction with React. It can be used to reduce code due to its modularity. It is especially useful in multiplayer, real-time applications such as games.

Authentication, sessions, cookies

You also need to understand how applications handle user interaction, account sign-in and sign-out, and privilege granting. Cookies, small text files that are sent by a server to the browser in response to an HTTP request, are used to keep track of the identity of the user during the session. And the express-session library can be used to link the database and authorization pages.

Web security

Finally, you should pay attention to security. It is important to learn both methods of attack and ways to protect against them.