- Object-oriented JS – constructors and factories, inheritance;
- Functional JS – functions of higher order, closures, recursion;
- Jasmine test specifications;
- The basics of HTML, CSS and jQuery.
Git is a tool that developers need, so you need to get to know it as early as possible. Here are the basic skills that you must have:
- Creating and moving files in directories;
- Initialization and commits in Git;
- Setting up repositories in GitHub.
Algorithms and data structures
Then it is worthwhile to study algorithms (in particular, the notion of complexity of algorithms), as well as basic data structures: linked lists, queues, stacks, binary search trees and hash tables. This will help you with our series of articles.
Servers, HTTP, Express.js
After studying Node it is worth continuing to get acquainted with backend development and understand servers and routing. You can start with ports and protocols with an emphasis on HTTP, and then do an Express-Node library to handle requests.
Databases, Schemas, Models and ORM
Database is one of the most important elements of web development. If your application needs to download or store any data that is not lost when updating the page, you will have to use the database. We need to learn to distinguish between relational and non-relational databases and understand the types of links. Then study SQL and get to know different database management systems. Ability to work with ORM, too, will not be superfluous.
HTML and CSS
HTML and CSS are the foundation for any web developer. You do not need to know them perfectly, but you have to understand them. You can also learn some popular library (for example, Bootstrap) and a CSS preprocessor like Sass – it will help make CSS look like regular code. To simplify the work with HTML, you can choose one of the popular templating tools, for example, pug.
JQuery and DOM manipulation
By creating the appearance of the page with HTML and CSS, you will use event translators and the jQuery library to manage the DOM. Many people think that jQuery is useless and will soon be replaced by Angular and React, but it’s insanely popular, and so it’s worth knowing. In addition, one day you will get into a situation where hammering nails React-microscope you will be uncomfortable, and then to help you will come easy jQuery.
Chrome Developer Tools
It would be unforgivable to disregard the tools of Chrome, which give a huge number of opportunities. With them, you can learn DOM elements, debug through the console, track routes and much more. This article describes several convenient features of the Chrome console that will simplify the execution of routine tasks.
If you want the application not to reload the pages after each operation with the database, you will definitely need AJAX – it sends the background asynchronous HTTP requests, the answers to which are updated only part of the display. You can work with AJAX through jQuery using the .ajax method.
Development through testing
Test-Driven Development, or TDD, is a development technique in which the creation of software is broken down into many small cycles: first tests are written that cover the desired change, then the code that passes these tests is written. After that, the code is refactored, if necessary, new tests are written. If some tests do not pass the code, it’s fixed.
This topic should be given special attention, since web sockets are very useful. The WebSocket protocol, unlike HTTP, allows you to work with a bidirectional data stream, which makes this technology unique. The most common implementation is the library socket.io – to understand it and apply our skills to practice will help our guide to create a multi-user browser game.
ES6, Babel, Webpack
Now the main standard is ES6 (ES2015), but ES2016 is already adopted, and ES2017 is under development, so you should always be aware of updates and use them. Compatibility issues are solved with just a couple of tools:
- Babel – compiles ES6-code (soon will support ES2016) in ES5, which is supported by all browsers. It even knows how to compile JSX / React-components, which makes it irreplaceable for any web developer;
- Webpack – collects all your source files (images, fonts, style sheets, JS files, etc.) into a single dependency graph. It does not come in handy when creating small applications, but when working 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 among developers. React is useful not only for front-end development: Facebook released versions of the framework for mobile (React Native) and VR-development (React VR).
Redux is a container of predictable states, usually used in conjunction with React. It can be used to reduce the code due to the modularity. Especially useful in multi-user applications, working in real time, for example, in games.
Authentication, sessions, cookies
You also need to understand how applications interact with users, process login to and leave the account, and give out privileges. To monitor the identity of the user during the session, cookies are used – small text files sent by the server to the browser in response to the HTTP request. And to provide communication database and authorization pages, you can use the library express-session.
And, finally, it is worth paying attention to security. It is important to learn both attack methods and how to protect against them.