Для построения новостного сайта, браузерной игры или сервиса видеоконференций требуются разные компетенции, однако базовые технологии одни и те же. Данный материал подготовлен при поддержке факультета веб-разработки онлайн-университета 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 ).
Книги по теме:
-
, Эви Немет, Гарт Снайдер, Трент Р. Хейн, Бэн Уэйли , Брайан У. Керниган, Роб Пайк , Зайцев Пётр, Ткаченко Вадим, и Шварц Бэрон , Коннолли Томас, Бегг Каролин , Айвалиотис Д. , Дерек де Йонге
Тестирование
В любой сколько-нибудь сложной системе появляются ошибки. Изменение в конфигурации и обновление ПО на сервере также может вызвать проблемы. Найти их и устранить помогает тестирование. Рекомендуем начать разбираться с юнит-тестирования , в котором для каждого нетривиального метода или функции пишется свой тест.
Книги по теме:
-
, Роман Савин , Арбон Джейсон, Каролло Джефф, Уиттакер Джеймс , Гленфорд Майерс, Том Баджетт, Кори Сандлер , Роберт Калбертсон, Крис Браун, Гэри Кобб
Наши статьи по теме:
Системы контроля версий
Сложное веб-приложение невозможно за приемлемое время написать одному человеку: для этого необходима команда специалистов, которые разделяют между собой обязанности и ведут распределенную кодовую базу. Для этого используются системы контроля версий, самой распространенной из которых является Git. Знание GIt гарантированно потребуется при трудоустройстве веб-девелопером.
Наши статьи по теме:
Пакетные менеджеры
Вокруг каждого языка программирования и фреймворка сформировалась инфраструктура: библиотеки, расширения, пакеты. Зачем писать собственный http-клиент, если существует хорошо отлаженный пакет с нужным функционалом? Так, в PHP используется composer , в Java – Gradle , в JavaScript и Node.Js – npm , в Python – pip .
Представим, что вы изучили синтаксис выбранного языка и его основные концепции. Теперь нужно выбрать фреймворк – каркас приложения, который задает архитектурные правила и содержит основные части веб-приложения.
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 |
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.
Независимо от типа разработки, кроме знания технических деталей, потребуется и понимание паттернов – общих, устоявшихся методов проектирования информационных систем. Без этого любой современный фреймворк покажется набором магических конструкций.
Книги по паттернам:
-
, Гамма Эрих, Хелм Ричард , Гамма, Хелм, Джонсон , Фримен, Фримен, Сьерра , Сергей Тепляков
Наши публикации о паттернах:
Книги, документация и курсы дадут теорию, закрепить которую можно только с помощью практики. Приобрести навыки можно различными способами.
Домашние проекты
Самые простой способ получить реальный опыт – придумать и развить нужный самому себе проект. Отличным началом может стать собственный редактор заметок или список дел. Примеры идей и практическую пользу от их реализации мы рассматривали в статье о проектах выходного дня .
Ресурсы с задачами для программистов
Опыта проектной разработки от решения задачей вы не получите, однако глубже узнаете выбранный язык программирования и специфические алгоритмы, которые понадобятся в работе.
Присоединяйтесь к проектам на GitHub
Выберите интересный проект и вносите в него полезные правки, исправляйте ошибки, пишите дополнения к интересующим вас библиотекам или фреймворкам. Это поможет не только развить технические навыки, но и даст понимание практики командной разработки и знакомств в сфере IT. Активный аккаунт на GitHub выгодно выделит вас среди других кандидатов на роль веб-программиста. Вы всегда можете показать, в какие проекты вы отправляли код, и сами примеры кода.
Веб-программирование – сложная, но интересная область. Безусловно, можно стать веб-разработчиком и своими силами, но есть и более легкие решения. Например, вы можете пройти курс факультета веб-разработки онлайн-университета GeekBrains. Информация в курсе хорошо структурирована, с вами будет работать личный наставник, а портфолио пополнится 4 актуальными проектами.