The development path of a Frontend developer (Part Two)

This is the second part of the frontend developer roadmap. If you haven’t read the first, I highly recommend the first part. In this article I will continue to tell you about my idea of ​​a modern frontend developer development map.

Now you already know the basics of layout, JS and Git, but somehow this is not enough for the vacancies that the labor market is filled with, it’s time to gain knowledge with which you can conquer the IT market.

To begin with, I want to talk about two technologies that are worthy of mention and you will clearly see them in vacancies:

Worth mentioning

1. JQuery is a very popular library for writing user interfaces, or in simple terms, frontends, but now it is going through hard times – there have been no major updates for many years. The technology is still alive, but something new is rarely written on it, usually to support applications that may have had many different developers. And an important nuance specifically for beginners – there are no internships in this area, so look towards JQuery only if you have a 100% option for working, otherwise the risk is not worth the candle

2. Svelte is a cool framework, but vacancies with it are rare in our latitudes, this technology is often talked about, but it is rarely hired into real projects due to the small Russian-speaking community and the price of developers. Yes, here the salary of a Senior developer will be higher than that of a React developer, but the difference will be small, but there will be much fewer vacancies. As a result, I can say that the technology is very promising and can occupy its niche, but so far it cannot compete with three pillars (React, Vue, Angular)

One of the three

I have to admit – I'm a React developer. Because of this, I will only tell you in detail about React, but I will give an overview of Vue and Angular. If another technology is closer to you, you can easily find the basics on these technologies or show with your comments that it is worth making a detailed roadmap on these technologies. All of these technologies allow you to create endlessly cool web applications, so don't look for a faster or lighter technology – they have all proven their coolness in interface development. All these technologies will not die in 2-3 years, which will allow you to learn and find a job without any problems.

Angular

This technology has the highest barrier to entry. Because TypeScript is built-in, you won't be able to use Angular without at least knowing the basics of TypeScript. At the same time, this technology has the most strict behavioral patterns and rules for writing code, but the code that is written and works will not differ much from company to company – not much within the framework of JS technologies. Due to the high entry threshold, there are fewer people who want to become Angular developers than in Vue and React, but there are also fewer vacancies here. If you take a good beginner Angular developer and his chances of getting the first job, they will be slightly higher than other developers due to less competition.

Vue

Vue has the same barrier to entry as React. You can argue for a long time which is more difficult, but in my picture of the world these technologies are equal. However, Vue has a major problem – the transition from version 2 to version 3 without the ability to use code written in version 2 in a project using version 3. How difficult it turned out… To put it simply, Vue itself cut off most of the code base and divided projects into relevant and not. There are few companies currently developing projects on Vue 2, but many are keeping them on Vue 2 and supporting them, which gives us one of two additional choices:

1. We don't teach Vue 2, but we teach Vue 3 and get fewer vacancies.

2. We teach Vue 2 and Vue 3 and get a lot of jobs.

There will be less job openings than React and on top of that you need to know 2 versions of the same technology. It is clear that they are similar and the time to study the two versions will not be 2 times longer, but 1.3-1.5, but this is still a long time. However, Vue 3 tried to keep everything best from the second version and take the best from React. If you take a risk and only look for work in Vue 3, you will get the best of all three technologies: a fairly fresh project, moderate standardization, ease of coding, and many solutions from the Vue community. But what if Vue 4 suddenly breaks out? (Joke)

React

What can React offer us? Its most important advantage is its market dominance in the Russian Federation. Many large companies write in React, which is why the demand for developers is higher than in other technologies. True, there are more React developers, which ultimately gives us both high demand and high supply. However, it is worth understanding one simple truth – since most internships take place in React, for which you can find the largest number of different free materials and paid courses, it is difficult not to admit that the technology has become a kind of “silver bullet” and the simplest answer to the question “What to write Frontend on.” And from its technical advantages two things can be distinguished:

1. React has many optimizations “under the hood”, which is why it wins in speed, with the same place of growth of hands.

2. Multiple approaches, allowing you to be simple for small applications and become a hulking giant in large projects

Subtotal

If you want to learn the most popular technology at the moment, then in my opinion, you should learn React, but you can learn other technologies – they are no worse than React, I made this conclusion for myself and am sharing this conclusion with you.

Learn React

First, we need to understand what React is and what it is used for. There are many videos on YouTube about the basics of this technology. After starting your first project and watching a couple of videos, you will learn a lot of new words: JSX, Virtual DOM, hooks and so on. You need to understand how JSX works and why it is better than regular HTML. To do this, you can simply watch a few videos, the same can be said about Virtual DOM. If you go deep, you won’t get a significant advantage in writing code, but you’ll waste a lot of time.

After that, you need to become familiar with the concept of rendering and how it works in React. To get started, also watch a video on this topic. Next, you will get acquainted with hooks and study this issue in more detail.

Speaking of hooks. Hooks are a technology that gives us a lot of options for working with the interface. For a beginner, it will be enough to know only 6 hooks:

1. useState

2. useEffect

3. useContext

4. useMemo

5. useCallback

6. useRef

useState and useEffect are the most important, they are used most often and without understanding how they work, it will be very difficult to move on. You can find a lot of materials on how these hooks work. You should be able to easily write a counter as a marker that minimally understands usestate, and understand what lifecycle methods are as a marker for understanding useEffect. After these two hooks, we move on, reading and using the rest of the hooks in the process.

React-router-dom

Now we should study routing. For this, React has the react-router-dom library. With it, you can implement page navigation, but in the SPA (single page application) style. This library has several versions and they are very different. At the moment, the current version of this library is react-router-dom 6, do not start your study with 4 or 5, then it will be more painful.

Requests to the server

Axios – This library simplifies interaction with the server, now instead of fetch you will have axios, a quick look at the documentation will be enough.

React query – You can create and manage queries in a consistent way, which simplifies the code and improves the performance of your application, and this library also creates special hooks that greatly simplify working with queries. It works great in large projects in conjunction with the React toolkit, but has a more complex syntax.

Styling

Various component and style libraries. There are many of them and it’s impossible to choose the right one, so go through the most popular ones and choose to your taste:

1. Material UI

2. Ant design

3. Tailwind

NPM or YARN package managers

To install all this time you have been using the npm install or yarn add commands. Now it's time to figure out what this means. NPM and Yarn allow us to add third-party libraries to our project and build dependencies into the project. You can read about this in more detail or skip this point and use NPM. There is no critical difference, but there is one important condition – if you have already started using one of the package managers in your project, use only it, otherwise the project will hurt and you will get a lot of errors.

SCSS/Module

Now we'll learn how to use more advanced styling features, such as the CSS preprocessor – SCSS. Thanks to it, we get a more pleasant syntax and some advantages over CSS – I highly recommend learning the basics and using it in your projects.

We can also use modular CSS/SCSS – this allows us to name classes the same in different parts of the project and, thanks to different modular style files, they will not fray and interfere with each other.

Webpack and babel

Webpack is a big complex thing, you don’t need to study it and go into the guts of what and how it works, it’s purely theory. See how the project builder works and why it is needed. And don’t go into the weeds, otherwise you will start creating your own webpack configs, which will take you a lot of time to create the same thing as creating a react app.

Babel is a transpiler that allows you to convert your JSX to JS, or your EcmaScript 6 JS to EcmaScript 5, watch a couple of videos and move on.

TypeScript

And now a fluffy white animal has come to us; they call it Arctic fox. If JS is your first language, this technology will break your brain, it requires a lot of practice and a lot of theory. First, you need to learn how to use basic and custom types, interfaces, and also listen to everything else and nod, since basic TypeScript knowledge is enough for your first job.

How to practice? There are many options for this. I suggest you write your own simple applications, as before, but also solve problems using Codewars, preferably in TypeScript, since you will be improving three skills at once: JavaScript constructs, TypeScript typing and algorithms. If you wish, you can see my solutions in my GitHubbut don’t mindlessly copy them, and besides, they are in JS, not TS.

State managers

Let's figure out what it is. This technology allows you to get rid of props drilling.

If you're already familiar with useContext, the concept will be familiar to you.

Why do we then need some kind of state manager or useContext to cope with this task? UseContext is not very scalable, which is why large projects use useContext for local tasks, for example, transferring a dark or light theme in a project, and for the rest a more convenient state manager is used.

Here again there is a choice, but this time from 4 technologies:

1. Redux is an outdated but still popular state manager. It has too many complications, its concept is quite difficult to understand – I would call redux the most complex of the entire list, since it has a lot of additional structures and add-ons that can also complicate working with the project.

2. Redux toolkit is a trendy and modern Redux that removes some of the complications, replacing them with simpler concepts and designs, making it easier to understand how it works. However, it also has many add-ons that will make your code simpler and more concise in the long run, but at the beginning of learning you will have many questions.

3. Zustand – The simplest of this list, it has almost no additional structures, which is why it is very easy to learn. The problem with it is that it is not so common in large projects, which is why finding work with this technology will be very, very difficult. However, if you are unable to make friends with Redux, you can try using this state manager.

4. Mobx – I wouldn’t have remembered about it if not for the many “up-to-date” development cards. This technology is comparable in complexity to Redux, and smaller in scope than Zustand, so I want to warn you against studying this technology.

The choice is yours, but in my opinion, it's worth choosing between Redux toolkit and Zustand – the learning process is simple, videos and documentation are abundant. I recommend writing a couple of small applications to consolidate and move on.

Practice

This part turned out to be too theoretical, but now it’s time to start writing your big pet project. This project should have a state manager, TypeScript, Axios or React query, a styling library, modular SCSS, and optimizations with useCallback and useMemo. I would say write a business card for your website, but not this time. You need a fairly complex project, but remember one rule – plan your application in advance and think about what you need to use in it. As an example, this could be an application for calculating personal finances; it has quite a lot of pitfalls, but solving them will greatly improve you. However, I would like to caution you that you should not write an application that you are not interested in. Think about what you would like to do for yourself and what would be useful to you. At the same time, don’t forget about codewars and studying theory – you should start writing this application as soon as you become familiar with the basics of technology, but there is still a lot of room for growth.

What's next?

Finding a job and learning new technologies. You don’t yet know what testing or SSR is, but I think it’s overkill to overload your brain with this information. This card should last you for a year, or even more. If you completed it in a couple of months, re-read the first part. Good luck to everyone in learning Frontend development.

Thank you for your attention!