Как сделать фронтенд для бекенда
Обновлено: 07.07.2024
Интересует вопрос, как на самом деле на нормальных сайтах работает связка frontend + backend.
Как это отделено друг от друга и как взаимодействует?Очевидно это не просто папка где всё вместе лежит(и html и php и js и т.д).
Как можно использовать разные технологии на одном и том же сайте? (на backend'e например: python,go и т.д, на фронтенде другие связки технологий.)
Интересует любая информация об этом всём. ссылки на статьи, книги, блоги . что угодно
И по возможности (если такое существует) примеры развертывания сайтов, с разными технологиями.
Искал в интернете, но не особо нашел информацию(скорее всего не правильно искал).
Большие репозитории создают три проблемы — сильное зацепление, ненужную коммуникацию и сложный деплой.
Сильное зацепление
О зацеплении и связности
Когда фронтенд и бэкенд лежат рядом, есть большой соблазн зацепить их вместе — к примеру, вставить какой‑нибудь CSRF ‑токен прямо в HTML , который запускает ваше фронтенд‑приложение.
О зацеплении и связности
Пока проект состоит из одного фронтенда и одного бэкенда — это не очень страшно. Но как только вы решите добавить ещё один фронтенд — скажем, сделать мобильное приложение — вам придётся решать все отложенные проблемы интеграции: придумывать протоколы взаимодействия, учиться проксировать запросы или работать с CORS .
Если бы проекты были разъединены с самого начала, у вас бы сами собой появились удобные для работы соглашения и протоколы — REST или GraphQL , авторизация через JWT . Было бы проще привлекать внешние команды — ведь им не приходилось бы изучать код вашего бэкенда, а вам — его дорабатывать под каждый новый фронтенд.
Ненужная коммуникация
В проекте с раздельными репозиториями фронтендеры и бэкендеры никогда не поспорят, куда класть index.html и в какой момент лучше запускать webpack, — каждый будет пилить свой проект, используя любимые подходы.
Бэкендеры не будут думать об инвалидации кэша CSS ‑файлов, а фронтендеры не будут знать ничего о маршрутизации запросов. Если у бэкендеров сломалась публикация, фронтендеры могут не ждать, пока её починят, — у них есть отдельный процесс, который обновляет сервер независимо.
Сложный деплой
К сожалению, если такой сервис не поймёт, что именно лежит у вас в репозитории, то он не сможет вам помочь. Скажем, Netlify наверняка спасует, если увидит репозиторий с Django, в котором фронтенд запрятан куда‑то глубоко и собирается средствами фреймворка.
P. S. Это был совет об управлении разработкой. Хотите больше знать о планировании спринтов, управлении продуктом или о настройке инфраструктуры? Присылайте вопросы.
[adace-ad >Мобильное приложение нужно всем. В розничном бизнесе, который должен остро и быстро реагировать на изменение в своей отрасли, приложение будет являться отправной точкой роста — это дополнительный канал для привлечения новых клиентов и увеличения LTV. Кроме того, заказав ПО в какой-нибудь retail software development company, вы получите не только приложение, но и свап данных своих клиентов: средний чек, время использования, отчеты, выгрузку транзакций и многое другое, что можно проанализировать. В общем, приложение штука полезная не только и не столько для клиентов, сколько для самого бизнеса.
Node.js (бэк) + React Native (фронт)
Одна из наиболее сильных связок в качестве стека для разработки приложения. React Native — это кроссплатформенный фреймворк, который можно отнести к флагману мобильного девелопмента. С его помощью были написаны или переписаны на React. Между прочим, инста — это настоящий хайлоад : за один месяц приложение посещает 1 миллиард активных пользователей, более 500 миллионов используют его ежедневно. Даже Tesla использует этот фреймворк для мобильного приложения по управлению автомобилем
Python (бэк) + Kotlin (фронт)
Один из самых известных фреймворков Django как раз написан на Python
Котлин же как раз очень удобен в плане разработки интерфейса, благодаря user-friendly синтаксису и получивший полную поддержку установочных пакетов Google и IDE, включая Android и SDK.
Laravel + Flutter
Флаттер — крутой инструмент разработчика UI для создания красивых и нативных приложений на всех платформах — десктоп, мобайл, веб. Среда Flutter используется как единая база кода, которая компилируется в собственный код для iOS и Android. Flutter довольно давно снискал популярность среди западных front-end разработчиков. У нас же в стране хоть и хвалят его за упрощенный процесс верстки, но пока не пользуется большим спросом.
Первое направление занимается вопросами, касающимися клиентского интерфейса. Всё, что пользователь видит на мониторе, начиная от шрифта, заканчивая общим оформлением, с чем он может взаимодействовать, относится к области влияния frontend. Организация работы сервера, реализация логики веб-продукта, решение прочих задач, которые скрыты от глаз юзера – сфера компетенции бекенд. Чтобы приложение функционировало эффективно, важно обеспечить грамотное распределение функций внутри команды с учётом специфики каждого направления.
Что такое фронтенд разработка
Эта сфера деятельности включает все аспекты взаимодействия с пользователем веб-продукта:
создание эстетически привлекательной картинки, где каждый элемент находится на своём месте;
разработка простого, понятного юзеру функционала для реализации назначения приложения;
получение клиентских запросов с отправкой в бекенд и формированием соответствующего отзыва.
В ходе работы frontend-программист сталкивается с необходимостью сотрудничества с другими специалистами. Текстовый, графический контент, верстка и фронтенд неразрывно связаны. Поэтому он должен взаимодействовать с копирайтерами, дизайнерами, маркетологами, стремясь грамотно объединить все блоки в единое целое и заставить их слажено работать. От этого в значительной степени зависит коммерческий успех проекта. В ходе работы не стоит забывать о контакте с противоположной стороной – бекендом, чьи рекомендации важно учитывать.
В итоге, фронтенд разработчик – это специалист, обладающий знаниями, практическими навыками в различных сферах создания приложений. Он должен ориентироваться в современных пользующихся спросом библиотеках, фреймворках, движках, уметь работать с базами данных, графическими редакторами, языками запросов, в целом понимать принцип работы серверной логики. Однако главные инструменты, которые необходимы ему в работе, сводятся к трём позициям:
HTML. Повсеместно применяемый язык разметки, который позволяет сформировать правильную верстку на сайте. С его помощью текстовый контент разбивается на разделы, абзацы, списки, в структуру страницы внедряются таблицы, рисунки, графики, заголовки и т.д. Правильное применение HTML даст возможность каждому элементу находиться в нужном месте для органичного восприятия пользователем.
CSS. Фронтенд это в том числе дизайн сайта, поэтому универсальный код, используемый для внешнего отображения контента, необходим. Он отвечает за формирование размера, цвета, стиля шрифта, создание фона, размещение блоков на странице, переформатирование документов для печатной версии или для чтения.
JavaScript. Инструмент, позволяющий сделать взаимодействие с пользователем живым, динамичным. Этот язык программирования обрабатывает поступающую от юзера информацию: клики мышью, нажатие клавиш, перемещение курсора, и передаёт запросы на сервер.
Немного о backend
Разработка сайта предполагает не только клиентскую публичную сторону. В противовес ей бекенд это теневая незаметная глазу, но важная часть деятельности, обеспечивающая безотказное, бесперебойное, слаженное функционирование продукта. Утрированно её можно назвать движком, который объединяет в себе основные инструменты хостинга: сервер и базы данных.
Основные задачи backend:
разработка алгоритмов работы веб-приложения;
реализация логики сайта, корректного выполнения его функций;
генерация HTML с использованием одного из языков программирования;
организация и обеспечение операций с данными из СУБД;
обработка запросов, которые генерирует фронтенд сайта, интеграция с ним;
отладка, тестирование готового продукта, отдельных компонентов.
Для реализации этих функций используются преимущественно БД PostgreSQL , MySQL и языки PHP, Ruby, Python, JavaScript, Go. С их помощью происходит выполнение HTML- кода на сервере, результат которого пользователь видит на мониторе. В принципе любой язык программирования подходит для разработки, однако вышеперечисленные наиболее отвечают текущим реалиям.
В отличие от frontend, бекенд разработчик это специалист, больше занимающийся программно-аппаратной, административной частью работы сайта, не взаимодействуя с пользователем. Он создаёт каркас, основу проекта, которую наполняет и оживляет фронтенд девелопер. В его обязанности входит создание логики, архитектуры сайта, написание скриптов, работа с базами данных, серверными технологиями. После запуска в работу его основная цель – поддержка с целью устранения возникающих ошибок, обеспечения бесперебойного функционирования.
Как наладить эффективное взаимодействие двух сторон
Профессиональная веб студия, занимающаяся созданием качественного продукта, должна уделить одинаковое внимание развитию обоих направлений, так как разница между фронтенд и бэкенд очевидна. В последнее время появились универсальные full-stack специалисты, способные совмещать функции двух сфер деятельности. Однако их возможностей зачастую достаточно только для небольших проектов. Если поступают заказы на разработку, поддержку масштабного сайта, приложения без разделения на front end и back end не обойтись.
Когда специалисты обоих направлений найдены, задачи разделены по специфике, важно обеспечить эффективное взаимодействие двух сторон медали: клиентской и серверной. Обычно они контактируют по стандартной круговой схеме. Пользовательский запрос, полученный клиентской стороной, передаётся на сервер. Там происходит его обработка с целью получения релевантного ответа. Адаптированная для понимания юзером информация передаётся обратно.
Основные способы взаимодействия фронт енд и бекенд:
HTPP-запросы. Здесь используются готовые шаблоны из баз данных. Запрос поступает непосредственно на сервер, который находит соответствующие данные. Они вставляются в шаблон, отправляются пользователю в виде HTML-документа. Кроме данного кода, используются CSS для графического отображения информации, JavaScript для динамичного взаимодействия.
AJAX. Этот инструментарий использует JS, загруженный в браузер, для отправки запроса и форматы JSON, XML для передачи ответа.
Одностраничные приложения. Более современная технология взаимодействия фронтенд и бекенд, предполагающая обработку запроса без перезагрузки страницы. Её реализация стала возможной после появления фреймворков типа Angular, Ember. Созданные с их помощью приложения сразу полностью комплектуются на сервере, поэтому все изменения происходят на клиентской стороне.
Универсальные программы. К числу можно отнести фреймворк Ember или библиотеку React. Здесь контакт двух сторон может происходить с применением как AJAX, так и HTML-кода.
В конце важно отметить, что вопросы, чем фронтенд отличается от бэкенда или кто из них важнее, потеряли актуальность. В настоящее время это две неразрывные неотъемлемые составляющие, необходимые для разработки полноценного сайта.
Читайте также: