Web development is one of the simplest and therefore popular directions among beginner programmers. For work is enough just any text editor and browser, you do not need to learn algorithms at an advanced level, the result of each stage of writing a program is obvious – in general, there are many benefits. The key skill in the context of web development is the knowledge of JavaScript.
Now JavaScript is developing very fast, and therefore it’s easy to get confused when learning a language. We offer you a curriculum with a convenient structure that covers all the necessary aspects of JavaScript and related technologies.
Read also : Why does a programmer need a mentor and where to find him
Why JavaScript?
First of all, you need to assess your level of knowledge and determine whether JavaScript really suits you – for this we propose to pass a special test.
It is worth noting the openness of the language – companies that usually compete with each other, cooperate with the goal of developing JavaScript. The language is very flexible and will suit supporters of both the object-oriented and functional approach. A huge number of libraries and frameworks allows you to easily solve any type of tasks, and the server platform Node.js makes it possible to use the language not only in the browser, but also in the console. You can even write desktop and mobile applications: the first – using the framework Electron, and the second – to NativeScript or React Native.
Basics
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 – functions of higher order, closures, recursion;
- Jasmine test specifications;
- The basics of HTML, CSS and jQuery.
- Git
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.
Read also : How to learn web development by yourself
Backend
Node.js
10 years ago, JavaScript could only be used for front-end development. Now thanks to Node.js one “front” is not limited to. Node is just an environment for running JS code on the server side, so you do not have to learn the new syntax, but you’ll need to import and export files, break the code into modules, and use the npm package manager.
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.
Asynchronous JavaScript
Asynchrony is one of the distinctive features of JavaScript, although it creates a kind of split among developers: some like 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 go on to learn promises.
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.
Frontend
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.
AJAX
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.
Read also : What is the difference between a web developer and a web designer?
Advanced topics
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.
In the case of JavaScript, we recommend that you pay attention to the Jasmine, Chai and Mocha frameworks.
Web Sockets
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.
Web Security
And, finally, it is worth paying attention to security. It is important to learn both attack methods and how to protect against them.
