Комментарии 44
пропадает раздражающая перезагрузка
Я уже писал об этом ранее: просто подгружаем кусок HTML-кода аяксом и пихаем на страницу — всё, раздражающая перезагрузка пропала. Скрипт килобайт на десять максимум, с учётом костылей под все браузеры. Так уже делают ВК и гитхаб, например
интерактив
То же самое, всё это делается простыми скриптами в несколько килобайт без тотального SPA (но впадать в крайности с jQuery-лапшой не надо). Возьмите тот же хабрахабр: он ни разу не SPA, но вы же наверно не будете отрицать, что комментарии очень даже интерактивны?)
Проба сжатия на скорую руку остальных скриптов одного крупного сайта дала 55кб, но тут в лоб не совсем корректно сравнивать, нужно ещё фичастость учитывать
А если надо перезагрузить контент не в одном блоке, а в разных местах страницы?
Так уже делают ВК и гитхаб, например
Регулярно натыкаюсь в ВК на такие баги. После нескольких переходов по страницам состояние нотификаций и текущего трека в шапке сайта одно, а внизу в коненте — другое. А все как раз потому, что данные приходят с сервера отдельными кусочками и не синхронизируются, в отличие от нормальных SPA, где все рендерится из единого стора.
А если надо перезагрузить контент не в одном блоке, а в разных местах страницы?
Загружаем несколько контентов, делов-то
состояние нотификаций и текущего трека в шапке сайта одно, а внизу в коненте — другое
Лично я с этим не сталкивался, но поверю, что оно есть. Ничто не мешает подгружать куски HTML-кода и поменять ему пару классов согласно информации из единого стора. То, что разработчики ВК так не сделали (если правда не сделали) — их личные проблемы.
А можете рассказать поподробнее? Я смотрю документацию pjax и вижу, что там можно обновить только один контейнер по клику:
$('.group-invite-accept').on('click', event => {
$.pjax.submit(event, '#pjax-container');
});Как в вашей имплементации можно обновить несколько блоков? И где будет написано по какому url какой блок забирать?
pjax хрень, но ничего не мешает сделать (и я делал) аналог, позволяющий передавать несколько контентов, мыслите абстрактнее и не зацикливайтесь на конкретной реализации :)
И где будет написано по какому url какой блок забирать?
А это вообще зачем?
Так расскажите поподробнее о своей реализации! Как будет выглядеть перезагрузка нескольких контейнеров в примере кода выше?
Все варианты, что я сейчас могу придумать, похожи на спагетти-код.
Как будет выглядеть перезагрузка нескольких контейнеров в примере кода выше?
Я ещё не понял, какая задача решается? Возможно, вы пытаетесь впихнуть pjax туда, где достаточно простого fetch (и совсем необязательно это будет спагетти-код, если руки не кривы)
Я ещё не понял, какая задача решается?
Что-нибудь как в ВК, есть центральный контент, а есть левое меню. Нужно счетчики слева обновлять, например когда приглашение в группу принято, нужно там новую цифру подгрузить.
Ага, то есть все-таки надо будет написать сколько-то клиентского кода, а не
просто подгружаем кусок HTML-кода аяксом и пихаем на страницу
как вы писали ранее.
В итоге так все равно получаем большой js-бандл с лапшой из селекторов в разные места страницы, "зато не на реакте", прекрасно.
Если вы не умеете писать на js и ваш код с селекторами постоянно получается лапшой — это ваши личные проблемы с вашей кривизной рук, уж простите ¯\_(ツ)_/¯
Конечно, у всех кривые руки, один вы профессионал. Вот Хабрахабр например. На эту страницу грузится ~80 Кб кода на Jquery (не считая веса библиотек). И все равно встречаются вот такие баги.
Можно сколько угодно пенять на кривые руки, а можно сделать рендер комментариев из json полностью на клиенте и исключить такую проблему в принципе.
Ещё бесит SPA в почтовиках (типа gmail).
SPA нужно использовать только там, где это действительно оправдано, а не лепить везде, потому что это модно.
То есть SPA в вашем понимании не включает в себя изоморфизм?
Не могу дать ответа на вопрос, я не веб-разработчик, для меня изоморфизм — это понятие из теории графов.
SPA в моём понимании — сайты, где многооконность сознательно огорожена программистом: невозможность открытия письма в новой вкладке, потеря состояния и рассинхронизация при работе сразу в нескольких вкладках и т.д.
Так сложилось, что большинство подобных SPA-сайтов ещё и перегружены скриптами, поэтому их многократная загрузка в нескольких вкладках приводит к совершенно излишним тормозам.
Всё, что я наблюдаю: простые сайты, которые сделаны с минимумом JS, удобны в использовании, ну а нафаршированные JS — обычно нет. А вот используется там изоморфный рендеринг или нет, мне все равно.
Хорошо, как же тогда назвать одностраничные приложения, которые позволяют и открывать отдельные страницы в новой вкладке, и синхронизируются между вкладками, и не требуют ожидания прогрузки данных в странице?
Не знаю. Но если основной сценарий работы с сайтом предполагает открытие множества специализированных страниц, то какой смысл его реализовывать как SPA?
Не стоит недооценивать человеческую лень :). Я, например, как разработчик backend'а, особенно не на PHP, с радостью полностью избавился от необходимости рендерить HTML на сервере. Когда JavaScript всё равно «знает» про то, какие элементы есть на страницах, намного удобнее сделать так, чтобы сам JavaScript его и рендерил — это сильно уменьшает необходимость в общении между фронтенд-разработчиками и бэкенд-разработчиками. Заодно можно сделать мобильные и десктопные клиенты, которые будут пользоваться тем же API — не красота ли?
Конечно же, это означает, что запросов на сервер будет делать больше, и статики нужно больше, и статья как раз о том, как не допустить того, чтобы это вызывало проблемы производительности на клиенте.
И да, рендеринг HTML на сервере избавляет от необходимости иметь JavaScript вообще, на радость параноикам c NoScript ;)
Вы можете себе это позволить? Бюджет веб-производительности в реальном мире