Что такое back end и front end
Чем frontend отличается от backend’а? Объясняем на мемах
Большинство мемов про frontend и backend дают общее представление о специфике этих сфер: первые как правило изображаются красиво и гладко, вторые — запутанно и брутально. Но так ли все просто на самом деле? Чтобы объяснить разницу, мы разобрали факты о двух профессиях на мемах.
Что такое frontend и backend?
Frontend — это клиентская часть продукта (интерфейс, с которым взаимодействует пользователь). В случае с сайтом, её формирует и выводит на экран браузер, который работает с HTML, CSS и JavaScript.
Backend — это внутренняя часть продукта, которая находится на сервере и скрыта от пользователей. Для её разработки могут использоваться самые разные языки, например, Python, PHP, Go, JavaScript, Java, С#.
Чем отличается frontend от backend’a?
Чтобы понять, чем отличаются backend- и frontend-разработка, разберемся, за что они отвечают. Допустим, пользователь нажимает кнопку «Подробнее» на сайте музыкального фестиваля. Сразу после этого загружается новая страница, на которой в нужном порядке и с заданным дизайном отобразилась информация о программе мероприятия. Верстку и взаимодействие с backend настроил frontend-разработчик.
Backend-разработчик делает так, чтобы сервер сформировал ответ и отправил его на нужный компьютер. О действиях в backend многие даже не задумываются — для них страница загружается сама по себе.
Какие языки используют frontend и backend?
Фронтенды пользуются языком разметки HTML, который определяет расположение элементов на странице. CSS отвечает за внешний вид контента — шрифт, цвет и отступы. JavaScript — за динамические элементы: анимацию и взаимодействие с пользователем.
Backend-разработчик использует PHP, чтобы передать информацию из базы данных на frontend. С фреймворками (наборами инструментов для быстрой разработки) на этом языке можно сократить много рутинной работы backend-разработчика.
Go используют для разработки микросервисов и высоконагруженных проектов, где с продуктом взаимодействует одновременно большое количество пользователей. Для backend-разработки подходят также Java, C# и Python.
Освойте с нуля востребованную профессию и выучите Go — один из самых высокооплачиваемых языков программирования. После курса сможете претендовать на junior-позицию в backend-разработке. Скидка 5% по промокоду BLOG.
Как взаимодействуют backend и frontend?
500 Internal Server Error — распространенная ошибка, которая появляется из-за дисконнекта frontend и backend. Она означает, что сервер не может обработать запрос пользователя, а браузер не может сообщить, что именно пошло не так.
Причиной может быть ошибка в коде или скрипте сайта или элементарная нехватка оперативной памяти. Чтобы исправлять такие ситуации или совсем не допускать их, важно выстроить взаимодействие frontend- и backend-специалистов. Этим часто занимаются DevOps-инженеры (читайте наш гид об этой профессии).
Когда frontend понимает, как работает серверная часть сайта и какие ошибки могут возникнуть, а backend имеет представление о работе интерфейса — это значительно упрощает работу в команде. Но это не значит, что они должны разбираться в деталях и выполнять обязанности друг друга (особенно если им за это не доплачивают).
Frontend- и backend-разработчиков одинаково бесит, когда работодатели не различают их функционал. Эта проблема возникает из-за стереотипа «тыжпрограммист», когда backend-разработчика просят поправить кнопку на сайте, а frontend — разобраться с ошибкой на сервере. Избавиться от этой проблемы помогает грамотный проджект-менеджер, который точно знает зону ответственности каждого специалиста в команде и обращается с задачами к нужным людям.
Можно ли быть одновременно frontend и backend-разработчиком?
Да, это называется fullstack-разработкой (full stack = полный стек). Fullstack-разработчики бывают разные: некоторые совмещают frontend и backend и дополнительно занимаются мобильной разработкой. Другие могут совмещать разработку, например, с UI/UX-дизайном.
Стать хорошим fullstack-разработчиком, который сможет достойно конкурировать с несколькими специалистами одновременно — довольно сложно. Зато такие разработчики чаще становятся тимлидами, потому что их деятельность охватывает процесс разработки полного цикла и дает им большее понимание всего процесса.
Fullstack-разработчик на Python
Вы начнете с программирования на Python и JavaScript, изучите фреймворки Django и React, познакомитесь с DevOps. Через год обучения сможете занять junior-позицию и параллельно продолжать усиливать компетенции. Скидка 5% по промокоду BLOG.
Чем отличается frontend и backend разработка и за что больше платят
Ниша разработки сайтов привлекает многих высокими зарплатами, стремительным развитием рынка и большим количеством IT-компаний в России. Новички мечтают о том, что будут получать больше 100 тысяч рублей и смогут работать удалённо.
В статье расскажем о двух главных направлениях веб-разработки. Разберём особенности фронтенда и бэкенда, поможем выбрать оптимальный вариант и выясним, за что больше платят.
Особенности фронтенд-разработки
Frontend — видимая часть сайта, с которой взаимодействуют пользователи. Это меню, слайдеры, текстовые блоки, футер и другие элементы. Фронтенд-разработчик создает «скелет», на котором держится весь «организм».
Если открыть исходный код любой страницы будет видно, из чего она состоит: HTML, CSS, JS-код. При загрузке веб-страницы содержимое скачивается в браузер пользователя, структура выстраивается на экране, а элементы становятся доступными для взаимодействия.
Новичкам кажется, что работа фронтендера очень простая. Надо выучить базовые основы HTML, основные CSS свойства и потратить несколько часов на JavaScript. На самом деле, frontend — сложное направление, в котором нет предела совершенству.
На прокачку базовых навыков уйдёт минимум полгода-год. Специалист считается опытным frontend-разработчиком через 3-5 лет активной работы. За несколько месяцев можно только выучить азы и научиться создавать несложные веб-страницы.
Чтобы новички лучше поняли, с чем им придётся взаимодействовать, остановимся на компонентах фронтенд-разработки:
От качества фронтенд-разработки зависит опыт пользователей. Если сайт будет перегружен анимацией и эффектами или наоборот, слишком стандартным, аудитория может отказаться от его использования.
Те, кто считают фронтендеров рутинщиками, сильно ошибаются. Опытные разработчики могут создавать структуру сайта даже без макета. В большинстве случаев они переносят готовую композицию из Photoshop или Figma в HTML, но могут доработать сайт по просьбе заказчика без предварительной подготовки.
Не стоит забывать, что, кроме создания базового «каркаса», frontend-разработчики кропотливо работают над адаптивностью сайта. Чтобы контент подстраивался под разные разрешения и хорошо выглядел независимо от размера дисплея.
Конечно, существуют фреймворки, которые значительно упрощают создание адаптивных версий, но разработчик всё равно тратит время на отладку и устранение багов.
Фронтендерами обычно становятся люди, которым интересно проектировать сайты для людей. Они представляют, как будут решать проблемы аудитории и готовы изучать новые инструменты, чтобы быстрее решать задачи и повысить качество готового продукта.
Особенности бэкенд-разработки
Бэкенд — «ядро» любого сайта. От качества реализации этого ядра зависит быстродействие проекта и работа всех компонентов. Можно сверстать красивую форму поиска, но если не сделать к ней обработчик на PHP или другом языке и она не будет привязана к базе данных, толку не будет.
Backend-разработку тоже часто недооценивают. Пользователи, которые не разбираются в теме, говорят о том, что важен только фронтенд. Административная панель может быть какой угодно — это проблемы того, кто будет заниматься ведением проекта.
Фронтендер работает с видимой для пользователей стороной проекта, а бэкендер делает так, чтобы администрирование было максимально удобным и стандартные задачи отнимали минимум времени.
Представьте, что зашли на сайт с поиском авиабилетов. Пока вводите в поля название городов работа осуществляется на стороне фронтенда. Сразу после клика на кнопку поиска в дело вступает бэкенд. Отправляется множество запросов к базе данных, а на выходе генерируется форма результатов поиска с доступными билетами.
Пользователи, которые не понимают, как работают веб-сайты, придают большое значение фронтенду и отодвигают бэкенд на второй план. Они часто думают, что backend-разработчики вообще не нужны. Взяли готовую CMS, сверстали HTML каркас, интегрировали код в систему управления и пользуетесь проектом.
Любая CMS на 100% не закрывает потребности владельцев сайтов. Могут понадобиться нестандартные модули и без помощи бэкендера обойтись не получится. Например, написать нестандартную форму поиска на PHP и API другого сервиса фронтендеры вряд ли смогут. Только если они знают основы backend-разработки.
Важно понять, что фронтенд и бэкенд — две стороны одной медали. Представьте, что перед вами стоит новенькая Tesla, которая снаружи выглядит просто великолепно. Открываете дверь, садитесь, пытаетесь включить двигатель и ничего не происходит. Оказывается, что под капотом ничего нет и произведение искусства — всего лишь «макет».
Аналогичным образом будет выглядеть и сайт без «обратной» стороны. Можно создать проект на чистом HTML, CSS и JS, но этого мало. Сейчас уже почти никто не оставляет сайты на HTML, в 99% случаев они «интегрируются» в готовые CMS или фреймворки.
Тем, кто не понимает, что обе стороны разработки важны, надо изучить теоретические основы работы веб-сайтов. Взаимодействие фронтенда и бэкенда осуществляется в круговом режиме. Сначала информация отправляется в «админку», потом обрабатывается и возвращается обратно в удобной для пользователей форме.
Фронтенд и бэкенд-разработчики должны работать сообща, чтобы вместе создать удобный и современный проект с хорошим быстродействием. Если каждый специалист работает отдельно, итоговый результат будет сложно предсказать.
Фронтендеры и бэкендеры часто не могут договориться, потому что каждый считает свою позицию правильной. Хорошие специалисты в своей области прекрасно понимают, что если они не смогут найти компромисс, клиент останется без проекта.
Кто такие fullstack-разработчики
Из-за того, что фронтендеры и бэкендеры занимаются разными задачами и часто не могут работать в команде, активно растёт спрос на fullstack-разработчиков. Это специалисты широкого профиля, которые могут в одиночку разработать сайт. Они проектируют и административную панель, и видимую для посетителей сторону.
Fullstack-разработчиков гораздо меньше, чем фронтендеров и бэкендеров, потому что на освоение одного направление уходят годы, а чтобы прокачать навыки сразу по двум специализациям, понадобится гораздо больше времени.
Фуллстак-разработка предполагает полное погружение в особенности проекта. Специалисту надо продумать серверную часть, связать её с фронтендом, обеспечить быстродействие и работать в рамках готового макета.
Новички часто стремятся к fullstack-разработке, чтобы получать в 2 раза больше денег. Они думают, что если освоили фронтенд, то бэкенд им покажется лёгким квестом. Разработчики широкого профиля действительно зарабатывают больше, чем фронтендеры или бэкендеры. Но перед тем, как брать за сайты 200-300 тысяч рублей, они тратят от 3 лет на активную работу с клиентскими проектами.
Fullstack developer должен разобраться во всём стеке технологий, но ему необязательно повышать уровень до senior. Можно хорошо зарабатывать и на простых проектах, а не тратить несколько лет жизни на сложные задачи, вроде маркетплейсов или сервисов с нестандартными возможностями.
К примеру, есть много фуллстак-разработчиков, которые работают с WordPress. Они в одиночку собирают сайты-визитки, лендинги, корпоративные порталы и другие несложные проекты. В большинстве случаев масштабные доработки по бэкенду не нужны, можно использовать готовый «каркас» и уделить внимание фронтенду.
Что лучше: бэкенд или фронтенд
Люди, которые только хотят обучиться на программиста, обычно долго выбирают между frontend и backend разработкой. Они читают статьи в интернете, советуются со знакомыми и часто принимают решение на основе статистики зарплат.
Все хотят хорошо зарабатывать и не беспокоиться о поиске новых клиентов, но в этом вопросе нет ничего однозначного. Уровень зарплаты зависит от большого количества факторов: регион проживания, опыт, особенности компании, формат занятости.
Нельзя сказать, что фронтенд лучше бэкенда в плане условий работы и зарплаты. Можно работать frontend-разработчиком в штате и получать 100 тысяч рублей. А можно искать клиентов на фрилансе и зарабатывать бэкендером 150-200 тысяч рублей.
Если судить объективно, и фронтенд, и бэкенд — перспективные направления. Хотя в последнее время наметился устойчивый тренд на frontend. Обучающих курсов и полезных материалов по этой теме гораздо больше.
По данным одного из самых популярных порталов для IT-специалистов Habr, в 2020 году бэкендеры получали больше, чем фронтенд и фуллстак-разработчики. Данные из исследования основаны на статистике реальных зарплат, а не цифрах из вакансий на сайтах поиска работы.
На эти цифры можно ориентироваться, потому что они полностью соответствуют ситуации в российских IT-компаниях. Но не стоит забывать, что средняя зарплата ни о чём не говорит.
Новички могут получать и 20-30 тысяч в регионах, а опытные разработчики — 200-300 тысяч рублей в месяц. Фронтенд и бэкенд тесно связаны, поэтому если в совершенстве освоили одно направление, можно потихоньку изучать второе. Сможете решать более сложные задачи и брать в работу масштабные проекты.
При выборе основного направления работы ориентируйтесь на свои интересы, а не предполагаемую зарплату. Если больше нравится создавать внешний вид сайтов — сфокусируйтесь на фронтенде, если проектировать логику серверной части — на бэкенде.
Что выбрать — frontend или backend
Веб-пространство – наиболее популярная часть IT-мира, поэтому нет ничего удивительного в том, что стать его частью хочет огромное количество людей. Если быть блогером или каким другим «гуманитарием» вам не по душе, а оставить свой след в вебе очень хочется — придётся разобраться в различиях фронтенда и бэкенда. Наш краткий обзор вам поможет.
Начнём с азов, то есть определений.
Чтобы вам было проще понять, проведём простую аналогию. Веб-страница – это симпатичная девушка (или парень, кому что ближе). Представьте ваше знакомство или свидание.
Первое, на что обращаете внимание — внешность. Это фронтенд. Ваш фокус постепенно переходит с крупных и ярких деталей к мелочам – чтобы волосы были причёсаны, кожа ухожена, ну и в целом видно, что человек к свиданию готовился. Так и с сайтами, только в этом случае вы рассматриваете таблицы, кнопки, блоки, картинки и прочее. Как и с человеком, в первую очередь здесь важны аккуратность и общий приятный вид, а уже потом яркие акценты. Эти задачи решаются frontend-разработчиками, «стилистами» веб-пространства.
Рано или поздно на свидании ваш собеседник открывает рот, то есть показывает первые признаки бэкенда — свой интеллект. Умение привлечь внимание не внешностью, а поведением — небольшое дело, но чтобы удержать фокус, действительно надо постараться. С сайтами точно так же. Необычная функциональность — хорошо, но по-настоящему круто, когда он построен на безупречном фундаменте, интуитивно понятен и работает как надо. С этой задачей приходится справляться бэкенд-разработчикам.
Что предстоит учить
Окей, в общих чертах мы уяснили, чем отличается фронтенд от бэкенда. Если вы всё ещё сомневаетесь с выбором, попробуем углубиться в используемые инструменты и понять, что вам грозит.
Обязательный минимум фронтенд-разработчика
HTML — язык гипертекстовой разметки. Иначе говоря – главный инструмент для создания внешнего облика веб-страницы: текст, картинки, таблицы, блоки и прочие базовые элементы дизайна. Сайты на чистом HTML уже не встречаются, но без знания этого языка во фронтенде делать нечего.
CSS — по сути, набор шаблонов для форматирования страницы. Позволяет реализовать на веб-странице какой-то общий сценарий оформления, придать ей красивый и законченный вид без лишнего дублирования кода.
JavaScript — в отличие от предыдущих представителей, это полноценный язык программирования, формально относящийся к фронт-енду. Фактически возможности JS куда шире организации «внешности», на нём можно создавать многие «серверные» фичи. Лишь бы у разработчика была фантазия, а в браузере стоял интерпретатор.
На выбор для будущего бэкенд-разработчика
PHP — наиболее распространённый в России и в мире в целом язык серверной части. Отправить письмо, обработать запросы, да и вообще организовать любую активность в вебе — это к PHP в большинстве случаев.
Python — один из самых простых языков для изучения. Прекрасно справляется с обязанностями «двигателя» веба благодаря удобству и фреймворку, речь о котором пойдет чуть позднее.
Ruby — ещё один язык серверной части, в своё время набравший сумасшедшую популярность благодаря веб-фреймворку.
SQL — язык для обработки баз данных, без которого бэкенда, можно сказать, не существует. Любую социальную сеть, интернет-магазин или просто страницу, изобилующую информацией, трудно представить без привязки к внешним базам.
Go — язык, в своё время специально разработанный корпорацией Google для высоконагруженных сервисов. Так как такую характеристику имеет большинство сервисов Google, и справляются они со своими задачами на отлично язык быстро ушел в народ.
Java — универсальный и мощный язык программирования, предназначенный для разработки веб и корпоративных приложений, банковского программного обеспечения, высоконагруженных сервисов, мобильных приложений, ПО для встраиваемых систем, отлично подходит для автоматизации тестирования. В меньшей степени подходит для разработки игр и desktop приложений. Совсем не подходит для frontend-разработки, есть конечно инструменты позволяющие разрабатывать frontend, но на самом деле Java код транслируется потом в JavaScript.
По правде говоря, в веб-разработке есть ещё большое число менее популярных языков, но для базового ознакомления хватит. Надеюсь, теперь вы лучше понимаете, что такое фронтэнд и бэкэнд разработка. Чтобы прояснилось ещё лучше, перейдём к библиотекам и фреймворкам.
Фреймворки front-end
Описать преимущества и недостатки любого из перечисленных здесь фреймворков в паре предложений почти невозможно, поэтому оставим это вам для самостоятельного изучения.
React.js — данный фреймворк, как и многие другие фреймворки frontend, ориентирован на применение JavaScript. Чтобы в первом приближении оценить его, скажем одну вещь — он разрабатывается и активно применяется компанией Facebook Inc. Их социальная сеть и сервис Instagram — лучшая реклама React.js.
Angular — продукт другой корпорации, Google. Получил большую популярность благодаря удобству и инструментам по созданию material design – тренду, не теряющему популярность уже более 5 лет.
Vue.js — некое промежуточное звено между Angular и React как по популярности, так и по функциональности. Крупного покровителя не имеет, но обеспечивает такой уровень удобства, что на задачах начальной сложности вы будете считать его своей волшебной палочкой.
jQuery — один из старейших фреймворков для JavaScript, наиболее распространён в современном вебе. 74% из 10 миллионов самых популярных сайтов было создано с использованием jQuery. Простота библиотеки позволяет легко внедрить простые DOM и анимацию за минимальное время с минимальной угрозой негативных последствий.
Фреймворки back-end
Фреймворк — программное обеспечение значительно упрощающее создание приложений и иных цифровых продуктов. В бэкенде большинство фреймворков заточено под свой конкретный язык, по-настоящему мультиязычные — редки и малоэффективны.
Yii2 (PHP) — в бэкенде на каждый популярный язык есть свой фреймворк. Вот, к примеру, Yii2 помогает работать с PHP. Так что вы если в будущем хотите делать аппаратную часть на этом языке (а вопреки ожиданиям он всё ещё популярен), тогда познакомиться с Yii2 придётся.
Django (Python) – тот самый фреймворк, который позволяет использовать Python в мире веба на полную катушку. Популярность объясняется очень просто: возможности огромного числа разработчиков веба не дотягивают до PHP, C, Java и прочих языков, а желания творить — хоть отбавляй много. И вот как раз с Python и Django у них всё удачно складывается.
Ruby on Rails (Ruby) – чтобы понять прелесть RoR, надо понимать Ruby и его сообщество. Язык относительно сложный, а вот разработчики на нём добродушные (и любят делиться исходным кодом). Вот и получается, что, используя Ruby on Rails, возможно, будете долго запрягать, зато быстро поедете.
Прочее
Разница в остальных инструментах лежит в области понимания профессии. Фронтенд-разработчики в основном нуждаются в инструментах визуализации (то есть графических редакторах) и в шаблонах. Актуальность знаний здесь играет чуть большую роль.
Бэкендеры основываются на средах разработки, упрощающих многие действия, и на системы моделирования. Они дают понять, как сайт будет работать на клиентской стороне — а это важнейший аспект разработки.
Что читать для знакомства с фронтендом и бэкендом
Мы подобрали ряд книг, ознакомившись с которыми, вы сможете понять, что сложнее — frontend или backend — в вашем случае.
Front-end
Книга, содержащая довольно много воды, но в случае с новичками это может помочь лучше закрепить базовый материал.
Крайне полезная книга не только для начинающих оформителей веба, но и для маститых специалистов. Содержит наилучшие практики кода, которые наверняка будут часто использоваться в вашей дальнейшей работе.
В отличие от предыдущей книги, здесь практически отсутствует реальный код, зато есть огромное количество справочных данных.
Литература, посвящённая построению правильного мышления в области создания не только красивого, но и практичного дизайна. Содержит кодовые и графические выкладки, что будет полезно даже совсем начинающим разработчикам.
Back-end
Одна из базовых книг по PHP. Скляра читал, наверное, каждый бэкенд-разработчик. Прекрасно подойдёт тем, кто начинает изучение с нуля. Всё чётко и подробно, а главное – с примерами.
Несмотря на заявленную в заголовке основную тему, читателю предлагается пройти весь путь веб-разработчика, начиная с основ HTML и СSS, и заканчивая довольно сложными сайтами и приложениями с использованием Ruby. Но важно отметить: языкам эта книга не учит, а вот тому, как создавать правильные приложения на «рельсах» – пожалуйста.
Как и в прошлой книге, для чтения этой книги необходимо хотя бы на базовом уровне владеть связкой HTML-CSS-JavaScript и Python. Книга примечательна тем, что содержит минимум воды и большое разнообразие примеров.
Если вы хотите создавать веб на Java, эта книга будет очень полезна для вас. Языку здесь не обучают, но процесс создания бэкенда с использованием Spring здесь описан простым информативным языком. Следуя по главам шаг за шагом вы на себе ощутите как превращаетесь из зелёного новичка в знающего профессионала.
Всем, кто планирует связать свою жизнь с вебом – рекомендуем достать эту книгу в любом варианте. Очень легко читается, требует минимум базовых знаний, но при этом содержит уйму информации о том, как создаётся и работает современный веб.
Уровень зарплат
Фронтенд или бэкенд лучше с точки зрения зарплаты? Как и в любой IT-профессии, оценить объективно среднюю зарплату по России или даже Москве для фронтенд или бэкенд-разработчика очень сложно. Начать можно с общих цифр, фигурирующих в недавнем исследовании Хабр Карьеры за второе полугодие 2019 года.
Согласно приведённому графику, разброс зарплат в обоих направлениях веба отличается незначительно, и что важнее — он точно не меньше зарплат фулстек-разработчиков. Если оперировать фактическими цифрами – вход на профессиональный уровень (уверенный junior или начинающий middle) лежит в районе 60-70 тысяч, и далее уходит к средней в 110-120 тысяч рублей. Что ещё важнее, согласно данным Хабр Карьеры, зарплата в разработке выросла в среднем на 6% по сравнению со вторым полугодием.
Для сравнения возьмём ещё статистику с портала trud.com. Вот данные на конец 2019 года по фронтенду:
Для сравнения — заработок среднего PHP-разработчика за тот же период:
Как видно из графиков, суммы соизмеримы, с небольшим перевесом у тех, кто работает с «лицом». В действительности уровень заработка напрямую зависит от набора скиллов и опыта. К примеру, в начале карьеры найти хороший контракт человеку в бэкенде чуть проще – просто оттого, что фронтенд-разработчик без реального опыта должен иметь хорошее портфолио, а для дополнительной проверки ещё сделать минимум пару тестовых заданий. С бэкендом достаточно прямо на собеседовании задать несколько вопросов по языкам и функциям.
Но если говорить об опытном специалисте — во всяком случае в крупных городах — найти жирный контракт во frontend проще — из-за ряда стереотипов экспертное мнение в этой области ценится выше, чем в backend. При этом одновременно разработчик уровня senior во фронт-енде может вести куда больше проектов, чем в бэк-енде.
Мы постарались собрать в этой статье всё, чтобы вы смогли сделать выбор в мире веб-разработки. Теперь дело за вами — решиться и попробовать. Удачи!