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

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

Базовые технологии

Веб-разработку разделяют на frontend и backend. Frontend отвечает за работу на стороне клиента, корректное отображение веб-страниц на разных типах устройств. Backend – всё, что происходит на стороне сервера: вычисления, работа с базами данных, взаимодействие с другими сервисами.

Под Web Developer обычно понимают программиста, который умеет работать и на стороне клиента, и на стороне сервера. Универсального программиста, который может сделать проект с нуля, разбирается в базах данных, конфигурировании сервера, безопасности, называют Full Stack Web Developer. Более узких специалистов – Backend Web Developer и Frontend Web Developer.

Базовые технологии Frontend

HTML – язык разметки страниц, костяк веб-страницы. С помощью HTML мы подключаем JS-скрипты и CSS-стили и определяем элементы страницы: текст, заголовки, поля ввода информации, переключатели и кнопки.

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

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

Базовые технологии Backend

На стороне сервера может использоваться множество технологий и различных языков программирования. Рассмотрим самые востребованные из них.

PHP. 4500 вакансий по России. Самый популярный язык программирования на стороне сервера: 80% сайтов и сервисов в Интернете написаны на PHP. Язык обладает большим сообществом, огромным количеством готовых библиотек, фреймворков, учебных материалов и руководств. Если вы делаете первые шаги в профессии веб-разработчика, рекомендуем начать с PHP. Язык легок в освоении, используется не только в любительских, но и больших профессиональных проектах: Facebook, VK, Wikipedia, BlaBlaCar. Средняя зарплата – 200 000 руб. (здесь и далее зарплаты указаны до вычета НДФЛ).

Java. 2200 вакансий по России. Популярный язык программирования, но с высоким порогом входа. Применяется в средних и крупных проектах. С помощью Java-фреймворка Spring создаются высокопроизводительные, масштабируемые и безопасные приложения. Средняя зарплата – 250 000 руб.

Python. 1800 вакансий по России. Язык с низким порогом входа. Дружелюбное комьюнити и развитая документация, пошаговые руководства и видеоуроки позволят быстро прояснить любой вопрос. Наиболее зрелая и популярная технология – фреймворк Django. Python применяют в проектах любого размера, на нем частично написаны такие сервисы, как YouTube, Google Search, Instagram и Spotify. Средняя зарплата – 160 000 руб.

Node.js. 1500 вакансий по России. Технология Node.js позволяет строить высоконагруженные, легко масштабируемые решения при помощи языка JavaScript. Если вы уже имеете опыт во фронтенд-разработке, то сможете быстро начать программировать на Node.js. Технологию применяют в проектах, где важна одновременная обработка большого количества запросов. Активно используется компаниями Paypal, Yahoo! и eBay. Средняя зарплата – 205 000 руб.

ASP.NET. 1300 вакансий по России. Если вы уже знаете язык C#, то вам подойдет фреймворк ASP.NET. Свои преимущества фреймворк полностью раскрывает только при работе в инфраструктуре Microsoft. Технологию используют Starbucks и StackOverflow. Средняя зарплата – 160 000 руб.

Язык/технология	Зарплата, тыс. руб	Количество вакансий (на 15.09.20)	Популярность на GitHub (среди перечисленных технологий)	Популярность на StackOverflow, %
PHP	200	4500	3	26.2
Java	250	2200	2	40.2
Python	160	1808	1	44.1
Node.JS	205	1456	4	24.5
ASP.NET	160	1314	5	18.7

Источник статистики по StackOverflow, источник статистики GitHub, статистика по вакансиям взята с hh.ru, статистика по зарплатам предоставлена компанией Hays

Общие технологии продвинутого уровня

Развертывание инфраструктуры

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

• веб-сервер (например, Nginx или Apache);
• серверная операционная система: веб-приложения редко работают на Windows или MacOS, отраслевым стандартом является Linux;
• интерпретатор языка нужной версии – в зависимости от того, какие новые функции языка необходимо использовать или какую версию требует фреймворк;
• база данных (например, MySQL или PostgreSQL).

Книги по теме:

• Unix и Linux. Руководство системного администратора, Эви Немет, Гарт Снайдер, Трент Р. Хейн, Бэн Уэйли
• Unix. Программное окружение, Брайан У. Керниган, Роб Пайк
• MySQL по максимуму. 3-е издание, Зайцев Пётр, Ткаченко Вадим, и Шварц Бэрон
• Базы данных. Проектирование, реализация и сопровождение. Теория и практика, Коннолли Томас, Бегг Каролин
• Администрирование сервера NGINX, Айвалиотис Д.
• NGINX. Книга рецептов, Дерек де Йонге

Тестирование

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

Книги по теме:

• Тестирование Дот Ком, Роман Савин
• Как тестируют в Google, Арбон Джейсон, Каролло Джефф, Уиттакер Джеймс
• Искусство тестирования программ, Гленфорд Майерс, Том Баджетт, Кори Сандлер
• Быстрое тестирование, Роберт Калбертсон, Крис Браун, Гэри Кобб

Наши статьи по теме:

• 4 причины, которые обязывают нас тестировать приложения
• Открытые Linux-бенчмарки: для нагрузочного тестирования серверов и веб-приложений
• Кто такой QA-инженер и как начать свой путь в тестировании?
• Как найти подход к автоматизации тестирования
• Протестируй это: принципы и законы создания тестируемого кода
• Погружаемся в основы и нюансы тестирования Python-кода

Системы контроля версий

Сложное веб-приложение невозможно за приемлемое время написать одному человеку: для этого необходима команда специалистов, которые разделяют между собой обязанности и ведут распределенную кодовую базу. Для этого используются системы контроля версий, самой распространенной из которых является Git. Знание GIt гарантированно потребуется при трудоустройстве веб-девелопером.

Наши статьи по теме:

• Основы Git: контроль версий для самых маленьких
• Git-мастер: 3 простых шага для достижения цели
• Лучший курс по Git от Lynda.com. На русском
• Как использовать Git эффективно: налаживаем работу Git workflow
• 11 концепций и команд git, которые заставят вас плакать
• Ветвление Git с примерами из реальной жизни

Пакетные менеджеры

Вокруг каждого языка программирования и фреймворка сформировалась инфраструктура: библиотеки, расширения, пакеты. Зачем писать собственный http-клиент, если существует хорошо отлаженный пакет с нужным функционалом? Так, в PHP используется composer, в Java – Gradle, в JavaScript и Node.Js – npm, в Python – pip.

Продвинутый Frontend

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

Frontend-фреймворки развиваются очень быстро, каждый месяц появляются новые фреймворки и библиотеки. Не нужно пытаться узнать все, достаточно выбрать одну из наиболее популярных технологий, например, React, Vue или Angular.

Фреймворк	Количество вакансий	Репозиториев на GitHub	Популярность StackOverflow, %	Уровень сложности	Зависимостей в npm
React	4 280	73 458	35.9	⭐⭐	48 718
Angular	2 364	20 142	25.1	⭐⭐⭐	13 579
Vue	2 021	21 776	17.3	⭐	21 575

Источник статистики по StackOverflow, источник статистики GitHub, статистика по вакансиям взята с hh.ru

Продвинутый Backend

Backend-фреймворки менее разнообразны – обычно есть 1-2 лидера, которые занимают существенную часть рынка, а остальные либо узко специализированы, либо технологически отстают от лидеров. Для PHP такими фреймворками являются Symfony и Laravel, для Java – Spring и JSF, для Python – Django, Pyramid и Flask, для Node.JS – Express.JS, Meteor.JS и Koa.JS.

Ниже представлена сравнительная таблица оценки популярности PHP-фреймворков.

Фреймворк	Установок через composer	Зависимых проектов	Популярность на GitHub	Количество вакансий
Laravel	104 726 623	9 548	22 048	1 085
Symfony	52 561 771	3 971	23 880	819
Phalcon	29 504	2	10 232	47
CodeIgniter	773 857	65	18 071	52
Yii	10 393 997	11 540	217	890
CakePHP	6 027 870	1 649	8 234	10
Slim Framework	13 410 045	1 329	10 723	19
Lumen	535 795	53	6 900	45

Данные по количеству вакансий указаны по данным сервиса hh.ru, остальные данные взяты с сервиса packagist.org.

Продвинутый Web Developer: паттерны проектирования

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

Книги по паттернам:

• Паттерны объектно-ориентированного проектирования, Гамма Эрих, Хелм Ричард
• Приемы объектно-ориентированного проектирования. Паттерны проектирования, Гамма, Хелм, Джонсон
• Паттерны проектирования, Фримен, Фримен, Сьерра
• Паттерны проектирования на платформе .NET, Сергей Тепляков

Наши публикации о паттернах:

• Паттерны проектирования: твоя настольная статья
• Паттерны JavaScript: курс, который упростит разработку
• Шаблоны проектирования по-человечески: поведенческие паттерны в примерах
• Паттерны ООП простыми словами: паттерны поведения
• Паттерны ООП простыми словами: порождающие паттерны
• Шаблоны проектирования по-человечески: структурные паттерны
• Шаблоны проектирования по-человечески: 6 порождающих паттернов, которые упростят жизнь

Практическое освоение технологий

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

Домашние проекты

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

Ресурсы с задачами для программистов

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

• Задачи для оттачивания скиллов фронтендера
• Где JavaScript джуну получать тестовые задания для практики?
• 10 сайтов с задачами, которые сделают из вас профи
• 27 сайтов с задачками для оттачивания навыков программирования

Присоединяйтесь к проектам на GitHub

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

Заключение

Веб-программирование – сложная, но интересная область. Безусловно, можно стать веб-разработчиком и своими силами, но есть и более легкие решения. Например, вы можете пройти курс факультета веб-разработки онлайн-университета GeekBrains. Информация в курсе хорошо структурирована, с вами будет работать личный наставник, а портфолио пополнится 4 актуальными проектами.

Вы узнаете, как профессионально верстать, используя HTML и CSS, научитесь программировать на JavaScript (в том числе используя React). На стороне сервера вы освоите PHP (Laravel) и Node.js (фреймворк Express). Не будут обойдены вниманием базы данных (MySQL) и операционная система Linux. Всё сразу в одном месте. Отличный вариант, чтобы стать настоящим веб-разработчиком за приемлемое время.

Интересно, хочу попробовать!