В этой статье пойдет разговор о том, кто такой веб-разработчик и чем он занимается. Отдельное внимание уделим навыкам, которыми должен обладать такой специалист.
Веб-разработчик — кто это?
Современный разработчик web-приложений занимается разработкой сайтов, онлайн-сервисов и соответствующего ПО. Это как раз тот случай, когда слово web говорит само за себя.
Для справки: Web переводится с английского как «паутина». Речь идет о глобальном интернет-пространстве — всемирной системе объединенных компьютерных сетей, предназначенных для хранения/передачи/обмена информацией.
Сегодня, когда упоминают веб-разработчика, чаще всего имеют виду фронтендера, который имеет представление и о бэкенде. В большинстве случаев именно фронтенд-разработка является основной прерогативой такого специалиста и именно фронтенд является большей частью работы. Однако в современных реалиях веб-разработчику все чаще надо разрабатывать еще и бэкенд — если не весь, то какие-либо его части (типичный пример — задачи, решаемые веб-разработчиком с помощью Node.js). Фронтенд — то, что видит пользователь, бэкенд — то, что остается за пределом видимости (серверная часть); подробнее об этих понятиях можно почитать здесь.
Задачи, решаемые веб-разработчиком
На практике это:
— создание онлайн-сервисов;
— создание новых сайтов, поддержка/модернизация/дополнение уже существующих сайтов;
— создание веб-приложений.
С результатом такой работы ежедневно сталкивается почти каждый, кто пользуется:
— социальными сетями;
— развлекательными онлайн-порталами;
— банковским программным обеспечением;
— сервисами по просмотру видео;
— другими приложениями, программами и сайтами, работающими как на персональных компьютерах, так и на мобильных гаджетах.
Весь этот софт связывает термин Web — понятие, подразумевающее огромную вселенную, существующую в интернете. Отсюда вытекает простой вывод — разработчик с такой специальностью решает задачи, связанные с web-программированием (веб-разработкой).
Стадии работы
Как все выглядит на реальном проекте? Если простыми словами, то веб-разработчик выполняет следующие действия:
— изучает задачу, поставленную заказчиком;
— участвует в создании оптимального решения;
— разрабатывает код для фронтенда/бэкенда;
— исправляет ошибки после тестирования программного обеспечения;
— развертывает код на сервере.
Общий цикл разработки, а также основные стадии и используемые инструменты продемонстрированы на картинке ниже:
Не будет лишним рассмотреть этот процесс с точки зрения разницы между бэкенд- и фронтенд-задачами на примере:
1.Веб-разработчику дали задание создать адаптивный лендинг для сайта продукта. Роли следующие:
- бэкендер. Создает код для сбора и хранения информации, которую пользователи оставляют на лендинге через форму обратной связи;
- фронтендер. Выполняет верстку макета лендинга сайта с учетом кроссбраузерности и кроссплатформенности (на разных устройствах и в разных браузерах все компоненты должны выглядеть корректно и в соответствии с требованиями).
2.Вторая задача — интеграция на сайт платежной системы:
- бэкендер. Создает структуру, обеспечивающую фиксацию данных о переводах средств, передачу этих данных в финансовое учреждение, оповещение пользователей и (или) владельцев сервиса;
- фронтендер. Внедряет решение непосредственно на сайте либо в application, отвечает за корректную работу всего функционала (интерфейс приложения должен адекватно реагировать на действия пользователя, выдавать сообщения об ошибках/выполненных операциях).
3.Последний таск — создание интерфейса для регистрации и авторизации:
- бэкендер. Отвечает за обработку данных и их передачу на сервер с последующим сохранением, обеспечивает защиту данных;
- фронтендер. Отвечает за всю видимую (внешнюю) часть приложения: анимацию, функциональные кнопки и т. п.
В процессе решения поставленных задач веб-разработчику приходится тесно взаимодействовать и с другими членами команды: дизайнерами, менеджером, тестировщиками и т. д. Это может быть необходимо для решения спорных вопросов, обсуждения деталей, сроков, предложений по улучшению и прочих рабочих моментов.
Основные инструменты
Можно продемонстрировать инструменты на примере процесса создания сайта интернет-магазина. Все начинается с получения разработчиком соответствующей задачи и оценки сроков ее выполнения. На этом этапе developer может задать интересующие вопросы техническому директору или руководителю разработки (тимлиду). Когда нюансы и сроки предварительно оговорены, таски фиксируются в трекере задач. Какие трекеры сегодня используют:
— Яндекс.Трекер;
— Trello;
— YouTrack и другие.
Интернет-магазин — объемный проект. Для соблюдения сроков и повышения эффективности работы команды задание декомпозируют — разбивают на мелкие части.
При разработке отдельной функциональности все начинается с коммуникаций с дизайнером, т. к. надо изучить макет и выяснить все детали. Здесь используют графические редакторы:
— Sketch;
— Figma.
Далее можно приступать к написанию кода. Чаще всего используют специальные текстовые редакторы или среды разработки (IDE) — VS Code, WebStorm и пр.
Написанный код тестируют QA-инженеры. Они проверяют, соответствует ли фактический результат использования программы ожидаемому, качественно ли работает приложение, есть ли дефекты, какова степень серьезности найденных недостатков. Тут применяется как ручное, так и автоматизированное тестирование, иногда к автоматизированному тестированию привлекают веб-разработчика. Автотест может имитировать действия пользователя при покупке какого-нибудь товара в интернет-магазине, а результаты такого тестирования записываются в логи (обеспечивается журналирование процесса). При внесении изменений в код или изменении окружения происходит повторное тестирование (его называют регрессионным).
Найденные дефекты оформляются в баг-репорты и отправляются программисту для устранения. Все этапы фиксируются специальными инструментами. Для отслеживания багов используется Jira и прочие бак-трекинговые системы, для контроля версий создаваемого программного обеспечения применяют Git, Github.
Что важно уметь web-разработчику?
При освоении профессии понадобятся следующие знания:
- Верстка и программирование. Надо знать HTML, CSS, JavaScript. Вышеперечисленные технологии — лишь необходимая база. HTML — стандартизированный язык разметки страниц в интернете, CSS — каскадная таблица стилей, отвечающая за внешний вид, язык программирования JavaScript отвечает за реагирование элементов на пользовательские действия. Лучше всего, если освоение языков происходит в условиях реального проекта — тогда происходит освоение и сопутствующих инструментов: графических редакторов и редакторов кода, инструментов разработчика в web-браузере и т. п. Также стоит упомянуть PHP — это скриптовый язык программирования общего назначения, который активно применяется при разработке веба и создании динамических web-сайтов. Его знание позволяет работать с серверной частью.
- Браузерные API. Application Programming Interface — интерфейсы, обеспечивающие взаимодействие. Пример: программист пишет код для сервиса стриминга музыки. Надо, чтобы мелодия останавливалась, если юзер снимает блютуз-наушники. Но вот незадача — в языке программирования JavaScript отсутствуют средства работы с Bluetooth. Проблема решается путем предоставления этих средств различными браузерами в виде API. Также в браузерах существуют API для взаимодействия с веб-камерой или для определения геолокации пользователя.
- Фреймворки. Соответствующие фреймворки заметно упрощают разработку больших проектов, уменьшают затраты на их развитие и поддержку. Такие фреймворки, как React и Vue дают возможность представить интерфейс в виде набора отдельных компонентов. Единожды создав такой компонент, его можно будет применять и в других местах web-сайта и даже в других проектах.
- Серверное взаимодействие. Требуется понимание работы HTTP-протокола и знание клиент-серверной архитектуры (особенностей взаимодействия клиента с серверов). Это даст возможность получать и отправлять данные —выполнять запросы (requests) и получать ответы (responses), а также настраивать взаимодействие со сторонними веб-сервисами в случае надобности.
- Soft skills — личностные навыки. Не обойтись без высоких коммуникативных способностей, ведь придется много взаимодействовать с дизайнерами, менеджерами, коллегами по разработке, тестировщиками и другими людьми в компании. Также надо уметь спокойно относиться к конструктивной критике, быть готовым устранить ошибки и недоработки, быть способным к адекватной оценке поставленных тасков, уметь правильно планировать свое время и выдерживать сроки. Чтобы достичь успеха и стать действительно профессионалом, нужно иметь большое стремление к постоянному развитию и совершенствованию своих навыков.
Какое количество времени понадобится для обучения, зависит от исходного уровня знаний. Освоить все необходимое одному можно, но это произойдет не за один день. Если вы начнете тратить не меньше 10 часов на обучение еженедельно, то приблизительно через полгода вы существенно продвинетесь в своих знаниях. Также может помочь платный курс, но тут надо быть очень внимательным с выбором, т. к. качество курсов различается, что зависит и от образовательной онлайн-платформы, и от преподавательского состава. Не будет лишним и заранее просмотреть несколько интересующих вакансий на рынке труда — это поможет узнать актуальные требования работодателей и понять, какие навыки надо подтянуть.
По материалам статей:
- https://academy.yandex.ru/posts/chem-zanimaetsya-veb-razrabotchik-i-kak-nachat-rabotat-v-etoy-oblasti;
- https://checkroi.ru/blog/professiya-veb-razrabotchik/.
