Обзор необходимых технологий, библиотек и фреймворков
«Яндекс Практикум» изучил, какие технологии сейчас нужны на рынке веб-разработки, и обновил свою линейку курсов для веб-разработчиков, чтобы они чётко отвечали современным требованиям. Получилось два новых курса:
- Фронтенд-разработчик — для тех, кто хочет делать крутой фронтенд, то есть передний край веб-приложений: плавный интерфейс и красивую вёрстку сайтов.
- Фулстек-разработчик — для тех, кто хочет делать приложение целиком: и фронт, и серверную часть.
Технологии в обоих курсах подобраны так, чтобы владеющий ими человек был максимально востребован на современном рынке веб-разработки.
В этой статье показываем, что это за технологии, зачем они нужны и где почитать подробнее. Получилось что-то вроде навигатора по профессии для тех, кто хочет узнать подробнее, прежде чем погружаться с головой.
Что такое «веб-разработка»
Веб-разработка — это создание полезных продуктов с помощью технологий веба: браузерных и серверных.
Браузер — то, через что вы сейчас читаете эту статью. Изначально браузеры создавались для того, чтобы показывать текстовые документы с табличками и картинками. Но людям этого было мало, они начали делать в браузере приложения. Сначала приложения были простыми: ты заполнял форму на сайте, нажимал кнопку, твои данные уходили на сервер. Сервер их обрабатывал и отдавал тебе сформированную веб-страницу с ответом.
Постепенно приложения становились всё более умными, а технологии — всё более сложными. Сейчас у вас в браузере может работать полноценное приложение со множеством возможностей.
Сервер — это компьютер где-то в глубинах интернета. Сервер обрабатывает запросы пользователя и хранит его данные, чтобы пользователь мог работать с ними с разных устройств: и с компьютера, и с телефона.
В чём разница — «фронтенд», «бэкенд», «фулстек»
Фронт — это всё, что происходит внутри браузера: красивый интерфейс, кнопки, поля ввода, плавные анимации, всплывающие окна и т. д. Фрондент-разработчик отвечает за то, чтобы всё это соответствовало задумке дизайнера и работало корректно.
Бэкенд — это всё, что происходит на сервере: обработка запросов пользователя, хранение информации, работа в ситуации высокой нагрузки, общение с другими сервисами и серверами.
Фулстек — это тот, кто занимается и фронтом, и бэком; достаточно хорошо знает оба мира, чтобы делать приложения целиком.
База: HTML, CSS, JavaScript
Это азбука фронтенда: три базовые технологии, на которых работает всё в браузере.
HTML — это язык разметки страниц, с него всё началось. Он описывает, где на странице какой текст, изображения, кнопки, ссылки, таблицы и логические блоки.
CSS — это язык оформления страниц: с его помощью настраивается внешний вид всех элементов на странице. Сначала он мог управлять только цветом и размером элементов, но со временем усложнялся. Сейчас CSS уже местами похож на язык программирования.
JavaScript — это язык управления содержимым страницы в браузере. Показать окно, скрыть, написать новый текст, запросить данные, получить данные — это всё делает JavaScript. Весь интерактив в приложениях пишется на JavaScript или его производных.
Читайте наши базовые циклы об этих технологиях: цикл про HTML, цикл про CSS, спасательный круг в JavaScript.
Надстройка: React, Grid, TypeScript и т. д.
Когда придумывали веб, все думали, что мы будем обмениваться друг с другом научными публикациями. Никто не проектировал веб как среду для исполнения полноценных приложений. Поэтому со временем появились надстройки.
TypeScript — надстройка над языком JavaScript, которая лечит некоторые его болезни (например, нестрогую работу с типами данных). В итоге в программах получается меньше багов, меньше отладки, но требуется большая дисциплина.
Вот наша статья про TypeScript: что может, как работает, в чём удобство.
React, Redux, Angular — фреймворки и библиотеки, которые помогают создавать интерактивные веб-приложения. Они берут на себя отрисовку элементов интерфейса, окон, выпадающих элементов, диалогов, вложенных друг в друга экранов. Разработчику не нужно обрабатывать события типа «нажал на такой-то блок»; вместо этого разработчик задаёт верхнеуровневую логику работы приложения, а библиотеки уже разбирают, какие там должны быть блоки и нажатия.
Вот наш разбор проекта на React и что такое Angular.
CSS Grid и Flexbox — это инструменты CSS, которые помогают без головной боли расставлять элементы на экране и не бояться, что они как-то не так отобразятся в разных браузерах и устройствах. Раньше, если тебе нужно было что-то поставить по центру, в половине браузеров оно было по центру, в другой половине — выше центра, а в каком-то одном — слева наверху за экраном. Эти времена ушли, сейчас всё просто работает, если использовать правильные инструменты.
Серверная сторона: NodeJS, MongoDB, PostgreSQL
У веб-приложений обычно есть серверная часть — в ней хранятся данные и обрабатываются запросы пользователя.
Языки программирования на сервере — Python, NodeJS и PHP. Python и NodeJS — модные и современные, PHP нужен для поддержки старых проектов. У NodeJS есть преимущество в том, что по синтаксису он такой же, как JavaScript, поэтому фулстек-разработчики часто выбирают его.
Вот что тут можно прочитать:
Базы данных — MySQL, MongoDB, PostgreSQL. Тут хранятся данные пользователей. Выбор конкретной технологии БД зависит от задач приложения, его масштаба и выбранного языка программирования.
Прочитайте наш цикл про базы данных — там есть и объяснение, и примеры запросов, и практика.
Рабочие инструменты: Git, bash, Webpack, Docker
У разработчиков есть базовый инструментарий, который существенно ускоряет работу и помогает делать масштабируемые приложения. Вот то, что актуально в веб-разработке:
Git — это система контроля версий. Позволяет безопасно работать с одним и тем же проектом нескольким людям; отправлять код на сервер; делать резервные копии. Это вместо того, чтобы пересылать друг другу файлы почтой.
Читайте нашу статью про Git, в ней всё подробно.
bash — это приложение на компьютере, которое позволяет управлять удалённым или локальным компьютером с помощью текстовых команд. Также это язык тех самых команд. Особенно полезно, когда нужно что-то сделать на удалённом компьютере, а у вас нет доступа к его монитору и клавиатуре. Этим языком управляются все серверы.
Читайте: зачем нужна командная строка
Webpack — инструмент, который помогает упаковать ваше веб-приложение в компактный модуль, который удобно выгружать на сервер и отдавать пользователям.
Docker можно представить как бизнес-центр, в котором сдаются офисы. В каждом офисе работает какая-то отдельная программа, они друг другу не мешают. А вам как разработчику легко и удобно эти программы открывать, закрывать, останавливать, запускать, переносить и т. д. С помощью «Докера» сейчас разворачиваются почти все веб-приложения.
Читайте об этом: что такое Docker и зачем он нужен.
Алгоритмы и паттерны программирования
Программирование требует знания хотя бы базовых алгоритмов: как заставить компьютер давать правильный результат быстро. А также полезно знать паттерны — то есть как другие люди решают похожие задачи, каковы лучшие практики. Всему этому можно научиться — либо по учебнику, либо с наставником, либо уже на рабочем месте.
Что даёт знание всех этих технологий
Если вы уверенно этим владеете, вы можете работать фулстек-разработчиком — это незаменимый человек в небольших командах разработки и стартапах. Также фулстеки могут работать как фронтенд- и бэкенд-разработчики — выбирайте, где сегодня больше спрос, и работайте.
Младший фулстек сейчас получает зарплату около 90 тысяч рублей, средний — около 160 тысяч.
Если не хотите работать в компании, можно быть фрилансером: разрабатывать новые и поддерживать старые сайты. Спрос на фулстеков есть, потому что огромная часть бизнеса зависит от веба.
Прочитайте также наш свежий обзор зарплат в ИТ как таковом и конкретно обзор зарплат фронтендеров.
