Фронтенд-2021: тенденции, как мы их видим

Trunk based development (TBD). Assess

TBD — это модель ветвления, которая диктует частые интеграции и отсутствие долгоживущих веток. Для реализации этих требований должны быть развиты процессы и инфраструктура разработки.

В TBD ветки с новым кодом вливаются в основную ветку не реже чем раз в 24 часа. С помощью этого команда получает ускоренный цикл обратной связи по задаче. В более распространенных моделях ветвления изменения дольше копятся, часто в момент попадания изменений в основную ветку объявляются неожиданные проблемы, исправление которых несет дополнительную сложность из-за позднего времени их обнаружения. В TBD все изменения делаются максимально атомарными, интегрируются с самой новой версией основной ветки как можно чаще, что создает определенные требования к архитектуре приложения, такие как поддержка Feature Flags, чтобы иметь возможность отключать из исполнения еще не завершенные задачи.

Частые интеграции с основной веткой требуют хорошего покрытия автоматизированными тестам. Если автоматизированное тестирование прошло ложно-успешно и некоторая функциональность сломалась, то команда, работающая над другими задачами, это заметит на раннем этапе, и исправления будут внесены быстро

Совместно с TBD ценность парного программирования возрастает за счет важности код-ревью прямо в моменте создания кода и стремления выявить ошибки в коде на ранних этапах. При использовании TBD участники команды лучше видят, кто над чем работает, а не ждут крупного логического этапа для ревью

Модель TBD является более командной за счет атомарных изменений короткими циклами, что позволяет выявлять проблемы на самом раннем этапе работы, что в сумме повышает эффективность команды. TBD хорошо приживется в командах со зрелой инженерной культурой.

Профессиональные навыки

Как и прежде, фронтенд-разработка стоит на трёх китах — HTML, CSS и JavaScript.

HTML

Без понимания разметки дальше не продвинуться, ведь это каркас сайта. Вы должны изучить базовые теги и атрибуты, понимать анатомию HTML-разметки, а также быть в курсе доступности и основ SEO. Не забывайте и об HTML5 — пятой версии, которая встречается в требованиях каждой первой вакансии. Развитие HTML нельзя назвать быстрым, поэтому у вас будет большое преимущество, если вы уже знаете язык разметки.

Материалы для изучения HTML:

• Основы HTML
• Книга Марка Пилгрима «Погружение в HTML5»
• Порядок выполнения скриптов в HTML
• Видеокурс «HTML5 для начинающих»

CSS

Также важно научиться стилизовать элементы с помощью CSS и делать это правильно, например повторно используя стили для одинаковых элементов. Сперва освойте блочную модель и позиционирование содержимого — компоновку, выравнивание и центрирование элементов, а также их видимость

Почитайте об адаптивном и отзывчивом дизайне. Далее переходите к медиа-запросам, чтобы учитывать технические параметры различных устройств. Неплохим бонусом станет навык работы с CSS Grid и Flexbox. После углубляйте знания, изучая архитектуру и препроцессоры.

Материалы для изучения CSS:

• Основы CSS
• Функциональный CSS: упрощаем работу со стилями
• О CSS Grid и Flexbox простыми словами
• и CSS Diner
• 18 советов по CSS, которые сделают жизнь разработчика проще

Чтобы получить первые практические навыки в работе с HTML и CSS, следует сверстать несколько страниц: это можно сделать как по шаблонам из приведённых статей, так и написать полностью самостоятельный проект.

JavaScript

Ну и как же стать фронтенд-разработчиком, не зная в 2021 году JavaScript? На «плечи» этого языка ложится функциональность сайта: действия по нажатию кнопок, заполнение форм, прослушивание событий, запуск триггеров и многое другое. Не стоит пренебрегать основами и сразу переходить к изучению «модного» фреймворка — изучайте язык постепенно.

Так, вам потребуется освоить синтаксис и базовые конструкции

Обратите внимание, что JavaScript — язык со слабой типизацией, то есть выполняет неявное преобразование типов автоматически. Это значит, что вы можете написать что-то вроде и не получить никакой ошибки

Напротив, результат будет строкой — . Вы можете почитать об этом подробнее в большом исследовании под названием WTF JavaScript.

Ну а мы вернёмся к дорожной карте по фронтенд-разработке

Важно освоить DOM, интерфейс для работы с HTTP-запросами и ответами Fetch API, технологию AJAX и XMLHttpRequest, ECMAScript 6+, модульный подход и веб-компоненты. Также пробегитесь по перечисленным концепциям вроде строгого режима и теневого DOM

Материалы для изучения JavaScript:

• Основы JavaScript + jQuery
• Современный учебник JavaScript
• Подборка книг для начинающего веб-разработчика
• 12 концепций, которые прокачают ваш JavaScript
• Топ-5 JavaScript-библиотек для бизнес приложений в 2020-2021

Где обучиться профессии с нуля?

Освоить профессию можно на интернет-курсах, где обучают практикующие специалисты. Вы освоите теорию, получите практику и работы, которые можно добавить в резюме. Ряд курсов помогают найти стажировку или найти вакансию.

Название	Описание
	Идет в университете Нетология. Подходит для новичков. Обучают 10 технологиям: HTML, CSS, JavaScript, JSX, XHR и AJAX, React, VirtualDOM, Flexbox, React Router. Студенты выполняют более 100 практических работ. Помогают с поиском работы.
	Подходит новичкам и студентам с базовым уровнем. Учат верстать, в том числе адаптивные макеты, писать скрипты на JS, использовать фреймворки. Отдельные уроки посвящены карьере в программировании, какие навыки востребованы, как искать заказы и работу.
	Учат основным front-end технологиям. Предлагают пройти стажировку. Сотрудничают с разными компаниями, которые могут предлагать студентам вакансии.

Учиться на курсах можно из любой точки мира, поскольку занятия идут в формате вебинаров – через интернет. Преподавателям можно задавать вопросы в чате. По практическим работам вы получаете обратную связь.

Machine learning in Frontend. Trial

ML может применяться в задачах разработки веб-интерфейсов. Благодаря библиотеке Tensorflow, которая является одной из популярных библиотек для ML и имеет версию для Node.js и браузера, мы получаем возможность машинного обучения на известном стеке. Здесь JavaScript подтверждает свою универсальность.

Эти возможности позволяют решать задачи такими способами, о которых раньше не задумывались, но для этого необходимо теоретическое знание ML. Пример задач, где применим ML, — повышение скорости работы интерфейса.

Одна из наших команд экспериментировала и сделала сервис, предсказывающий вероятность посещения следующей страницы. Затем интегрировала этот сервис в стратегию предзагрузки одного из проектов — теперь в некоторых случаях пользователь при переходе на следующую страницу увидит ее моментально, без ожидания загрузки. Мы разработали свое решение на базе Tensorflow.js. Конкретно для этой задачи существует open-source-решение от Google — Guess.js, которое на основе данных из Google Analytics делает похожее. Советуем попробовать.

Еще из примеров использования ML в задачах фронтенда можно выделить анализ кода для выявления дубликатов, анализ верстки на соответствие гайдлайнам и даже возможность поправлять ее, распознавать документы в браузере, не передавая их по сети, генерировать пользователям индивидуально подстроенный интерфейс, повышать accessibility — допустим, голосовым управлением.

Что такое фронтенд и чем занимается специалист

Frontend — это разработка интерфейса, с которым взаимодействуют пользователи. Называется она так, потому что это создание наружной части сайта или приложения, а значит, находится снаружи/спереди (front).

Фронтенд-разработчик — это программист и верстальщик в одном лице. По части программирования специалист пишет код при разработке интерфейса, по части верстки он вставляет интерфейс на сайт или приложение. Помимо этого, разработчик адаптирует интерфейс под различные платформы, например под компьютерный браузер и мобильный браузер.

Основная цель специалиста — сделать использование сайта или приложения максимально удобным для конечного пользователя. Интерфейс должен быть интуитивно понятным, не перегруженным навигационными элементами и в стиле веб-площадки. Эта профессия входит в сферу веб-разработки.

Главные инструменты в этой сфере — языки веб-разметки (HTML, CSS) и программирования (JavaScript):

• JavaScript используется для создания UI (user interface — интерфейс пользователя) с нуля;
• На HTML производится основная верстка, где интерфейс переводится на язык, понятный современным браузерам;
• Через CSS прикрепляются стили к структурированным документам (в случае с frontend это прикрепление стилей к документам HTML).

Фронтенд-специалист несет ответственность за то, чтобы все страницы сайта или приложения выглядели идентично во всех браузерах и их версиях, а также соответствовали макету, который был создан дизайнером (или самим веб-разработчиком). С каждым годом интерфейсы сайтов и приложений усложняются с технической стороны, зачастую становясь все более простыми для пользователя. Также к уже созданным устройствам добавляются новые, будь то планшеты, компьютеры, ноутбуки, смарт-часы и другие гаджеты.

Из этого выходит, что профессия фронтенд-разработчика требует постоянного обучения и нахождения в курсе событий в индустрии.

Отличие frontend от backend

Фронтенд-разработчик напрямую взаимодействует с пользователем через интерфейс, так как отвечает за все внешние элементы, с которыми контактируют клиенты/посетители сайта или веб-приложения.

За все обработки и действия, которые производятся на серверах, отвечает другой специалист — бэкенд-разработчик. Так как это разные профессии, в backend используется другой инструментал, включающий языки программирования PHP, Perl, Java, Python, Ruby, фреймворки и SQL для работы с данными. Кстати, на нашем сайте есть обзор профессии PHP-программиста.

В разработке любого сайта или веб-приложения участвуют оба специалиста. Так, пользователь выбирает определенные элементы в веб-интерфейсе, после чего на сервер отправляется запрос, результат которого отображается в интерфейсе. Есть fullstack-разработчик, который сочетает в себе обязанности и фронтенда, и бэкенда.

Достоинства и недостатки

Как и в любой сфере, во фронтенде есть некоторые плюсы и минусы. Поэтому в список того, что нужно знать фронтенд-разработчику-новичку, входит ознакомление с достоинствами и недостатками профессии.

Перечень плюсов:

• Востребованность специалистов;
• Хорошая зарплата;
• Довольно низкий порог вхождения по сравнению с другими IT-профессиями, ведь нужен всего один язык программирования, а языки разметки и стилей значительно проще;
• Есть как работа с исходным кодом, так и дизайнерская составляющая деятельности;
• Со временем можно изучить бэкенд и стать фуллстэк-специалистом.

Список минусов:

• Во многих вакансиях по этой специальности есть требования, касающиеся бэкенда;
• Обязательно взаимодействие с другими сотрудниками (далеко не для всех это минус);
• Хоть JavaScript и не такой сложный и требовательный, как, например, C++, для того чтобы им уверенно владеть, нужно иметь начальные знания алгебры.

MVC

Умные Парни попробовали перенести на фронтенд архитектурный шаблон с серверной части — MVC (модель-представление-контроллер). Этот шаблон диктует правило, что есть модель, которая описывает данные. Например, модель пользователя, модель фильма, модель отзыва. Есть контроллер, который обрабатывает запросы, например «показать по такому-то адресу страницу со списком фильмов». И есть представление, которое отвечает за отображение данных в HTML, в которое контроллер передаёт готовые данные, полученные из базы данных/API.

Здесь началась история single page application, SPA — приложений, которые загружаются один раз, а затем при переходе по страницам обращаются к серверу за данными по API. Этот подход называется AJAX. Вместо того, чтобы генерировать HTML на стороне сервера, сервер отдаёт клиентскую логику приложения один раз. Переходя на другую страницу, например с главной страницы на страницу поиска отелей, приложение запрашивает с сервера данные в чистом виде (к примеру, информацию об отелях), без тегов HTML (как правило в формате JSON), и самостоятельно генерирует представление.

Шаблон MVC на фронтенде был хорош, прекрасно работал, но было излишне сложно. Angular, Backbone — представители этой вехи истории. Они, к слову, живут и сейчас, но я в них глубоко не разбирался.

Шаблоны GUI сложны?

Если вы подробно изучили предыдущие шаблоны (Patterns), то поймете, что шаблоны GUI отличаются от других шаблонов разработки программного обеспечения. Возьмем, например, элементы многоразового объектно-ориентированного программного обеспечения (Elements of Reusable Object-Oriented Software). Большинство шаблонов не зависят от технологии или языка программирования. Однако то же самое не относится к шаблонам GUI.

Таким образом, практически невозможно обсуждать их в теории, не принимая во внимание фреймворки и языки программирования. До сих пор, с достаточно высоким уровнем абстракции, мы могли исследовать эти паттерны

Но по мере приближения к сути статьи мы будем отталкиваться от различных библиотек или структур для описания этих шаблонов.

Большинство шаблонов веб-интерфейса можно разделить на три этапа: эволюционный, революционный и современный.

Эволюционные шаблоны являются просто расширением серверной MVC. Они действительно не пытаются изобрести что-то новое. Они дополняют существующие приложения, улучшая свой UX шаг за шагом.

В то время как революционные шаблоны — это те идеи, которые отделяют разработку интерфейсных приложений от управляемых сервером рабочих процессов. Их прибытие отмечает известность SPA-приложений.

Современные шаблоны похожи на продвинутую версию этих революционных моделей и являются неким общим трендом, в сторону которого движется фронт-энд сообщество.

Конец первой частиЧасть 2

За что любят фронтенд?

Можно выделить несколько основных причин:

1. Есть возможность быстро получить визуальный результат своей работы. Здесь есть много пространства для творчества: визуализация своих идей, оптимизация решений, удобство пользования и др.
2. Лёгкий старт. Чтобы попробовать что-нибудь из фронтенд-разработки, не нужны никакие специализированные программы, компиляторы, сложные настройки и прочее. Необходимо лишь желание и любой простейший текстовый редактор. Во фронтенде IDE лишь помогают визуализировать логику кода и упрощают его написание, но не являются обязательной средой разработки или компиляции.
3. Много направлений для углубления знаний и развития: во время работы фронтенд-разработчик взаимодействует с дизайнерами, с бэкенд-разработчиками, тестировщиками, бизнес аналитиками, DevOps специалистами и так далее. При желании всегда можно немного отстраниться от фронтенда и попробовать себя в чём-то новом — предложить дизайн, настроить CI/CD, писать автотесты или при возможности пробовать бэкенд. 
4. Постоянно нужно изучать что-то новое. Есть шутка о том, что во фронтенде каждый месяц появляется новый фреймворк. Это и плюс, и большой минус одновременно. С одной стороны, ты всегда сталкиваешься с чем-то новым и тебе приходится  учиться, пробовать и узнавать новые веяния, но с другой стороны, есть вероятность, что часть твоего опыта канет в небытие навсегда. В какой-то момент ты можешь устать всё время следить за трендами.

Поэтому один из весомых недостатков профессии — приходится быстро адаптироваться под обновления и, возможно, переписывать до этого рабочий код. Фронтенд сильно зависим от развития и обновлений браузеров. Если вы не любите рефакторинг, постоянное обновление используемых технологий и, как следствие, кода, то фронтенд точно не для вас.

Что читать для знакомства с фронтендом и бэкендом

Мы подобрали ряд книг, ознакомившись с которыми, вы сможете понять, что сложнее — frontend или backend — в вашем случае.

Front-end

HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств — Фрейн Бен

Книга, содержащая довольно много воды, но в случае с новичками это может помочь лучше закрепить базовый материал.

JavaScript. Шаблоны – Стоян Стефанов

Крайне полезная книга не только для начинающих оформителей веба, но и для маститых специалистов. Содержит наилучшие практики кода, которые наверняка будут часто использоваться в вашей дальнейшей работе.

CSS. Каскадные таблицы стилей. Подробное руководство – Эрик А. Мейер

В отличие от предыдущей книги, здесь практически отсутствует реальный код, зато есть огромное количество справочных данных.

Accessibility for everyone – Laura Kalbag

Литература, посвящённая построению правильного мышления в области создания не только красивого, но и практичного дизайна. Содержит кодовые и графические выкладки, что будет полезно даже совсем начинающим разработчикам.

Back-end

Изучаем PHP 7. Руководство по созданию интерактивных веб-сайтов – Давид Скляр

Одна из базовых книг по PHP. Скляра читал, наверное, каждый бэкенд-разработчик. Прекрасно подойдёт тем, кто начинает изучение с нуля. Всё чётко и подробно, а главное – с примерами.

Ruby on Rails для начинающих. Изучаем разработку веб-приложений на основе Rails – Майкл Хартл

Несмотря на заявленную в заголовке основную тему, читателю предлагается пройти весь путь веб-разработчика, начиная с основ HTML и СSS, и заканчивая довольно сложными сайтами и приложениями с использованием Ruby

Но важно отметить: языкам эта книга не учит, а вот тому, как создавать правильные приложения на «рельсах» – пожалуйста.. Django 2.1

Практика создания веб-сайтов на Python – Владимир Дронов

Django 2.1. Практика создания веб-сайтов на Python – Владимир Дронов

Как и в прошлой книге, для чтения этой книги необходимо хотя бы на базовом уровне владеть связкой HTML-CSS-JavaScript и Python. Книга примечательна тем, что содержит минимум воды и большое разнообразие примеров.

Spring в действии – Крейг Уоллс

Если вы хотите создавать веб на Java, эта книга будет очень полезна для вас. Языку здесь не обучают, но процесс создания бэкенда с использованием Spring здесь описан простым информативным языком. Следуя по главам шаг за шагом вы на себе ощутите как превращаетесь из зелёного новичка в знающего профессионала.

Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 – Робин Никсон

Всем, кто планирует связать свою жизнь с вебом – рекомендуем достать эту книгу в любом варианте. Очень легко читается, требует минимум базовых знаний, но при этом содержит уйму информации о том, как создаётся и работает современный веб.

Двигаемся к Модели приложения (Application model)

Вскоре стало понятно, что Application State не может быть полностью изолирован от GUI. Всегда существует какая-то логика представления (Presentation logic) или состояние представления (View state), которые необходимо поддерживать.

Но это может вызвать проблемы. Давайте возьмем наш предыдущий пример счетчика. Когда наш счетчик достигнет 10, мы должны изменить цвет метки с черного на красный, чтобы указать предупреждение. Такое поведение изменения цвета на самом деле не является бизнес-логикой или задачей. Это чисто эстетическая часть (UX), которая должна быть учтена. Настоящий вопрос — где? Это должна быть Модель или Представление?

Поскольку эта Логика представления или Состояние представления в основном представляет собой состояние, полученное из Модели предметной области, оно должно поддерживаться в Модели. Но Модель предметной области, поддерживающая визуальный аспект, — то есть красный цвет — по определению не очень хорошо. Если же мы поместим это в объект Представление, то это создаст еще один набор проблем. Наш виджет больше не является шаблонным. Мы не можем использовать его в другом месте. Кроме того, добавление условия с жестко закодированным числом 10 в наш объект View означает, что мы ограничиваем некоторую часть бизнес-логики.

Чтобы решить эту проблему, в исходную MVC была добавлена еще одна сущность — Модель приложения (Application Model, AM). Как видно на рисунке, с Моделью приложения пара View-Controller не имеет прямого доступа к модели. Вместо этого они регистрируются в событиях Модели приложения и используют его для доступа к необходимым данным.

Потоки данных остаются такими же, как и у классического MVC. Конечно, у каждой модели есть свои плюсы и минусы, и AM-MVC не исключение. Наиболее заметная проблема заключается в том, что Application Model не имеет прямой ссылки на объект View и, следовательно, не может манипулировать им напрямую, даже если Application Model предназначена для поддержания состояния View.

CSS-фреймворки, адаптивность

Теперь мы сменим тему на попроще и поговорим о вёрстке.

Исторически, чтобы создать сетку страницы, её каркас, в первые времена верстальщики использовали таблицы. Потом начали использовать блоки, или контейнеры, появилась контейнерная вёрстка. Положение блоков устанавливалось с помощью свойства позиционирования .

В настоящее время всё упрощается, уже почти все браузеры поддерживают Flexbox и CSS Grid — современные удобные способы верстать сетку страницы. Их умелое сочетание позволяет в несколько свойств добиваться таких положений контейнеров, над которыми пришлось бы старыми методами изрядно попотеть, позволяя с лёгкостью выполнить практически любые дизайнерские изыски.

Адаптивность — это способность страницы выглядеть одинаково хорошо на всех устройствах, будь то ноутбук, планшет или мобильный телефон. Адаптивность достигается с помощью медиа-запросов — блоков условий в CSS, при каких разрешениях экрана какие CSS-свойства должны работать. Её можно также добиться с помощью умелого применения flexbox-контейнеров.

Все веб-приложения в основном типичны, состоят из строк, колонок, таблиц, кнопок и других UI-элементов. Чтобы не писать их каждый раз, в помощь сайтостроителям создавались CSS-фреймворки, где вся разметка уже продумана — достаточно применить нужный класс. Они содержат в себе множество готовых UI-элементов. Самый популярный — конечно же Bootstrap, сейчас уже 4-я версия. Есть ещё Bulma, тоже довольно хороший. И ещё множество менее популярных

Обычно в CSS-фреймворках адаптивность идёт из коробки, важно лишь правильно пользоваться предлагаемыми инструментами. CSS-фреймворки станут отличной основой практически в любом вашем веб-приложении и хорошим началом освоения навыков правильной вёрстки

Их стоит использовать, когда нужны типичные элементы пользовательского интерфейса, адаптивность, а это 99% кейсов в вебе.

Кроссбраузерность

Это слово означает способность сайта отображаться одинаково в разных браузерах. Как правило, CSS-фреймворки берут эту заботу на себя, но я вкратце расскажу, как это достигается. Для начала нужно обнулить все свойства стандартных элементов (разные браузеры отображают стандартные элементы — списки, таблицы и др. по-разному). В CSS-фреймворках для этого часто можно увидеть специальный файлик — reset.css. Следующее — исторически так сложилось, что браузеры развивались по-разному, и теперь некоторые CSS-свойства нужно прописывать специально для каждого браузера, используя префиксы — , . Эту работу можно делать автоматически с помощью вышеупомянутого PostCSS и его autoprefixer.

Методологии

Чтобы вёрстка не превратилась в суп, ничего внезапно не ехало, всё было чётко и красиво — существуют специальные подходы, сборники правил о том, как называть тот или иной класс. Они очень вписываются в компонентную архитектуру, надо сказать, с них она и началась. Правило то же — всё есть компонент, или по-другому «блок». У блока есть свои элементы, мини-блоки, из которых и состоит блок. Изменяют отображение блока модификаторы, применяя к нему то или иное свойство. Изучите БЭМ от Яндекса или SUIT CSS, прежде чем начинать заниматься верстанием.

Как стать backend-разработчиком с нуля

Большинство backend-разработчиков – это бывшие фронтенд-специалисты. Они уже знают часть нюансов работы и примерно понимают, что их ждет. Чтобы сделать первые шаги в должности backend-developer, надо знать любой язык программирования и уметь правильно писать коды.

Другие инструменты изучить тоже придется, но какие именно – зависит от проекта. Их можно осваивать по ходу работы.

Если новичок хочет освоить профессию и у него совсем нет опыта работы в данной сфере, ему придется проштудировать много статей и книг по backend-разработке, смотреть бесплатные обучающие видео и практиковаться.

Большим плюсом станут глубокие математические познания и высшее образование, связанное с IT-сферой.

Портфолио играет большую роль для работодателей. Собрать примеры выполненных работ можно после выполнения небольших заданий. Помощь в этом могут оказать биржи фриланса или курсы по backend-разработке.

Где учиться

Освоить все самому с нуля, да еще и влиться в компанию веб-разработчиков в качестве бэкенд-программиста, сложно. Поэтому для тех, кто понятия не имеет, что такое язык серверного программирования или фреймворки, лучшим вариантом будет записаться на курсы.

Вы изучите теорию и попробуете работу на практике, чтобы до конца разобраться, ваша эта деятельность или нет

Реальный опыт других специалистов покажет вам подводные камни профессии и детали, на которые стоит обратить внимание

Вы получите не фрагментарную информацию, как при самообучении, а целостный и полный набор знаний и навыков.

Кроме того, создатели курсов часто оказывают помощь в трудоустройстве.

Курсы для новичков и для тех, кто хочет знать больше:

• Профессия Java-разработчик
• Профессия‌ ‌PHP-разработчик‌
• Профессия 1С-разработчик
• Профессия Python-разработчик
• Python-разработчик с нуля
• Программирование
• Веб-разработчик с нуля
• Fullstack-разработчик на PHP
• Профессия‌ ‌PHP-разработчик

Решайте, что выбрать: изучение деятельности только бэкенд-специалиста или еще и фронтенд-разработчика. И остановитесь на обучающей платформе, подходящей лично для вас.

Где искать работу

Backend-разработчик нужен во всех сферах, где есть сайты или приложения, например, в IT-компаниях по созданию веб-сервисов или web-студиях.

Работа может быть как офисной, так и на дому. Второй вариант подойдет специалистам из регионов. Так те разработчики, кто не проживает в столице, могут искать вакансию в крупных фирмах, которых нет в глубинке.

А у бэкенд-программистов с опытом работы есть возможность попытать удачу на зарубежной арене. В международных проектах предлагают зарплату больше.

При этом обязательно надо знать английский, чтобы вести переговоры с иностранными заказчиками. Если вы не изучали этот язык – предлагаю вам ознакомиться с перечнем курсов английского языка на нашем блоге.

Понятие Frontend-разработки

Под понятием Frontend подразумевается разработка видимого для пользователя интерфейса и всех функций, с которыми он может взаимодействовать. По сути, когда вы переходите на любой сайт, то видите там кнопки, текст, различную анимацию и другие составляющие – все это реализовано при помощи фронтенда. Для создания этих элементов используются три разных языка – HTML, CSS и JavaScript.

Посмотрите на структуру страницы прямо сейчас – для этого на любом сайте вызовите консоль разработчика, нажав клавишу F12. Вы увидите набор строчек кода, которые и формируют внешний вид данной страницы.

Код страницы используется для описания всего видимого: шрифтов, картинок, размеров элементов, анимаций, всплывающих окон, звуков при нажатиях и всего другого, с чем может взаимодействовать пользователь. За каждую из частей интерфейса отвечают разные языки. Как раз те, что и должен выучить frontend-разработчик.

HTML

Основной инструмент в этой сфере – язык гипертекстовой разметки HTML. Он нужен в основном для разметки документа, то есть страницы в браузере. С помощью него разработчик создает структуру, добавляет заголовки, списки и осуществляет другое форматирование контента.

CSS

Если разработчик учит HTML, он обязательно осваивает и CSS (Cascading Style Sheets). Этот язык отвечает за внешний вид страницы. С его помощью вы работаете с цветами, шрифтами и расположением различных блоков. Если простыми словами, то CSS используется для красивого оформления страницы и настройки ее внешнего вида уже после того, как основная структура была написана при помощи HTML.

JavaScript

С помощью JavaScript реализуется выполнение различных действий на странице, то есть добавляется анимация и отклик на запросы пользователя. Например, страница реагирует на перемещение курсора и клики мышкой, изменяя поведение элементов в соответствии с действиями пользователя. Благодаря JS осуществляется отправка и получение данных с сервера без необходимости перезагрузки страницы, а значит, некоторые задачи реализуются более просто, например, когда речь идет об отправке и получении сообщений.

Фронтенд – это сфера, в которой разработчик создает видимые для пользователя элементы интерфейса и все функции для взаимодействия с сайтами и приложениями. Все это тесно связывается с бэкендом, о котором пойдет речь далее.

Карьерный рост и зарплата

Карьера бэкенд-разработчика начинается со ступени “стажер”. Средняя заработная плата – 20–40 тыс. руб.

Далее идет младший backend-программист. Он как минимум прилично разбирается в одном языке программирования и может работать с базой данных. Младший специалист знает, где искать информацию и как выполнить мелкое поручение.

Он работает под началом своих старших коллег и перенимает у них опыт. Зарабатывает от 30 до 60 тыс. руб.

Средний специалист на продвинутом уровне разбирается в языках программирования. Активно использует фреймворки и начинает самостоятельно выполняет задачи на проекте. Зарплата колеблется в районе 70–120 тыс. руб.

Старший бэкенд-разработчик имеет опыт работы от 3 лет, хорошо знает специфику и особенности своей деятельности, быстро приспосабливается к новым условиям и коллегам.

Проектирует и решает сложные задачи, работает в проектах крупного масштаба. Часто консультирует других программистов.

Обладает развитыми навыками общения, может поладить как с заказчиком, так и с другими работниками. Имеет ярко выраженные управленческие черты.

Цена за его работу начинается от 150 тыс. и может удваиваться, а в некоторых случаях – утраиваться.

После карьеры бэкенд-разработчика можно осваивать новую вершину – должность фулстек-разработчика – специалиста, совмещающего в себе frontend и backend-программиста.

Если говорить о зарплатах в городах, то выстраивается такая картина:

1. Москва: 80 000–300 000 руб.
2. Санкт-Петербург: 70 000–250 000 руб.
3. Калининград: 40 000–170 000 руб.
4. Ростов-на-Дону: 30 000–220 000 руб.
5. Омск: 40 000–150 000 руб.
6. Хабаровск: 60 000–160 000 руб.

Все цифры – это средние значения. Все зависит от навыков программирования, общих тематических знаний, опыта и личностных характеристик.