Frontend-разработчик – это программист, разрабатывающий внешнюю часть сайта – пользовательский интерфейс. Он отвечает за корректное отображение и работу ресурса во всех браузерах и на всех устройствах. Благодаря ему страницы оживают и обретают интерактивность: переходы, анимация, выпадающие меню, выезжающие окна и другие приколюхи.
Отличие Фронтенд-разработчика от верстальщика и веб-разработчика
Вокруг профессии Frontend-разработчика много путаницы. Этому способствуют работодатели, которые хотят все и сразу, да подешевле. Так в вакансиях на позицию «верстальщика» встречаются требования присущее «Фронтенд-разработчику». А в требованиях к последнему указывают навыки backend-разработки, что делает из него fullstack- или web-developer’а.
Интересная ситуация складывается с названиями вакансий: frontend-разработчик, javascript-разработчик, react-разработчик, angular-разработчик, web-разработчик – все эти названия прямо или косвенно относятся к фронтенду.
Давайте разложим по полочкам: верстальщик < frontend-разработчик < web-разработчик . Читаем так: в обязанности веб-девелопера входит фронтенд-разработка, а фронтенд включает в себя верстку сайтов, но гораздо обширнее её. Если читать в обратную сторону, то получаем одну из ветвей развития веб-программиста.
Фронтенд-разработчик и веб-дизайнер: отличия и взаимодействие
В интернете я нахожу информацию, что frontend-разработчик делает сайты и веб-приложения удобными для использования. Даже называют это главной задачей. Но это неверно. За удобство пользования ресурсом отвечает веб-дизайнер (или даже отдельно UI-дизайнер + UX-дизайнер). Именно веб-дизайнер создает удобный макет сайта (расположение объектов, шрифты, цвета, продумывает анимацию). А frontend-разработчик переносит это в код и заставляет работать.
Да, сейчас идет трансформацию веб-дизайнеров: они постепенно овладевают навыками верстки. Но я считаю, что такое позволительно только фрилансерам или сотрудникам маленьких веб-студий. Дизайн – это не просто кнопочки подвигать, чтобы было красиво. Это большая аналитическая работа, результатом которой являются конверсии и продажи. А верстка – это не такой простой инструмент как кажется на первый взгляд. Это десятки библиотек и фреймворков со своей экосистемой и правилами.
Да, frontend-разработчик должен понимать в основах веб-дизайна, как и дизайнер в основах верстки. Но никак нельзя полностью отдать верстку дизайнеру, а фронтендеру дизайн. Именно из-за такой мешанины и получаются в большинстве своем достаточно средние сайты: или UX/UI плохо продуман, или что-то криво работает.
Что должен знать и уметь Frontend-разработчик в 2020 году: ключевые навыки, инструменты и требования
Frontend-разработчик должен быть хорошим верстальщиком. Не Senior уровня, но он должен справляться с версткой макета любой сложности. К ключевым навыкам верстальщика относятся:
- адаптивная и кроссбраузерная верстка готовых PSD-макетов – удобное отображение сайта во всех браузерах и на всех устройствах;
- адаптивная и кроссплатформенная верстка e-mail писем для рассылок – каждый почтовый клиент читает код по-своему, а нужно, чтобы письмо отображалось везде одинаково;
- семантическая верстка – осмысленное расположение фрагментов кода на странице, правильное использование тегов, понятные названия классов и идентификаторов;
- оптимизированная под поисковые системы верстка – скорость загрузки, структурированный код, акценты для поисковых систем, теги title, description и alt + title для изображений;
- верстка под CMS (системы управления контентом) – создание шаблонов и их «натяжка» на системы управления контента.
Инструменты верстальщика:
- HTML + CSS – нужны максимальные знания. Это основные инструменты. Особое внимание уделяйте Flexbox и Grid CSS;
- jQuery и AJAX – нужны для создания динамических элементов на странице (слайдеры и параллаксы, калькуляторы) и для отправки формы заявок;
- Препроцессоры CSS (SASS, LESS, Stylus и т.д.) – позволяют писать CSS быстрее;
- Photoshop – нужен для разбора макета на составляющие;
- BEM, OOCSS, SMACSS – международные методологии построения структуры CSS;
- SVG и Canvas – работа с изображениями;
- Media Queries – для кроссбраузерной и кроссплатформенной верстки;
- Любой шаблонизатор – для динамической подстановки данных;
- WordPress, MODx, Joomla!, Drupal, OpenCart, Битрикс и др. – популярные системы управления контентом (CMS);
Для начала работы верстальщиком потребуется только адаптивная и кроссбраузерная верстка. Остальное придет с опытом. Уровень верстальщика определяется работой со сложными свойствами CSS и его уровне в JavaScript. В плане JavaScript верстальщику хватает изучения двух библиотек – jQuery и AJAX.
После изучения верстки погружаемся в JavaScript, а именно:
- стандарты языка – ECMAScript 5, 6 и новый 7;
- сборщики JavaScript: Gulp, Grunt, WebPack;
- популярные фреймворки и библиотеки: React + Redux, Angular, Vue, Svelte, Backbone, ExtJS, RxJS, Ember, GWT, Knockout, Dojo, Polymer;
- понимание работы браузера: построение DOM, рендеринг JavaScript;
- прогрессивные Web-приложения: Storage, Web Sockets, Service Workers, изучение различных APIs использующихся в PWA;
- тестирование приложений: Jest, Enzyme, Cypress, Mocha, Chai, Ava, Karma и др.