Как правильно реализовать архитектуру 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), так как в целом не хочется переделывать все еще раз.
Пожалуйста, поделитесь соображениями по этому поводу - буду рад конструктивным советам и критике.
Хватит этих скептических отношений к фреймворкам. Вы можете полгода разрабатывать проект, который на фреймворке делается за 2 недели. В чем экономическая выгода?
Ба Ань Доан, если честно - нет. Не могу сейчас выделить это как проблему. Мне нужен новый срез данных - я создал новый файл, реализовал в нем логику и могу к нему обращаться. Может это не правильный подход, но это понятно и мне с этим легко работать. При желании файла потом можно легко переделать в функцию.
Боль есть в тех моментах, которые я озвучил - можете по ним дать совет.
Ба Ань Доан, я не готов к спору насчет фреймворков, возможно вы правы. Можете тогда в рамках тех проблем, которые я описал - рекомендовать какое-то конретное решение и объяснить почему оно будет лучше в моем случае.
itexams, на самом деле - доставляет, раз Вы задали такой вопрос здесь. Ибо:
- не знаю как правильно обрабатывать и контролировать состояние AJAX запросов (на одной странице их может быть несколько) - как я теперь понимаю, нужно использовать PROMISE (но пока не понял, как это работает - достаточно сложно воспринять)
это не является проблемой в Vue/React
- много данных храню на стороне клиента в глобальных переменных. С одной стороны, сейчас это делает отклик быстрее, но с другой я не хочу сломать браузер, когда данных станет больше, кроме того, сейчас думаю, что правильнее было бы иметь на клиенте только те данные, которые нужны только здесь и сейчас.
это не является проблемой в Vue/React
- фактически view совмещен с контроллером, из-за этого уже сейчас сложно работать с файлами контроллеров - они разрастаются и содержат много html - кода. Кроме того, они завязаны на глобальные данные, про которые я уже писал и получается, что ни о каком модульном подходе не приходится говорить. Как от этого избавиться при текущей архитектуре не знаю.
это не является проблемой в Vue/React
- практически все данные и весь код приложения доступен и открыт через консоль браузера (можете сами посмотреть). В том числе видна вся структура приложения - можете сами посмотреть. Можно ли что-то с этим сделать я не знаю.
"что то хочу сделать, но не знаю что"?
- не знаю, как реализовать какую-то единообразную схему обработки ошибок в приложении, без дублирования кода. Чтобы все скрипты вдруг не валились, если где-то что-то сломалось. То же самое и про единнообразную обработку AJAX запросов (знать когда все запросы исполнились и т.п.)
это не является проблемой в Vue/React..
да и вообще, раз у вас вся страница генерируется c помощью js, то перед генерацией обрабатывайте ошибки. Где точка входа?
- проблема с навигацией и индексацией из-за AJAX (сейчас вроде как уже понял, что нужно использовать pushState)
- что делать и нужно ли что-то делать для тех, кто не использует JS. Например те же рекомендации по SEO для AJAX говорят что для всех динамических страниц нужно иметь статический snapshot. Как его реализовать - чтобы это было "дешево (просто) и сердито (не криво)" я не знаю.
это вам придется дублировать логику js в php файлах, либо использовать сторонние сервисы для снапшотов.
Собственно это уже решено в Nuxt.js
Такой проект вы перепишете на Vue за 1-1,5 недели, с учетом изучения.
itexams, нет, я не фронтендер, изучил только поверхностно Vue для быстрого прототипирования админок для бэкенда, так как он мне показался легче и быстрее в освоении.
по AJAX запросам - axios
по хранилищу - vuex
по архитектуре - в vue уже задано. следуете ею, и ничего криминального не случится
по ошибкам и отладкам - используйте webpack, расширение Vue Devtools и исправляйте ошибки на лету
по навигации - vue-router
по индексации - nuxt, но я не вижу у вас seo материалов
- не знаю как правильно обрабатывать и контролировать состояние 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 например)
Можете ли вы на платной основе помочь написать какой-то простой пример такой реализации через react - который бы я потом смог использовать для разработки.
А вот по поводу комментария насчет использование Vue можете что-то скзаать? Многие его рекомендуют. Мне хотелось бы, если выбирать из двух - то тот, чьи знания потом будут больше востребованы (наверно это React)? Если же какой-то из двух намного сложнее - то тот, который проще.
Главная ошибка - писать все с нуля без framework. Есть куча решений, которые помогли бы Вам в решении поставленной задачи. К тому же знать framework надо обязательно, можно не использовать, но знать надо. Ибо именно работая с ними Вы видите правильную архитектуру, правильные подходы и методы.
Простите меня заранее, но я вижу, что Вы хотите много чего, не изучив даже малой доли того, что требуется для построения грамотной архитектуры.
Я не могу Вам что-то посоветовать, поскольку я не знаю архитектуры существующего у Вас приложения.
Могу сказать, как использую сам: есть собственная либа includeHTML простая, как ведро... Но я даже не думал, что кому-то она будет нужна. Сейчас решил сделать роутинг для неё и контроль загруженных ресурсов (чтобы не грузить по несколько раз одно и то же).
Посмотрите принцип работы библиотеки: автор - я и отвечу на все вопросы, есть предложения по улучшению - также, пишите.
