Как правильно реализовать архитектуру AJAX приложения?

Добрый день!

Разрабатываю проект
Стэк следующий:

фронтэнд
- vanilla js (без каких-либо библиотек, есть в одном месте использование jquery, но оно минимально, точечно и легко убирается)
- AJAX (идея была в том, чтобы создать десктоп приложение с мгновенным откликом, поэтому все вызовы к серверу осуществляются через AJAX)
бэкэнд
- php, но по сути это неважно, так как все php скрипты просто возвращают json данные для ajax файлов.

Что, как я считаю (вполне вероятно это не так), было выбрано правильно для реализации в моем конретном случае

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

попытка придерживаться MVC модели. Под каждую страницу есть
- php файл(ы), который возвращает json ( бэкэнд )
- js файл (контроллер), который обрабатывает данные и перестраивает view фронтэнд
- шаблон страницы со скелетом html

Проблемы, которые возникли по итогам такой реализации

- не знаю как правильно обрабатывать и контролировать состояние AJAX запросов (на одной странице их может быть несколько) - как я теперь понимаю, нужно использовать PROMISE (но пока не понял, как это работает - достаточно сложно воспринять)

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

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

- практически все данные и весь код приложения доступен и открыт через консоль браузера. В том числе видна вся структура приложения - можете сами посмотреть. Можно ли что-то с этим сделать я не знаю.

- не знаю, как реализовать какую-то единообразную схему обработки ошибок в приложении, без дублирования кода. Чтобы все скрипты вдруг не валились, если где-то что-то сломалось. То же самое и про единнообразную обработку AJAX запросов (знать когда все запросы исполнились и т.п.)

- проблема с навигацией и индексацией из-за AJAX (сейчас вроде как уже понял, что нужно использовать pushState)

- что делать и нужно ли что-то делать для тех, кто не использует JS. Например те же рекомендации по SEO для AJAX говорят что для всех динамических страниц нужно иметь статический snapshot. Как его реализовать - чтобы это было "дешево (просто) и сердито (не криво)" я не знаю.

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


При этом хотелось бы сохранить уже существующий стэк (pure js, framework-less), так как в целом не хочется переделывать все еще раз.

Пожалуйста, поделитесь соображениями по этому поводу - буду рад конструктивным советам и критике.

Спасибо.
  • Вопрос задан
  • 1183 просмотра
Решения вопроса 1
@davidnum95
А вы знатный велосипедист.
- не знаю как правильно обрабатывать и контролировать состояние AJAX запросов (на одной странице их может быть несколько) - как я теперь понимаю, нужно использовать PROMISE (но пока не понял, как это работает - достаточно сложно воспринять)

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

react stateful components
- фактически view совмещен с контроллером, из-за этого уже сейчас сложно работать с файлами контроллеров - они разрастаются и содержат много html - кода. Кроме того, они завязаны на глобальные данные, про которые я уже писал и получается, что ни о каком модульном подходе не приходится говорить. Как от этого избавиться при текущей архитектуре не знаю.

react-redux, react decomposition
- практически все данные и весь код приложения доступен и открыт через консоль браузера (можете сами посмотреть). В том числе видна вся структура приложения - можете сами посмотреть. Можно ли что-то с этим сделать я не знаю.

webpack, etc...
- не знаю, как реализовать какую-то единообразную схему обработки ошибок в приложении, без дублирования кода. Чтобы все скрипты вдруг не валились, если где-то что-то сломалось. То же самое и про единнообразную обработку AJAX запросов (знать когда все запросы исполнились и т.п.)

react error boundaries
- проблема с навигацией и индексацией из-за AJAX (сейчас вроде как уже понял, что нужно использовать pushState)

react-router, ssr
- что делать и нужно ли что-то делать для тех, кто не использует JS. Например те же рекомендации по SEO для AJAX говорят что для всех динамических страниц нужно иметь статический snapshot. Как его реализовать - чтобы это было "дешево (просто) и сердито (не криво)" я не знаю.

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

Таким образом проще переписать приложение с использованием какого нибудь современного стэка (react например)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Главная ошибка - писать все с нуля без framework. Есть куча решений, которые помогли бы Вам в решении поставленной задачи. К тому же знать framework надо обязательно, можно не использовать, но знать надо. Ибо именно работая с ними Вы видите правильную архитектуру, правильные подходы и методы.
Ответ написан
Комментировать
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Простите меня заранее, но я вижу, что Вы хотите много чего, не изучив даже малой доли того, что требуется для построения грамотной архитектуры.
Я не могу Вам что-то посоветовать, поскольку я не знаю архитектуры существующего у Вас приложения.

Могу сказать, как использую сам: есть собственная либа includeHTML простая, как ведро... Но я даже не думал, что кому-то она будет нужна. Сейчас решил сделать роутинг для неё и контроль загруженных ресурсов (чтобы не грузить по несколько раз одно и то же).

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы