Создание SPA с помощью load() Jquery и Laravel?

Question

[Dmitry]

Изучаю тему SPA, кроме тяжелых turbolinks, vue-router, angular и прочих фреймворках и библиотек для реализации полноценного SPA ничего нет. Но точно могу реализовать абсолютно такой же функционал с помощью Laravel и $.load(), который по сути является аналогом $.get, который используют все SPA. Вопрос, надежно ли это? И почему не пишут легкий в реализации SPA без всяких фреймворках.

Comments

[Сергей delphinpro]

turbolinks тяжелый?
Вы его смотрели вообще? jQuery больше весит

[Сергей delphinpro]

И почему не пишут легкий в реализации SPA без всяких фреймворках.

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

[pLavrenov]

Ларавел тяжелый, может без него?

[Константин Б.]

Сергей delphinpro, наверное для понимания тяжелый)

[Константин Б.]

Наверное потому-что ваш подход это не SPA приложение. Vue, Angular, React это в первую очередь клиентские приложения, в которых логика обрабатывается в браузере клиента. Да, они бывают изоморфными с первичным рендерингом на сервере. Но вся логика строится в браузере. Это абсолтно не тоже самое что делает turbolinks или jquery

[Dmitry]

Константин Б., В чем отличия понял, но не до конца понимаю так называемый "профит". Если писать обычный новостной сайт, но хочется чтобы страница не перезагружалась, не лучше ли использовать $.load() ? Не прогнётся ли он под высокой нагрузкой на сервер?

[Dmitry]

Константин Б., Не хватает мне теории, методы кардинально разные, а зачем? что? как? не понятно...

[Сергей delphinpro]

Dmitry,

не лучше ли использовать $.load()

Поймите, что вы не обойдетесь одно лишь строчкой load()
Вам нужно будет писать обвязку, следить за слушателями событий и много чего еще.
Опять же – загружать будете что? Целую страницу, или отдельные части? Во втором случае на сервере нужны будут отдельные точки входа для получения этих частей. Своего рода АПИ.

Вы попробуйте расписать подробнее, как вы видите свой "фреймворк", попробуем обсудить =)
(Да-да, именно микрофреймворк и получится в итоге).

Answer 1

[Алексей Уколов]

почему не пишут легкий в реализации SPA без всяких фреймворках

Потому что "загрузить всю страницу в фоне, а не просто через стандартный браузерный механизм перехода по ссылке" - это ещё не SPA.

Comments

[Dmitry]

Разве главный концепт SPA это не загрузка отдельных частей сайта без надобности грузить всё остальное ?

[Dmitry]

Dmitry, Dmitry, И кстати, $.load() отлично с этим справляется, тогда почему его реализация не является SPA ?

[Алексей Уколов]

SPA подразумевает перенос логики на клиент. И именно для реализации этой логики и нужны фреймворки. А то, что для общения с сервером вы используете AJAX - это дело десятое.

[Алексей Уколов]

Как минимум $.load() потребует полной генерации всей страницы на стороне сервера, даже если вы потом вставите из неё только какой-то один блок.

[Sanes]

Алексей Уколов,

Как минимум $.load() потребует полной генерации всей страницы на стороне сервера, даже если вы потом вставите из неё только какой-то один блок.

не обязательно.

Answer 2

[Вячеслав Плиско]

Для простых страниц даже jquery не нужен. Есть нативный fetch(), который можно подпереть полифилом для старых браузеров.
Фреймворки же нужны для более сложной логики нежели асинхронная подгрузка и вставка в dom.

Answer 3

[Sanes]

Javascript не имеет доступа к фреймам. Через $.load() вы будете загружать именно фреймы.

Comments

[Carburn]

с чего фреймы?

[Sanes]

Carburn, с того, что вы в основную страницу вставляете блоки, как отдельные страницы. В терминологии Javascript это называется фреймы. Не путайте с HTML iframe

[Carburn]

Sanes, нет такого понятия в javascript, не выдумывай. есть только html <FRAME>

[Sanes]

Carburn, смысл вы поняли. Без танцев вы не получите прямой доступ к innerHTML.
Для этого и придумали реактивные фреймворки.

[Вячеслав Плиско]

Sanes, вы несете бред. Никаких фреймов там нет, innerHTML меняется элементрным присваиванием. Реактивный фреймворк это вовсе про другие цели, про изменения состояния стейта.

[Sanes]

Вячеслав Плиско, покажите простой способ добраться до элементов загруженных через ajax и вставленных с помощью innerHTML. Я в своё время не нашел.

[Вячеслав Плиско]

Sanes, Вот пожалуйста, получил данные, вставил их в документ, вывел алертом содержимое тега подтянутого асинхронно. https://jsfiddle.net/2d4mcbo6/

[Sanes]

Вячеслав Плиско, сайт недоступен.

[Carburn]

Sanes, vpn включи

[Sanes]

Carburn, не хочу

[Вячеслав Плиско]

Sanes, молодец. будешь большой нехочухой. Но раз ленитесь учиться сами, то хотя бы не несите бред в комментариях в чужих комментариях.

[Sanes]

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

[Вячеслав Плиско]

А там код выполняется и можно проверить результат.

[Carburn]

Sanes, https://jsbin.com/vekoqahipi/edit?html,js,output