Методы разделения передней и задней части с полным стеком JavaScript?


31

Предположим, у меня есть интерфейс, который в основном представляет собой одностраничное приложение, написанное с использованием angular, grunt и bower. И предположим, у меня есть бэкэнд, который в основном представляет собой просто REST API, расположенный поверх ORM, который хранит / извлекает объекты из базы данных, используя такие вещи, как grunt, express и sequelize.

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

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

У меня вопрос, какие существуют методы для этого чисто? Есть ли рекомендуемые лучшие практики для полного стека javascript?

Вариант № 1 кажется монолитным, то есть «не разделяйте их». Преимущество состоит в том, что цепочка сборки проста, и все в одном месте, но, похоже, есть много минусов; Более сложная версия независимо, сломанный фронт означает неразвертываемую заднюю часть и так далее.

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

Вариант № 3 кажется полным разделением: каждый из фронт-энда и бэк-энда запускает свои собственные серверы на разных портах, и они являются полностью отдельными проектами. Недостаток кажется, что они должны быть настроены, чтобы знать о портах друг друга; внутренний интерфейс должен разрешать CORS от внешнего интерфейса, а внешний интерфейс должен знать, где ожидаются все эти конечные точки.

Вариант № 4 может заключаться в использовании чего-то вроде docker-compose для объединения всего этого.

Я уверен, что есть другие варианты. Какова рекомендуемая лучшая практика?

Ответы:


18

Это интерфейсное, фоновое приложение с промежуточным REST-интерфейсом. У вас уже есть полное разделение.

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

Но здесь нет «лучшей практики». Лучшая практика - это та, которая наилучшим образом соответствует вашим конкретным потребностям.


2
Как бы вы разместили все в одном домене, если бы они были двумя отдельными серверами? Даже если бы они работали на одном и том же хосте, они должны были бы быть на разных портах, создавая им разные источники.
FrobberOfBits

1
Если нет наилучшей практики, есть ли доступные примеры того, как эта конфигурация выполняется?
FrobberOfBits

7
Вы можете установить обратный прокси-сервер (nginx) перед вашим приложением и смонтировать /расположение на localhost:3000(внешний сервер) и /api/на localhost:3001(API-сервер). Тогда nginx будет прослушивать порт http по умолчанию.
nvartolomei

@nvartolomei Я согласен с использованием обратного прокси. Есть ли способ аккуратно обмениваться некоторой информацией между бэкендом, интерфейсом, например информацией о маршрутах? Кроме того, легко ли указать обратный прокси-сервер на CDN?
Эндрю Олбрайт

6

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

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.