😉 🎗️ ♨️ Profession: front-end developer ♋️ 🗨️ 🖱️

xxx: what do you write frontend on?
yyy: on crutches and bicycles
xxx: mmm, good framework!
Bash.im

When the thought comes of becoming a programmer, you inspire Shildt’s C manual, order a thick Stroustrup C ++ book, and learn to joke about a pointer to a pointer to a pointer and about recursion. The harsh romance of the first time ... But everything changes when JavaScript accidentally comes into your life. “What a simple, straightforward syntax it is! Everything, it’s decided, I’ll write websites, ”the novice programmer thinks and decides to become the guru of the entire web. But then the selected stack changes its friendly face, and the further, the more. But you can’t stop now, because you are one of them - front-end developers. Those who are "looking at the face of the site." Well, I wanted to join? Then for you 2 series of our special section "Profession: ..."

We were already preparing this article when the post “Habr Careers” came out on Wednesday with an interview with a representative of an online school about the work of the front-end, which could not but rejoice: it means that in our series “Profession: ..” there will be another necessary, useful, relevant material . By the way, the first issue was devoted to the profession of system administrator .

Who is it?

First, some lyrics and digressions.

At the threshold of the third decade of the 21st century, it seems that the interest of users and developers has shifted from web interfaces to mobile applications and IoT. But it only seems. Let's do a simple thought experiment. Think about how many sites you visit from all your gadgets per week and analyze which mobile apps you have installed. Most likely, it turns out that you are viewing all information and news resources on the full and mobile versions of sites (in the browser), and mobile applications perform “specific” tasks: social networks, instant messengers, planners, hobbies, etc. That is, it is too early to talk about the extinction of the web.

Moreover, one of the trends of 2019-2020 (and I think that before the year 2025) has become the so-called PWA (Progressive Web Apps), which are called the future of the mobile web. To put it as simple as possible, PWA is nothing more than a healthy person’s mobile site as it should be. PWA was best defined by one of the creators of this concept and author of the term Alex Russell: "Progressive Web Apps are just websites that took all the right vitamins." ("PWA is just a site that takes all the necessary vitamins.")

PWA gives the user a set of features that is usually associated with a native mobile application. For example, you can get instant loading on the second call, set the site icon on the gadget’s screen for quick access, receive customized notifications, refuse browser navigation and work in a convenient full-screen mode, etc.

By the way, if you are interested in getting to know PWA better, there is a cool page about it and, of course, Google’s recommendations .

So, my friends, it is obvious that regardless of the growth of mobile applications and technologies, the web will remain an open standard for user interaction and any sets of information (sites, blogs, social networks, online stores and everything else) for a long time to come.

Something took me to the backend. Not the point. The bottom line is that with any backend of any site there should be a "face" of the site and it should somehow work. And everything happens when they come - front-end developers. They are responsible for developing the external interface of the site, that is, how the backend and site design interact with the user (if you happen to be on Habré by chance, I’ll explain - a lot of everything is hidden behind each site: design, various layers and a huge backend, that is, the whole logic of work , DBMS and so on). In general, once the truth was covered in this picture:

This epic and familiar picture has already been transformed today and indeed, the profession of a front-end developer has become incomparably more complex and multicomponent than some 7-10 years ago. Now it looks like this, and the 2028 feels much closer :-)

Front-end tenders are responsible for the logical operation of all components of the site, including content, buttons, images, navigation and internal links. Often it is they who design the primary structure of the site, work with the requirements of users (customers), that is, they are responsible for the client side of the user interface. And if the backend is responsible for the hardware and software and it is more important for them how the software interacts with the hardware, then the front-end interacts with a much more complex “hardware” - the organs of vision, hearing and sometimes the sense of touch of ordinary people. The task is to make it convenient, fast, transparent, expected, etc. In general, if the front-end mows, everyone will notice it all at once.

You are not afraid of such prospects yet? Then we go further.

Where is it needed?

In short, wherever there is web development, namely:

, — : , , , , , , . , , .
-, , .
- : , , CRM, ERP, BPM .
.

That is, if you wish, you can yourself find a job in any field that interests you, combining the interest and craft of the front-end. Yes, some companies are looking for full-stack, but as a rule, these are either very serious corporations that are ready to pay for a real cool full-stack programmer, or small offices for which full-stack is an enike programmer to support a site on CMS. The rest are your potential employers. For example, at the time of writing the article on “Habr Career” there are 249 such selective vacancies, and on hh.ru - a little more than 4100 (though not such selective ones, but it’s significant).

average salary

We will also look at wages at Haber Career. Take the data for the second half of 2019, regardless of ownership of a particular stack. By the way, the knowledge of a particular library or framework does not add much to the salary, somewhere from 5 to 15 thousand rubles.

Specialist level	average salary
Junior	53 404 rub.
Middle	99 396 rub.
Senior	170 535 rub.
Presenter (Lead)	185 533 rub.

The difference between the levels is quite noticeable, and the stack inside the vacancies is quite extensive - so with JavaScript online courses alone, it’s unlikely that you can make a front-end career.

Basic Professional Requirements

Indeed, a well-paid front-end developer should not only know the basic programming language, but also know the libraries and frameworks. We have chosen the five most popular technologies that are owned by developers of various levels. Also, starting with Junior, some other important skills that can be seen on the last line join the ownership of the stack. In principle, everything is expected, for me there are practically no surprises in the table.

Intern (Intern)	Junior	Middle	Senior	Presenter (Lead)
Javascript Typescript HTML CSS React.js	Javascript React.js HTML CSS Redux	Javascript React.js Vue.js Redux CSS	Javascript React.js Angular Vue.js Redux	React.js Javascript Vue.js Angular Typescript
-	Git, BEM, adaptive layout, DBMS	+ cross-browser layout	+ development management, Ruby on Rails	+ people management, application architecture design

In the job descriptions of the front-end developer, you can meet various requirements, from basic knowledge of HTML to complete knowledge of everything in the world and PHP in addition. We will highlight the basic requirements.

Proficiency and understanding of web design principles, UI / UX.
Understanding the needs of different groups of users, including the need to work with Accessibility (accessibility of the site for reading, understanding and interaction by persons with disabilities).
Skills for monitoring performance and site conditions, monitoring traffic.
Understanding the rules and problems of usability, skills to quickly fix problems.
Web application architecture design skills.
Testing sites for usability, special features, necessary debugging.
Profiling, refactoring and optimization of developed applications.

Sometimes the requirements of employers include web design skills, working with graphic editors, knowledge and ability to apply SEO (search engine optimization), and so on. Yes, indeed, often these skills significantly increase the value of a specialist, but think about it, but would you like to dump 2-3 posts on you for the price of one? But knowledge of other web-oriented programming languages (PHP, Ruby, Python) will allow not only better work with the backend when developing the frontend, but also significantly increase your value in the labor market, and at the same time it can be the first step to growth towards a professional full stack -developer.

The most popular web frameworks according to the StackOverflow report . I highly recommend going to the report page and viewing its entire tab, at least on graphs, to switch tabs, so you get a complete picture of what is happening in global IT. A lot of insights even for an advanced, experienced IT specialist.

And again, a wonderful 2020 technology scheme for a front-end developer (roadmap)

Important personal qualities

I am not a supporter of evaluating specialists by their personal qualities and demand compassion from the front-end or introversion from the back-end. However, having certain personality traits, the front-end developer will cope with the work a little better than his competitors and colleagues.

, , - , , , , . , . - , - — .
, , .
, , , « », .
Artistic skills, taste and a sense of style will help to combine a ready-made design and a well-built interface.

At the same time, like any techie, the developer must understand the algorithms, have logical thinking and be able to concisely speak both in the content and in the code.

The need for knowledge of foreign languages

For any programmer, an English of at least upper-intermediate with a bias in technical English is highly desirable. So you can read in the original the numerous recommendations of Google and other companies for optimal development (a lot of useful documentation!), Self-study with the help of foreign lectures, communicate with colleagues in forums, ask questions, and also read books on usability and design, among which there are very many cool English-language and not yet translated editions.

It is extremely difficult to develop in programming without knowledge of English, especially in web technologies.

Where to study

In the Russian realities, as we have already said in the first article about system administrators, higher education is necessary for successful employment. Therefore, it is desirable to have a good educational base (polytechnic, university, to the edge - a technical specialty in some basic university). In principle, with the skills of logical thinking and the ability to work with algorithms, any higher education is suitable - would be an intelligent person. Today, there are already specialties and directions in universities, where students learn the basics of front-end and backend development, which is very good. But this is absolutely not enough.

Of course, the first thing you come across when choosing the profession of a front-end developer is online schools. While I was writing this article, I google several pictures and site reports on the frontend topic. I have all of Yandex and Google now in the ads that promise me to make a JavaScript guru in 2-3-6-12 months. I would be tempted if I did not know what JavaScript is ~~and how to learn it in 21 days. To~~ take a course to start or organize knowledge or not to take is a matter of your desire, time and income. In any case, you just won’t be able to listen - you’ll have to sit and hit the keys, make test sites or cut your pet service (including the backend, by the way).

However, learning front-end development comes down to this: you take the project and learn from it. If you want money, you can try to make a website for a small company or get an internship (but for this you should already have at least some development or testing skills). Only daily coding, the search for optimal solutions, a thorough analysis of the code will help you pump as a developer.

Top Books and Learning Tools

The list of books and resources depends on which stack you choose. But there are a few that absolutely any front-endder needs (and even any programmer in principle). I'll make a chaotic list - as far as the strength of my own impressions.

« ». , . (, ) , , .
htmlbook.ru — , . - .
— , . JavaScript.
« JavaScript. -» — . , «» 2019 , .
webref.ru — , , .
— ( O'Reilly).
codecademy.com — . , , , . , — 15$ . , , .
htmlacademy.ru — , . , .
, Youtube . , , . , .
And of course - don’t be afraid and don’t hesitate to commit to open source projects (start with small ones, and there you will reach libraries and frameworks), pick someone else’s code, learn principles and algorithms.
A good article with very simple English and tips for starting your journey in JavaScript.
Of course, Habr. One RUVDS team translated so much cool in JavaScript and frontend!

Last time we were reproached that we indicated few books and resources. Alas, there is a set for each need - and it is simply impossible to cover so much. Therefore, in the comments, tell where and how you studied, with the help of which you practiced - for beginners and not only this will be super useful information.

Future front-end

The front-end tender has three main development paths.

-. — ; — , , TDD, ; — , ; — .
(-) — , , . - ( , - — -).
, , , , . , .

In any case, only the most boring and unmotivated ones will be able to stand still and not move anywhere in their careers, because the dynamism of the web itself drags the developers and forces them to pump their skills. And yes, you can always be very good, the best front-end developer.

Myths of the profession

▍ Frontend is dying

The main myth is that the profession of a front-end developer is dying. Of course not. Moreover, the interfaces are becoming more and more complicated year by year, and the IT sector will need advanced specialists who can figure out these complications. Front-end development will be needed for quite some time, and no templates, visivigi, CMS and other means will replace it. The importance and necessity of the profession can be judged by a number of graphs - I think everything is clear and there is no need to repeat once again that the profession that provides the most important thing is the interaction of the user and the interface.

Just look at the 10 most popular programming languages in GitHub projects and evaluate the position of JavaScript in this graph. In this case, a straight line does not mean dying, it means stability and demand.

The most popular programming languages from the StackOverflow report . By the way, JavaScript has held the lead here for the seventh year.

And here are Google trends.

Frontend developer query dynamics in the world, 5 years

The dynamics of the query “frontend” (red) and “frontend” (blue) in Russia, 5 years

▍ Employers do not really understand the types of programmers

But the second myth nifiga is not a myth, but pure truth. Employers often do not understand who they are hiring and are not looking for someone who is ready to solve specific problems and take responsibility for their solution, but for someone who “needs to know” some kind of led technology stack. That is why you need to be prepared for the fact that a front-end job will once look like a layout designer job, and the second - at a full-stack job. If the employer has learned the abbreviation TDD (test driven development), then the vacancy can also be found among testers :-) In fact, such a game as in the requirements for front-end programmers is not found practically anywhere (only worse with PR specialists and marketers, those generally should be an MFP). If you really want to join the company and you understand that the interview is not going there,try to transfer the conversation to tasks and tell how exactly you are going to solve them and with the help of which stack. However, if you didn’t go there already at the interview, maybe you think too well about the company?

Main tip

The whole web is changing very quickly - new technologies, new patterns of interaction appear, new utilities and updates to frameworks and libraries come out. However, if you miss one of the new products, tomorrow the site for which you will be responsible will not become slower, scary and will not turn into a pumpkin. When choosing technologies, changing the stack, changing the logic of the interface, think about your users, what they are used to, look at analytics, heatmaps and make only really necessary and useful changes. In the meantime, learning new things and trying it on pet projects, because experience comes only with practice, and understanding the best solutions comes from living examples.

And how and why did you decide to become a front-end developer? What is good in the profession and what is not? Tell us in the comments, we will help those who are at a crossroads.

Profession: front-end developer