Найти тему

О взаимодействии backend и frontend разработки на примере разработанного мобильного приложения.

https://ru.freepik.com/free-vector/app-development-concept-illustration_12780653.htm
https://ru.freepik.com/free-vector/app-development-concept-illustration_12780653.htm

Сегодня хотим рассказать о взаимодействии backend и frontend разработки. Почему это может быть интересно Вам?

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

Что такое backend и frontend разработка, мы писали ранее в статье о том, кто такие разработчики.

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

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

Взаимодействие между backend и frontend - это процесс передачи данных и выполнения операций между серверной и клиентской сторонами при разработке интернет-ресурсов.

Взаимодействие между backend и frontend осуществляется с помощью HTTP-протокола. Клиентская сторона отправляет HTTP-запросы на backend, а backend отвечает на них с помощью HTTP-ответов. Для передачи данных между backend и frontend используются различные форматы, такие как JSON или XML.

Пример взаимодействия между backend и frontend:

  1. Пользователь взаимодействует с интерфейсом, который работает на frontend.
  2. Frontend собирает данные, введенные пользователем, и отправляет их на backend с помощью HTTP-запроса.
  3. Backend получает запрос, обрабатывает данные, выполняет нужные операции (например, сохранение данных в базе данных) и отправляет ответ на frontend с помощью HTTP-ответа.
  4. Frontend получает ответ от backend, обрабатывает данные и отображает нужные изменения пользователю.

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

При проектировании приложения Backend и Frontend разработчики должны совместно определить набор API методов, которые необходимы для работы системы.

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

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

В процессе развития проекта часто требуются изменения как со стороны Backend, так и со стороны Frontend. Согласовать требования, изменения и результаты API запросов - совместная задача Backend и Frontend разработчиков.

Удобнее и быстрее организовать такое взаимодействие внутри одной команды, и наша компания смогла это реализовать, объединив и команду Frontend разработчиков и команду Backend разработчиков.

На примере приложения Fetch Kids - сервиса по организации перемещения детей в школу/из школы - хотим показать, как в рамках одной команды получается взаимодействовать Backend и Frontend разработчикам, ускоряя процесс работы над проектом.

-2

Fetch Kids это приложение, которое упрощает процесс забора детей родителями из школы.

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

Пример взаимодействия:

От клиента поступает запрос: нужно добавить возможность отменить успешно завершенный пикап (пикап завершили по ошибке, а ребенок из школы не забран).

С точки зрения Frontend нужно добавить кнопку по которой пользователь может отменить выбранный пикап и отправить запрос на сервер, получить ответ и показать новый статус пикапа.

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

Первое, что нужно клиенту - это оценка времени, необходимая для реализации данного запроса.

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

Данный проект был реализован в 2019г. и развивается нашей командой по настоящее время.

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

https://e2e4gu.ru/team/