April 25, 2017 at 13:41What a front-end developer should be able to
The editor of Netologiya Svetlana Shapovalova understands who the front-end developer is, what he should be able to (or should not), and for which he is paid an excellent salary (or not).
According to the annual StackOverflow study , the most popular profession among service users in 2017 is the Web developer. This category includes all front-end developers.
StackOverflow data
If you go to the first job search site, for example, on hh.ru, you get the impression that the front-end developer is a chameleon specialist.
It all starts with a confusion in the names of vacancies: you can meet the “front-end developer”, and “front end developer”, and “front-end developer”, and “front-end developer”, and “web developer”, and “front-end developer”. Sometimes you can even see some kind of "web coder" with the requirements for a fullstack developer. The reaction to this is one: WTF ?!
The trouble is that some employers do not distinguish (or do not want to distinguish) a layout designer from a front-end developer - this is clear from the job description. Let’s figure out what skills separate the front-end developer from the “workbench” (layout designers, do not be offended, you are also good).
Layout designer is a narrow front fighter. Its task is to make up the layout received from the designer using HTML + CSS. He may be a little skilled in JavaScript, but more often limited to the ability to fasten some jQuery plugin.
The front-end developer is not just making layouts. He knows JavaScript well, understands frameworks and libraries (and actively uses some of them), understands that he is "under the hood" on the server side. He is not afraid of LESS, SASS, GRUNT, GULP preprocessors and collectors, he can work with DOM, API, SVG objects, AJAX and CORS, he can make SQL queries and dig into the data. It turns out a combined hodgepodge of skills, to which is added an understanding of the principles of UI / UX-design, adaptive and responsive layout, cross-browser and cross-platform, and sometimes mobile development skills.
The front-runner is obliged to be able to work with version control (Git, GitHub, CVS, etc.), use graphic editors, and “play” with templates of various CMS.
It is still highly desirable to know English so as not to translate the specification in Google translator, to be able to work in a team, sometimes multilingual, to understand web fonts, and to understand testers and the testing process itself.
So, what technologies should a front-end developer master:
What should I understand:
Of course, this is all ideal. You can always choose a skill stack to your liking and develop in a narrower direction.
What technologies and tools are most often used by front-end developers? Firstly, it’s hard to imagine a front-end vendor who does not know JavaScript. This is confirmed by polls:
Next come various kinds of frameworks and libraries, the most popular of which are: Angular, Node.js, React. In addition to mandatory JavaScript, front-end developers also use other languages, although not so often. The leaders are PHP, SQL , Java and C #. And, of course, the front-end vendor can’t do without CMS skills. The most popular choice is WordPress.
StackOverflow data
If we group the most popular tools into stacks, we get the following situation:
StackOverflow data
A set of the most popular frameworks and libraries of all developers looks as follows (see illustration). It's nice to see front-end tools in this list:
StackOverflow Data
The front-career career path usually starts with the layout designer - this is the most logical and generally accepted option. First we study the HTML + CSS linkage , then knowledge of JavaScript , libraries, and frameworks are “layered” on it . The future specialist also studies the key concepts of building the server side, adds here the tools necessary for the chosen specialization. Then all this is polished by the ability to work with version control, graphic editors and an understanding of the principles of UI / UX design .
There are other options. If a novice programmer initially knows in what area he plans to develop, nothing prevents him from learning a key technology stack right away, and not in parts. It all depends on the goals and time that the future front-end vendor has. Any option is acceptable, as long as the output is an intelligent specialist.
A ready front-end developer as a whole has three main development options:
The PayScale service clearly illustrated all the possible career paths of a front-end developer:
Which one to choose depends on the specialist himself and his wishes / skills.
Regarding the salaries of front-end developers: here, as in the entire IT industry, there is no single payment standard. It all depends on the skills and ability to file yourself. Well, sometimes it’s luck :)
The average salary of a front-end specialist in Russia, rubles / month
The average salary of a front-end specialist in Moscow, rubles / month
According to My Circle
Traditionally, the annual salary of front-end developers in the USA is slightly higher than in Russia . However, if you work in a branch of a foreign company, you probably are not afraid of such a gap.
According to PayScale
First, take off the pink glasses. Learning is work and self-discipline. Most novice IT students are eliminated at the stage of "I want to become a programmer and get paid in dollars, but I did not think that I would have to study so much." The uniqueness of programming and generally any IT specialty in constant self-learning. This is the complexity and the charm of the IT sphere. If it doesn’t scare you - cool! You have every chance to become an excellent specialist.
The main rule of the future specialist is to set real goals in the learning process. This will help planning. Make a list of the tools you plan to learn and keep it in front of your eyes.
Those starting from scratch should start with HTML and CSSand master them at the level of the perfect layout of PSD-layouts. At this stage, you also need to learn how to work with text and graphic editors and know the basic principles of design (as a plus). Then take on JavaScript: syntax, architecture, and language features. To master popular frameworks and libraries, at the same time to love version control systems and some of the popular task runners. Add CSS preprocessors and frameworks, understand server technologies. And then you candrink smoothies in Bali to grind the knowledge gained to infinity.
An approximate path for a novice front-end developer.
You will have it.
You can go this way both alone and with mentors (universities, courses). Here are some of the most popular StackOverflow developer training formats:
StackOverflow data
In the first place are online courses, 64.7% of the developers surveyed voted for them, then go: self-study on books, offline courses, open source development and programming camps. Interestingly, higher education (Master's degree) is almost in last place.
The front-end developer is a universal soldier. He will complete the layout and build the web application, and master the server part, if necessary. You need to know a lot: HTML, CSS, JavaScript, JS libraries and frameworks, CSS preprocessors and frameworks, version control systems and task runners, backend technologies, unit testing and much more.
In addition, soft skills will be useful: interaction with people and teamwork, the ability to establish an effective workflow and solve tasks in the most optimal way. Do not do without confident knowledge of the English language.
The salary of a front-end specialist is quite decent, and the more skills, the higher the chances of getting a “fat” salary.
Anyone who does not give up before self-training can become a front-end developer: as we have found, it is difficult to rely on university education. The ideal option is various online and offline courses + literature on the topic, practice and great Google.
Netologiya launches a full-fledged training program for front-end specialists - Profession front-end developer . This is a 6-month course dedicated to the basic technologies of front-end development: HTML and CSS, JavaScript, Web API, AJAX, web sockets, React library.
At the end of the course, students will create their own one-page web application. Training is conducted by 10 practicing front-end specialists - this allows you to get a comprehensive understanding of the tools and tasks of front-end development. Throughout the training, students will receive at least 100 practical tasks that are as close to “combat” as possible and implement 3 medium-sized projects and 1 full-fledged project as a thesis.
All students who successfully complete the course receive a certificate of professional development in the established form and a corporate diploma of “Netology”.
PS. What do you think, what knowledge is vital for the front-end developer, and which can be mastered as needed?
Who is a front-end developer
According to the annual StackOverflow study , the most popular profession among service users in 2017 is the Web developer. This category includes all front-end developers.
StackOverflow data
If you go to the first job search site, for example, on hh.ru, you get the impression that the front-end developer is a chameleon specialist.
It all starts with a confusion in the names of vacancies: you can meet the “front-end developer”, and “front end developer”, and “front-end developer”, and “front-end developer”, and “web developer”, and “front-end developer”. Sometimes you can even see some kind of "web coder" with the requirements for a fullstack developer. The reaction to this is one: WTF ?!
The trouble is that some employers do not distinguish (or do not want to distinguish) a layout designer from a front-end developer - this is clear from the job description. Let’s figure out what skills separate the front-end developer from the “workbench” (layout designers, do not be offended, you are also good).
Layout designer is a narrow front fighter. Its task is to make up the layout received from the designer using HTML + CSS. He may be a little skilled in JavaScript, but more often limited to the ability to fasten some jQuery plugin.
The front-end developer is not just making layouts. He knows JavaScript well, understands frameworks and libraries (and actively uses some of them), understands that he is "under the hood" on the server side. He is not afraid of LESS, SASS, GRUNT, GULP preprocessors and collectors, he can work with DOM, API, SVG objects, AJAX and CORS, he can make SQL queries and dig into the data. It turns out a combined hodgepodge of skills, to which is added an understanding of the principles of UI / UX-design, adaptive and responsive layout, cross-browser and cross-platform, and sometimes mobile development skills.
The front-runner is obliged to be able to work with version control (Git, GitHub, CVS, etc.), use graphic editors, and “play” with templates of various CMS.
It is still highly desirable to know English so as not to translate the specification in Google translator, to be able to work in a team, sometimes multilingual, to understand web fonts, and to understand testers and the testing process itself.
So, what technologies should a front-end developer master:
- HTML and CSS (including grids and CSS frameworks, W3C and WHATWG specifications, HTML5 / CSS3 Polyfills)
- CSS preprocessors (Sass, Less, Stylus, etc.)
- Javascript
- Popular frameworks and libraries: jQuery, Angular.JS, React.JS, Backbone.js, etc.)
- OOCSS / BEM / SMACSS
- Svg
- Dom
- HTML5 API
- ECMAScript 6
- Popular CMS (WordPress, Drupal, Joomla, etc.)
- Understand the principles of building a backend and understand server technologies (Node.js, PHP, Ruby, .NET, etc.)
- Debugging tools (Chrome Dev Tools, Firebug and others)
- JavaScript transpilers (Babel)
- Version Control Tools (Git, GitHub, CVS, etc.)
- Databases and query languages (SQL, MySql, NoSQL, MongoDB, etc.)
- Graphic editors (Photoshop, Illustrator, etc.)
What should I understand:
- cross-browser and cross-platform development;
- progressive improvement and elegant degradation;
- mobile development;
- adaptive and responsive layout;
- Web fonts
- SEO optimization principles.
Of course, this is all ideal. You can always choose a skill stack to your liking and develop in a narrower direction.
What statistics say
What technologies and tools are most often used by front-end developers? Firstly, it’s hard to imagine a front-end vendor who does not know JavaScript. This is confirmed by polls:
- according to StackOverflow, JavaScript in the list of front-end tools leads by a huge margin (90.5%)
- research company O'Reilly, conducted among European programmers in the end of 2016, also puts the JavaScript in the first place.
Next come various kinds of frameworks and libraries, the most popular of which are: Angular, Node.js, React. In addition to mandatory JavaScript, front-end developers also use other languages, although not so often. The leaders are PHP, SQL , Java and C #. And, of course, the front-end vendor can’t do without CMS skills. The most popular choice is WordPress.
StackOverflow data
If we group the most popular tools into stacks, we get the following situation:
StackOverflow data
A set of the most popular frameworks and libraries of all developers looks as follows (see illustration). It's nice to see front-end tools in this list:
StackOverflow Data
Career path and salary of front-end developer
The front-career career path usually starts with the layout designer - this is the most logical and generally accepted option. First we study the HTML + CSS linkage , then knowledge of JavaScript , libraries, and frameworks are “layered” on it . The future specialist also studies the key concepts of building the server side, adds here the tools necessary for the chosen specialization. Then all this is polished by the ability to work with version control, graphic editors and an understanding of the principles of UI / UX design .
There are other options. If a novice programmer initially knows in what area he plans to develop, nothing prevents him from learning a key technology stack right away, and not in parts. It all depends on the goals and time that the future front-end vendor has. Any option is acceptable, as long as the output is an intelligent specialist.
A ready front-end developer as a whole has three main development options:
- horizontal (to improve as a specialist, thereby constantly increasing its value in the labor market);
- vertical (grow up the career ladder);
- diversification (development of related specialties, turning into a full stack and retraining).
The PayScale service clearly illustrated all the possible career paths of a front-end developer:
Which one to choose depends on the specialist himself and his wishes / skills.
Regarding the salaries of front-end developers: here, as in the entire IT industry, there is no single payment standard. It all depends on the skills and ability to file yourself. Well, sometimes it’s luck :)
The average salary of a front-end specialist in Russia, rubles / month
The average salary of a front-end specialist in Moscow, rubles / month
According to My Circle
Traditionally, the annual salary of front-end developers in the USA is slightly higher than in Russia . However, if you work in a branch of a foreign company, you probably are not afraid of such a gap.
According to PayScale
How to become a front-end developer
First, take off the pink glasses. Learning is work and self-discipline. Most novice IT students are eliminated at the stage of "I want to become a programmer and get paid in dollars, but I did not think that I would have to study so much." The uniqueness of programming and generally any IT specialty in constant self-learning. This is the complexity and the charm of the IT sphere. If it doesn’t scare you - cool! You have every chance to become an excellent specialist.
The main rule of the future specialist is to set real goals in the learning process. This will help planning. Make a list of the tools you plan to learn and keep it in front of your eyes.
Those starting from scratch should start with HTML and CSSand master them at the level of the perfect layout of PSD-layouts. At this stage, you also need to learn how to work with text and graphic editors and know the basic principles of design (as a plus). Then take on JavaScript: syntax, architecture, and language features. To master popular frameworks and libraries, at the same time to love version control systems and some of the popular task runners. Add CSS preprocessors and frameworks, understand server technologies. And then you can
An approximate path for a novice front-end developer.
You will have it.
You can go this way both alone and with mentors (universities, courses). Here are some of the most popular StackOverflow developer training formats:
StackOverflow data
In the first place are online courses, 64.7% of the developers surveyed voted for them, then go: self-study on books, offline courses, open source development and programming camps. Interestingly, higher education (Master's degree) is almost in last place.
Conclusion
The front-end developer is a universal soldier. He will complete the layout and build the web application, and master the server part, if necessary. You need to know a lot: HTML, CSS, JavaScript, JS libraries and frameworks, CSS preprocessors and frameworks, version control systems and task runners, backend technologies, unit testing and much more.
In addition, soft skills will be useful: interaction with people and teamwork, the ability to establish an effective workflow and solve tasks in the most optimal way. Do not do without confident knowledge of the English language.
The salary of a front-end specialist is quite decent, and the more skills, the higher the chances of getting a “fat” salary.
Anyone who does not give up before self-training can become a front-end developer: as we have found, it is difficult to rely on university education. The ideal option is various online and offline courses + literature on the topic, practice and great Google.
Netologiya launches a full-fledged training program for front-end specialists - Profession front-end developer . This is a 6-month course dedicated to the basic technologies of front-end development: HTML and CSS, JavaScript, Web API, AJAX, web sockets, React library.
At the end of the course, students will create their own one-page web application. Training is conducted by 10 practicing front-end specialists - this allows you to get a comprehensive understanding of the tools and tasks of front-end development. Throughout the training, students will receive at least 100 practical tasks that are as close to “combat” as possible and implement 3 medium-sized projects and 1 full-fledged project as a thesis.
All students who successfully complete the course receive a certificate of professional development in the established form and a corporate diploma of “Netology”.
PS. What do you think, what knowledge is vital for the front-end developer, and which can be mastered as needed?
