Выбираем лучший бэкенд-фреймворк 2021 года

Веб-сервер

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

1. Поставить «чистые» PHP, Apache и MySQL самостоятельно с нуля или применить готовые пакеты — Xampp, Denwer и другие.

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

2. Воспользоваться Vagrant.

Это виртуальная машина с широкими возможностями. Физически Vagrant находится на компьютере, но воспринимается не как локальный сервер. Разработчик подключается к нему не по localhost, а по другому IP, который он сам и прописывает.

3. Использовать Docker.

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

Что должен знать бэк-энд разработчик

Как уже отмечалось, он занимается исключительно программно-административной частью работы и обслуживанием внутренней системы. Это довольно трудоемкий процесс, требующий больших знаний и навыков работы и, поскольку в данной сфере постоянно происходят изменения – появляются новые инструменты, а старые устаревают – необходимо следить за тенденциями и все время развиваться и самосовершенствоваться как профессионал. Такой подход позволит всегда оставаться актуальным и востребованным. Среди основных навыков, которые в обязательном порядке должен знать back-end разработчик, можно отметить:

1. Умение разбираться в объектно-ориентированном программировании.
2. Уверенное пользование скриптовым языком программирования PHP (для начинающего разработчика на первых этапах достаточно поверхностного знания).
3. Владение английским языком. Это необходимо по той причине, что основная часть инструментов, сервисов и соответствующей документации представлена на английском языке, несмотря на то, что ориентирована на самую широкую аудиторию.
4. Навыки работы со свободной реляционной системой управления базами данных МФА, а также программой Git, которая создана для разработки ядра.
5. Умение быстро ориентироваться в чужом коде, находить и исправлять ошибки, а также вносить необходимые корректировки.
6. Навыки работы с программным обеспечением (или конструктором), который служит для объединения в единое целое разрозненных компонентов большого программного проекта.

Back-end специалист ответственен за ту часть работы, где необходимо создавать программы для обработки пользовательских данных, призванных облегчить пользователям сайта процесс заполнения регистрационных форм. В частности, в его задачи входит, чтобы эти формы корректно отображались и были доступны исключительно для тех, у кого есть к ним доступ. Также в его задачи входит: во-первых, обеспечение надежного и безопасного хранения персональных данных пользователей, будь то номер банковских карт или электронных кошельков, на серверной части web-приложения; во-вторых, создание собственного конструктора API, который содержит необходимый набор функций и деталей применения, чтобы сторонние программы и смартфоны моги получать доступ к ресурсам web-приложений.

Когда пользователь производит на веб-ресурсе какое-либо действие, ответ сервера проходит несколько этапов, прежде чем появится результат. Каждый из этих этапов использует собственный тип программного обеспечения. Однако, несмотря на огромное количество различных серверов, языков программирования, конструкторов и т. д., все они комбинируются между собой и имеют схожий функционал. Поэтому back-end разработчик должен знать хотя бы по одной технологии из каждого уровня, чтобы создать качественный веб-ресурс.

Чем занимается фронт-энд разработчик

Слово «фронт» в названии профессии говорит о том, что фронт-энд разработчик находится на передовой линии с конечным пользователем и отвечает за внешний функционал приложения, с которым контактирует пользователь. Программным кодом на сервере занимается другой специалист — бэк-энд разработчик. К сведению: есть универсальный специалист, который работает одновременно на фронт-энд и бэк-энд. Он называется фулл-стак разработчик (с англ. full stack developer).

Основные инструменты фронт-энд разработчика в web:

• JavaScript;
• HTML;
• CSS.

JavaScript — главный язык фронт-энд разработчика в web, на котором он программирует пользовательские интерфейсы. Фронтендерам часто приходится заниматься версткой сайтов: написанием HTML-кода и CSS-стилей для представления информации в виде, соответствующем макету дизайнера и понятном всем браузерам.

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

Есть много дополнительных инструментов, которые автоматизируют рутинную часть работы:

• Sass/SCSS, LESS, Bootstrap (три ведущих фреймворка);
• React;
• Angular;
• Vue.js;
• jQuery;
• Webpack;
• Gulp.

 А появление  Chrome Dev Tools и Firebug позволило повысить производительность труда.  

Фронт-энд разработчик в web отвечает за то, чтобы страницы сайта выглядели во всех браузерах одинаково и соответствовали макету дизайнера. С появлением новых средств разработки и более современных браузеров эта задача решается проще, чем раньше. Но интерфейсы современных сайтов или интернет-сервисов становятся более сложными, а многообразие устройств, с которых пользователи выходят в Сеть, постоянно расширяется — например, к десктопам и ноутбукам добавились планшеты, смартфоны

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

Что такое «фронтенд» и «бэкенд»?

В основе фронтенда лежат язык HTML, отвечающий за содержимое страницы, CSS, отвечающий за стиль отображения элементов и Javascript, описывающий несложное взаимодействие пользователя с сайтом. Вместе с ними за пользовательский интерфейс отвечают библиотека JQuery, фреймворки и прочие специализированные инструменты. С их помощью фронтенд-разработчик создает веб-среду, в которой посетитель сможет быстро и легко получать контент, пользоваться удобной навигацией, отправлять запросы. Сфера фронтенда постоянно развивается и считается самой богатой и разнообразной в плане используемых технологий.

Фактически, это компьютер, который обрабатывает посланные ему запросы и посылает обратно некую информацию. Для этого используется какой-либо из универсальных языков программирования: Python, Ruby, Java, PHP, C#, Swift и т.д., а также системы управления базами данных MySQL, PostgreSQL и т.д. Спектр инструментов тут тоже довольно широк. Бэкенд-разработчик отвечает за производительность серверного кода, его масштабируемость, рациональность и безопасность. Для этого необходимо понимать сетевые протоколы и принципы взаимодействия браузера с веб-приложением.

Что читать для знакомства с фронтендом и бэкендом

Мы подобрали ряд книг, ознакомившись с которыми, вы сможете понять, что сложнее — frontend или backend — в вашем случае.

Front-end

HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств — Фрейн Бен

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

JavaScript. Шаблоны – Стоян Стефанов

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

CSS. Каскадные таблицы стилей. Подробное руководство – Эрик А. Мейер

В отличие от предыдущей книги, здесь практически отсутствует реальный код, зато есть огромное количество справочных данных.

Accessibility for everyone – Laura Kalbag

Литература, посвящённая построению правильного мышления в области создания не только красивого, но и практичного дизайна. Содержит кодовые и графические выкладки, что будет полезно даже совсем начинающим разработчикам.

Back-end

Изучаем PHP 7. Руководство по созданию интерактивных веб-сайтов – Давид Скляр

Одна из базовых книг по PHP. Скляра читал, наверное, каждый бэкенд-разработчик. Прекрасно подойдёт тем, кто начинает изучение с нуля. Всё чётко и подробно, а главное – с примерами.

Ruby on Rails для начинающих. Изучаем разработку веб-приложений на основе Rails – Майкл Хартл

Несмотря на заявленную в заголовке основную тему, читателю предлагается пройти весь путь веб-разработчика, начиная с основ HTML и СSS, и заканчивая довольно сложными сайтами и приложениями с использованием Ruby

Но важно отметить: языкам эта книга не учит, а вот тому, как создавать правильные приложения на «рельсах» – пожалуйста.. Django 2.1

Практика создания веб-сайтов на Python – Владимир Дронов

Django 2.1. Практика создания веб-сайтов на Python – Владимир Дронов

Как и в прошлой книге, для чтения этой книги необходимо хотя бы на базовом уровне владеть связкой HTML-CSS-JavaScript и Python. Книга примечательна тем, что содержит минимум воды и большое разнообразие примеров.

Spring в действии – Крейг Уоллс

Если вы хотите создавать веб на Java, эта книга будет очень полезна для вас. Языку здесь не обучают, но процесс создания бэкенда с использованием Spring здесь описан простым информативным языком. Следуя по главам шаг за шагом вы на себе ощутите как превращаетесь из зелёного новичка в знающего профессионала.

Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5 – Робин Никсон

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

Что такое Bit?

BitBit.devнезависимые компонентынезависимые компоненты

• Не нужно физически извлекать код, чтобы создавать независимые новые версии, делать его общим и совместно над ним работать. Можно «экспортировать» компонент прямо из своего репозитория. Bit позволяет задать часть кода в качестве компонента и с этого момента работать с ним независимо. В свою очередь, это позволяет упростить процесс совместного использования, потому что нет необходимости в настройке отдельного репозитория и переработке процесса импорта этих файлов в свой проект.
• Люди, «импортирующие» ваши компоненты (а не просто устанавливающие их), также могут участвовать в совместной работе над ними, изменять их и экспортировать обратно в их «remote scope» (удалённый хостинг компонентов). Это невероятно мощный подход, если вы работаете группой команд в одной организации, потому что вы можете совместно работать над одним и тем же инструментом без необходимости работы над отдельным проектом. При импорте компонента Bit код скачивается и копируется в вашу рабочую папку. Также при этом генерируется соответствующий пакет в папке . При изменении исходного кода (в рабочей папке) пакет генерируется заново. Благодаря этому вы можете использовать его, указывая абсолютный путь, подходящий для всех контекстов (это сработает, даже если вы решите установить пакет компонента без его импорта).

Очистка кэша

Каждый запрос проходит через несколько кэшей на пути к бэкэнду. Если вы посещаете сайт в первый раз, подождите, пока он загрузится, а затем перезагрузите страницу.
Веб-приложение загружается быстрее чем в первый раз, поскольку браузер кэширует ресурсы, такие как .

Что если вы хотите внести изменения в ? Вы меняете имя файла. Допустим, вы меняете на , на который ссылается .
Закэшированный становится неактуальным, поскольку к нему никогда не будет другого запроса (если сам index.html не будет закэширован! Запрос к должен быть инвалидирован на бэкэнде).

Современные конвейерные сборки включают в себя очистку кэша для каждой сборки, поэтому большинство javascript файлов выглядят как . Обычно это применяется только к css стилям и скриптам, но вы также можете применить их к изображениям и другим ресурсам.

Однако подобные ресурсы меняются очень редко, и по соображениям производительности стоит их исключить из автоматического кэширования и просто обновлять вручную при необходимости.

*Примечание переводчика:

В оригинале было так:

Где учиться на бэкенд-разработчика

Вы можете самостоятельно освоить эту специальность по статьям, книгам и курсам (бесплатные варианты во множестве представлены на YouTube). К сожалению в этом случае, все полученные знания будут иметь фрагментарный характер и для работы по найму их объема не хватит (как вариант – фриланс, но так же весьма маловероятно).

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

Программы для создания кода

Код пишут где угодно, даже в блокноте. Однако для удобства придуманы системы, где работает автоподстановка, можно заниматься дебагом (подсказка: Процесс отладки кода) и использовать массу иных возможностей. Такая программа называется IDE — интегрированная среда разработки, или редактор кода.

Для работы с PHP рекомендуем две IDE:

Основное преимущество — это бесплатная система. Однако NetBeans съедает много памяти во время работы и не такой прогрессивный, как редактор ниже.

Очень удобный интеллектуальный редактор от компании JetBrains. Обладает отличной автоподстановкой и продвинутой системой семантического анализа. Программист допустил опечатку — анализатор тут же показывает, где именно. Незаменимый инструмент для веб-разработчика на PHP.

Краткое, но исчерпывающее введение в PhpStorm от официального разработчика.

Как строится работа над проектом

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

«У проекта есть команда, в которую входит в том числе бэкендер. У команды есть задачи по развитию сервиса: добавление функциональности и возможностей для пользователя

Руководитель сервиса отвечает за эти задачи — он объясняет всем, что сейчас важно делать и почему. Обычно бэкендер отвечает за конкретный кусочек продукта, с которым надо делать что-то разумное

Например, ускорять его», — говорит Алексей Шаграев из Яндекс.Поиска.

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

«Могу рассказать на примере команды Яндекс.Практикума. Я как заказчик для бэкенда говорю: «Нам нужно, чтобы платформа умела делать то-то и то-то. Например, чтобы я вводила код в окошко, а платформа мне что-то отвечала». Дальше мы садимся с бэкендом и обсуждаем задачу: что нужно сделать, как это реализовать, какие есть ограничения. Мы можем выбирать решение вместе, потому что я и моя команда понимаем в разработке. Иначе у бэкендеров была бы дополнительная задача — объяснить нам как заказчикам особенности каждого решения», — рассказывает София Техажева.

Когда задача поставлена, ее разбивают на промежуточные этапы. Обычно для сервиса или сайта строится гибкая структура, где разные части взаимодействуют друг с другом. Поэтому на разных этапах бэкендер может работать с теми участниками команды, которые отвечают за нужный фрагмент сервиса. Еще у любого продукта есть бэклог — в нем собраны функции, которые хотелось бы когда-нибудь реализовать, и указаны ошибки. Для бэкендера это как список задач на будущее, он может постепенно их выполнять.

Если проект начинают с нуля, то шаги для бэкендера будут такими:

• Выбрать язык. Python, C++, Java, PHP — это основные языки, на которых пишут бэкенд. Так, на Java написано большинство банковских систем — этот язык используют в Райффайзенбанке и Сбербанке. На PHP создана сеть Badoo и часть сервиса ВКонтакте. Чаще всего это исторически обусловленные решения. Когда в компании уже пять лет пишут на Java, сложно переводить огромный массив кода на другой язык.
• Выбрать инструменты. Например, базу данных или фреймворк. Набор этих инструментов плюс языки, которые бэкендер выбирает, чтобы строить свой двигатель, все вместе называются стек технологий. Стеки бывают разные, в зависимости от задач и традиций компании.
• Написать код. Здесь бэкендер пользуется инструментами для создания версий, тестирования и хранения данных.

Если разработчик бэкенда приходит в уже состоявшийся проект, то язык и инструменты на этом этапе уже выбраны. Тогда бэкендер работает по такому алгоритму: 

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

«В больших компаниях бэкендер растет так: вначале он действует как механик — что-то чинит, вставляет новые части. А обучение и опыт приводят к тому, что он начинает проектировать новые структуры самостоятельно», — объясняет София Техажева.

Например, вы отправляете запрос, а ответа нет или выпадает бессмысленный текст — значит, с сервисом что-то не так. Когда пользователь видит ошибку, он редко может определить, где она случилась — во фронтенде или в бэкенде. Но если происходит сбой на сервере, то система выдает соответствующие сообщения (Error 503 Backend fetch failed и другие).

Уровень зарплат

Фронтенд или бэкенд лучше с точки зрения зарплаты? Как и в любой IT-профессии, оценить объективно среднюю зарплату по России или даже Москве для фронтенд или бэкенд-разработчика очень сложно. Начать можно с общих цифр, фигурирующих в недавнем исследовании
Хабр Карьеры за второе полугодие 2019 года.

Согласно приведённому графику, разброс зарплат в обоих направлениях веба отличается незначительно, и что важнее — он точно не меньше зарплат фулстек-разработчиков. Если оперировать фактическими цифрами – вход на профессиональный уровень (уверенный junior или начинающий middle) лежит в районе 60-70 тысяч, и далее уходит к средней в 110-120 тысяч рублей. Что ещё важнее, согласно данным Хабр Карьеры, зарплата в разработке выросла в среднем на 6% по сравнению со вторым полугодием.

Для сравнения возьмём ещё статистику с портала
trud.com. Вот данные на конец 2019 года по фронтенду:

Для сравнения — заработок среднего PHP-разработчика за тот же период:

Как видно из графиков, суммы соизмеримы, с небольшим перевесом у тех, кто работает с «лицом». В действительности уровень заработка напрямую зависит от набора скиллов и опыта. К примеру, в начале карьеры найти хороший контракт человеку в бэкенде чуть проще – просто оттого, что фронтенд-разработчик без реального опыта должен иметь хорошее портфолио, а для дополнительной проверки ещё сделать минимум пару тестовых заданий. С бэкендом достаточно прямо на собеседовании задать несколько вопросов по языкам и функциям.

Но если говорить об опытном специалисте — во всяком случае в крупных городах — найти жирный контракт во frontend проще — из-за ряда стереотипов экспертное мнение в этой области ценится выше, чем в backend. При этом одновременно разработчик уровня senior во фронт-енде может вести куда больше проектов, чем в бэк-енде.

Мы постарались собрать в этой статье всё, чтобы вы смогли сделать выбор в мире веб-разработки. Теперь дело за вами — решиться и
попробовать. Удачи!

Dependency Injection. Adopt

Мы рекомендуем использовать паттерн DI и вместе с ним IoC-контейнеры. Кажется, что DI не сильно распространен во фронтенд-разработке за пределами Angular, но у нас в компании этот паттерн получил широкий охват, в том числе на проектах с React, где мы используем собственный фреймворк Tramvai.js, который построен на DI.

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

Нужно понимать, что DI повышает порог входа в проект. В некоторых случаях, особенно если у вас множество простых и уникальных задач, когда меньше возможности что-либо переиспользовать, смысл использовать DI уменьшается.

Наш коллега Сергей Нестеров сделал доклад Dependency injection в React-приложении — советуем посмотреть.

Навыки

Знание PHP. Один из основных языков серверного программирования

Знание Python. Еще один популярный язык серверного программирования

Знание API. Набор способов и правил, по которым различные программы взаимодействуют между собой

Знание SQL. Язык программирования структурированных запросов, требуется для работы с базами данных

Знание азов Java. Один из наиболее часто использующихся языков программирования

Уровень Junior (начальный уровень)

1. Умение использовать Spring Framework. Это один из наиболее популярных фреймворков для создания web-приложений на Java.
2. Знание HTML. Это язык текстовой разметки страницы, который нужен для того, чтобы дать браузеру понять, как именно должен отображаться тот или иной сайт.
3. Знание Golang (Go). Один из самых востребованных языков программирования, статически типизированный и разработанный программистами компании Google.
4. Знание PostgreSQL. Система управления базами данных с открытым исходным кодом.
5. Умение пользоваться .NET. Многофункциональная платформа, позволяющая разработчикам быстрее писать программы.

Уровень Middle (средний уровень)

1. Знание ООП (объектно-ориентированное программирование). Один из наиболее распространенных способов разработки программного обеспечения.
2. Уверенное использование Docker. Программа для контейнеризации приложений, используется для автоматизации развертывания приложений в средах с поддержкой контейнеризации.
3. Работа с Git. Это распределенная система для контроля и управления версиями исходного кода программы.
4. Использование Django. Фреймворк для создания сайтов и приложений на языке Python.
5. Использование Ruby on Rails. Популярный многоуровневый фреймворк для создания web-приложений.

Уровень Lead (руководитель команды)

1. Работа с высоконагруженными системами. Это системы (автоматизации бизнес-процессов компании, мониторинга, бизнес-аналитики и т. д.), функционирующие с постоянной или пиковой высокой нагрузкой и потому требующие оптимизированной серверной части.

Согласно рейтингу, составленному по результатам опроса, более 57 тысяч респондентов PHP, Python, SQL являются одними из самых востребованных технологий среди разработчиков.

HTTP

Бэкэнд и фронтенд должны использовать соответствующие HTTP статусы (в определенной степени). Надеюсь, ваш бэкэнд не воспринимает каждую ошибку как 400.

Интерфейс должен знать каждый статус, который бэкэнд планирует вернуть.

Не парсите сообщения об ошибках, чтобы определить, то что авторизация не удалась, код ошибки 401 подходит для этого больше.

Не повторяйте тот же самый запрос, если вы получили 400-ый код потому что он, вероятно, не будет работать снова. А к примеру 500-ый код может означать, что сервер просто перезагружается и повторная попытка будет успешной.

Другие свойства HTTP запросов которые желательно знать:

• HTTP запросы могут быть закрыты сервером если они занимаются слишком много времени прежде чем завершатся. Если вы думаете что некоторая задача займет больше времени чем лимит на запрос (как правило около 20 секунд), вам следует выбрать вместо единичного запрос-ответа, запрос с последующим опросом результата. Или воспользоваться другими механизмами, например веб-сокетами.
• Если вы отправляете большое количество данных на сервер(например видео), вы должны использовать составной HTTP запрос(multipart/form-data), который делит данные на части перед отправкой.
• Иногда неожиданно возникает то, что существует ограничение размера URL. Некоторые веб-интерфейсы передают данные обратно на сервер с query параметрами, но если они длиннее 2048 символов, вам придется изменить такой способ на передачу параметров в теле HTTP запроса.

Что такое backend-разработка

Backend-разработка – это набор специализированных действий. С их помощью backend-разработчик выполняет свои обязанности.

В задачи бэкенд-специалиста входит:

1. Разработка, организация и управление базами данных.
2. Проверка личных данных на соответствие.
3. Обеспечение безопасности веб-сервисов.
4. Настройка автоматических уведомлений.
5. Разработка архитектуры кода.
6. Создание и при необходимости доработка семантического ядра сайта.
7. API-разработка для связи интернет-платформы с посторонними сайтами.
8. Оптимизация функций и работы сайта для его быстрой загрузки.
9. Работа с системами резервного копирования.
10. Контроль за корректной работой сайта и отладка его компонентов.
11. Оптимизация алгоритмов для приложений.
12. Тестирование всего веб-сервиса или его отдельных элементов.
13. Создание приложений, которые будут поддерживать разработанный интерфейс.
14. Контроль состояния серверов.

Конечно, не каждый backend-программист способен выполнить все задачи из списка. Но такие разработчики и не выбиваются вперед.

Что такое фулстек?

Фронтенд и бэкенд вовсе не являются взаимоисключающими областями. Разработчики должны хотя бы в общих чертах представлять, что происходит на противоположной стороне. Но есть действительно уникальные специалисты, которые одинаково хорошо себя чувствуют в обоих направлениях: фулстеки (full-stack). Такие разработчики занимаются и клиентской частью приложения, и серверной.

Существует несколько вариантов взаимодействия бэкенда и фронтенда. Это могут быть серверные приложения, в которых HTTP-запросы идут напрямую на сервер, а тот отвечает HTML страницей. Возможна связь с использованием AJAX, в которой запрос генерируется внутри страницы Javascript, а в ответ приходит информация в формате XML или JSON. Клиентские или одностраничные приложения дают возможность с помощью AJAX загружать данные без обновления страницы с помощью специальных фреймворков.

Границы фронтенда и бэкенда статичными не являются. Оба направления постоянно развиваются и заимствуют черты друг друга. Так, появился автономный фронтенд, который позволяет хранит логику приложения и данные в самом клиенте. Легкий бэкенд направлен на сокращение числа обращений к данным за счет бессерверной архитектуры, новых технологий.

Программы для версионизации

Чтобы не сталкиваться с проблемой случайного удаления кусков кода, программисты используют версионизаторы. А ещё они помогают команде без проблем работать над одним функционалом совместно.

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

1. GitKraken — платная программа. Предназначена для Ubuntu и macOS.

2. Tortoise — вариант для Windows, правая рука backend-разработчика.

3. Ещё одно решение кроссплатформенного версионизатора — программа от Atlassian.

Компания предлагает нескольких передовых и надёжных продуктов для разработки, поддержки, управления кодом и рабочими задачами — не только техническими. Конкретно для работы с Git есть бесплатный клиент Sourcetree. Его выбирают, если по каким-либо причинам GitKraken и Tortoise не подходят.

Чем занимаются фронтенд-разработчики

Фронтенд-разработчик превращает дизайн-макет в страницу, которая открывается и работает в браузере. Также он программирует логику поведения визуальных элементов, получает данные от бэкенда, организует их предоставление пользователю. Фронтендер может собирать данные от пользователя, программировать лёгкую обработку этих данных или отправку на бэкенд для дальнейшей обработки.

Что нужно знать фронтенд-разработчику:

• Языки: HTML, CSS, JavaScript, всё чаще требуется TypeScript.
• Фреймворки: React, Vue или Angular. Нужно уметь работать с одним из них.
• Дополнительные инструменты: работа с внешними расширениями через NPM или Yarn, настройка сборки фронтенда (например, Webpack).

Рассмотрим типичную задачу младшего фронтенд-разработчика.

Предположим, у команды есть проект на React и TypeScript. В него нужно добавить компонент, выводящий на страницу иконку. Иконка может быть разных цветов в зависимости от ситуации, в которой она появляется:

‘primary’ — основной цвет,

‘secondary’ — вспомогательный цвет,

‘error’ — цвет в случае ошибки,

‘success’ — цвет в случае успешной операции.

Все цвета заданы в дизайн-системе. Связь названий и цветов описана в файле utils.ts. Выглядит он примерно так:

// utils.ts

type TIconTypes = 'secondary' | 'primary' | 'error' | 'success';

export type TIconProps = { type: TIconTypes, onClick?:() => void; };
export const getIconColor = (type: TIconTypes) => {

  return `${
    type === 'secondary'
      ? '#8585AD'
      : type === 'error'
      ? '#E52B1A'
      : type === 'success'
      ? '#00CCCC'
      : '#F2F2F3'
  }`;
};

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

// icon.tsx

import React from 'react';
import { getIconColor, TIconProps } from './utils';

export const Icon = ({ type }: TIconProps) => {
  return (
    <svg
      xmlns="<http://www.w3.org/2000/svg>"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill={getIconColor(type)}
    >
      <path d="/* здесь будет длинный набор чисел, описывающих svg-изображение */"/>
    </svg>
  );
};

В файле icon.tsx создаем саму иконку так, чтобы при встраивании этого компонента в любое место приложения можно было задать ее состояние.

Это лишь небольшой пример задачи, но он наглядно демонстрирует необходимость понимания дополнительных технологий помимо HTML, CSS и JavaScript: например, React и TypeScript. То, какие технологии потребуются на конкретном проекте, определяет стек, принятый внутри команды или компании. Его нужно либо знать, либо быть готовым быстро в него погрузиться.

Про общение клиентов и серверов, или Как это работает на языке компьютера

Есть несколько клиентов — ими могут быть обычные браузеры на ПК или мобильном устройстве. Один из клиентов — браузер вашего компьютера. Вы хотите получить информацию из интернета. Делаете запрос — вводите фразу в поисковик Yandex или Google. Сразу же открывается страница с необходимой вам информацией.

Как это работает на самом деле? Ваш клиент, он же браузер, отправляет запрос на сервер. Сначала на сервер пользователя — frontend. Frontend-сервер (компьютер) обрабатывает запрос, выбирает backend-сервер, который в данный момент свободен, и отправляет ему запрос из браузера. Backend-сервер обрабатывает запрос, обращается к базе данных и посылает ответ обратно frontend-серверу. А frontend, так как он отвечает за удобство пользователя, уже отображает ответ на запрос в виде HTML-страницы.

Передача данных

Как взаимодействуют frontend и backend?

Взаимодействие frontend и backend происходит по кругу:

• frontend отправляет пользовательскую информацию в backend;
• информация обрабатывается;
• и возвращается обратно, приняв понятную форму.

Этими работами занимаются разные специалисты, но каждому из них желательно понимать принципы, по которым работают коллеги

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

Существует несколько вариантов взаимодействия frontend и backend:

• HTTP-запрос напрямую отправляется на сервер, сервер ищет информацию, встраивает ее в шаблон и возвращает в виде HTML-страницы.
• Вариант с использованием инструментария AJAX (Asynchronous JavaScript and XML). В этом случае запрос отправляет JavaScript, загруженный в браузер, а ответ приходит в формате XML или JSON.
• Одностраничные приложения, которые загружают данные без обновления страницы. Это делается также при помощи AJAX или фреймворков Angular и Ember.
• Ember или библиотека React помогают использовать приложение и на сервере, и в клиенте. Frontend и backend взаимодействуют через AJAX и HTML-код, который обрабатывается на сервере.

Что такое бэкенд

Серверного кода не видно — это самое главное, что нужно понять. Если фронтендер может положить в портфолио сайт и будет виден результат его работы, то результат работы бэкендера в том, что сайт вообще работает и откликается на запросы.

Серверный код выполняет основную работу — даёт пользователям ту информацию, за которой пришли и попросили. Чаще всего бэкендеры пишут код, который связывает фронтенд и базу данных.

Фронтенд — это продавец-консультант в Икее, к которому вы пришли и попросили шкаф, а бэкенд — кладовщик, который принесёт ваш шкаф со склада.

Взять даже эту статью: откуда сайт знает, какого числа была опубликована эта статья, сколько у неё просмотров, какие заголовки и откуда брать картинки? Вся эта информация хранится на сервере. Бэкенд-разработчики Академии сделали так, чтобы всю эту информацию можно было сохранить и получить в нужный момент, а фронтендеры — чтобы вы увидели эту страницу такой, как я задумал.

Предыстория

BILLmanager появился как раз в те времена, когда не было жёсткого разделения по направлениям. Он имел согласованную архитектуру, умел управлять поведением пользователя и его даже можно было расширять плагинами. Шло время, команда развивала продукт, и вроде всё было хорошо, но стали наблюдаться странные явления. К примеру, когда программист занимался бизнес-логикой, он начинал плохо верстать формы, делал их неудобными и сложными для восприятия. Или добавление, казалось бы, простой функциональности отнимало несколько недель: архитектурно модули были жёстко связаны, поэтому при изменении одного приходилось корректировать другой.

Про удобство, эргономику и глобальное развитие продукта вообще можно было забыть, когда приложение падало с неизвестной ошибкой. Если раньше программист успевал делать работу в разных направлениях, то с ростом продукта и требований к нему это стало невозможно. Разработчик видел картину в целом и понимал, что если функция не будет правильно и стабильно работать, то формочки, кнопочки, тесты и продвижение не помогут. Поэтому откладывал всё и садился за исправление злосчастной ошибки. Совершал свой маленький подвиг, который оставался никем не оценённым (сил на правильную подачу клиенту уже просто не было), но функция начинала работать. Собственно, чтобы эти маленькие подвиги доходили до клиентов, в команде и появились люди, ответственные за разные направления: фронтенд и бэкенд, тестирование, дизайн, поддержку, продвижение.

Но это было только первым шагом. Команда изменилась, а архитектура продукта осталась технически сильно связанной. Из-за этого не получалось развивать приложение требуемыми темпами, при изменении интерфейса приходилось менять логику бэкенда, хотя структура самих данных часто оставалась неизменной. Со всем этим надо было что-то делать.