Как переделать сайтик с gulp + pug на SPA (+ router) с vue/react?

Question

[code-by]

есть небольшой сайтик сделанный с использованием шаблонов pug, используются sass, jquery (включая анимацию элементов), сборщик gulp.
нужно сделать так чтобы было SPA (single page application) с использованием роутера, при навигации проигрываемая в фоне mp3 не должна начинатся сначала
также будут добавлены запросы на бэксервер (новостная лента и т.п. + форма обратной связи).
можно ли такое осущесвить и что использовать? есть ли смысл перейти на вэбпак и что лучше использовать vue/react?
благодарю за ответы, идеи, наводки

Answer 1

[Антон Неверов]

Как умеете, так и делайте.
Я бы делал на React. Не потому что это правильно, а потому что я его знаю и мне удобно на нём писать. SPA они и в Африке SPA, на чём вы его не пишите - работать будет плюс минус одинаково.

Answer 2

[Пашенька]

Ну во-первых: ни вэбпак ни галп не имеют отношения к сути вопроса. переписывать на фреймворк будет времязатратно. Проще накинуть обработчик на все ссылки, сделав роутинг + history API.

Comments

[code-by]

какой роутинг посоветуете? знаю только react-router и vue-router
некоторые шаблоны используются в других шаблонах поэтому может все же использовать react/vue?

[Пашенька]

code-by, я о том, чтобы вообще не использовать фреймворк какой-либо. Нет ничего сложного в том, чтобы слать xhr запрос за страницей, втыкать её в нужный контейнер и устанавливать history.pushState, если это не идёт в разрез с вашей архитектурой.

[code-by]

при таком подходе можно ли сделать чтобы фоновый музон играл без скачков в начало трэка ? и как

[Пашенька]

code-by, да, я как раз делаю ровно то же самое :)
1. окей, к примеру в head держим скрипт с плеером.
там же вешаем обработчик клика на все ссылки(лучше делегированием) + возможно нужно будет обработать не только ссылки но и форму поиска(к примеру). Это наш первичный скрипт в хеаде, его мы не перезагружаем никогда.
2. по переходу по ссылке, отменяем поведение броузера по умолчанию event.preventDefault();, вместо этого загружаем страницу ajax'ом, парсим то, что нам от нее нужно, в самом простом случае это body и втыкаем вместо body на нашей текущей странице, ставим history.pushState. Еще, конечно, надо спарсить из head meta-теги и title и подменить. Это вкратце, нюансов может быть много. Смотрите сами, если вам проще фреймворками, делайте ими, за них я не подскажу.