Как происходит организация связи клиент-сервер при использовани js-фреймворков?

Question

[Игорь]

Здравствуйте! Давно задаюсь вопросом - как происходит разработка one page приложения в реальном мире? У меня есть несколько идей по поводу проектов, хотелось бы потренироваться в backbone и laravel в связке, но не совсем понимаю как лучше организовать связь клиент - сервер.
Самый главный вопрос, который я постоянно себе задаю - каким образом рендерить виды? В моем понимании, мы создаем контроллер на роут, который просто напросто отдает json с данными для коллекций .
Хотелось бы услышать советы не только на этот счет, но и вообще про ваши техники подхода к таким проектам. Спасибо!

Answer 1

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

каким образом рендерить виды?

На стороне клиента, разумеется, в этом весь смысл SPA.

В моем понимании, мы создаем контроллер на роут, который просто напросто отдает json с данными для коллекций.

Помимо отображения данных ими еще нужно манипулировать. Начните с создания rest-api.

Comments

[Игорь]

То, что здесь идет речь о rest-api я понимаю, laravel в данном случае хорошо справляется с созданием rest для групп роутов. Я описал получение данных, и, конечно же, манипуляции происходят аналогично, при запросах. Мне интересно как работают известные сервисы в этом плане, допустим. trello, toggl и аналогичные..

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

Так и работают. Вы объясните толком, в чём ваш вопрос конкретно, потому что "советы не только на этот счет, но и вообще" на этом сервисе не дают, тут на конкретные вопросы отвечают.

[Игорь]

Алексей Уколов: мой вопрос в реальных практиках разработки one page сайтов. На что нужно обращать внимание и какие проблемы могут встретиться. Наверное, здесь этого не опишут, но может какие полезные статьи можно почитать скажете?

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

Не видел ни одной статьи "10 вещей, которые вы хотели спросить про разработку SPA, но боялись спросить" и сомневаюсь, что они существуют. Чем разработка SPA принципиально отличается от любой другой клиентской разработки?
Вы не прокрастинируйте, а возьмите и попробуйте что-нибудь сделать :) сразу и вопросы конкретные появятся.

[Игорь]

Алексей Уколов: Дело в том, что у меня патологическая боязнь сделать что-то не так как нужно, пытаюсь это побороть, но всегда думаю, что правильно делать не так.. Поэтому и ищу какие-то советы на все темы)

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

Дело в том, что в программировании нет такого понятия "правильно" и "как нужно". Например, у меня есть определенное понимание, какие решения лучше принимать в той или иной ситуации, но вам я свой опыт передать никак не смогу, только если несколько лет буду с вами парным программированием делать проекты и ни на минуту не замолкать. И никто не сможет. Это опыт, его нужно заработать трудом.

Answer 2

[Владимир Ио]

На данный момент связь чаще всего происходит через xmlHttpRequest.
Упомянутой вами trello работает на websocket.

Или вы имели ввиду концепцию реакций на изменения клиента/приход новых данных с сервера?
Тогда приложение требует двусторонней связанности(т.е. клиент дергает сервер и сервер клиент), то webSocket и ему подобные событийные модели. Либо обновление, основанное на таймерах и простом аяксе - но это оправдано в очень малом количестве ситуаций.

Если приложение не использует реакции клиента на изменение данных на сервере, то постоянное поддержание активного соединения вам не нужно, и в ход идет простой ajax. Получили ответ - обновили модель - сгенерировали запрос - получили ответ - и т.д по кругу.

Answer 3

[Александр Леонович]

В принципе Вы правы, сервер будет отдавать json-данные, в качестве исключения могут быть html-формы. На клиенте вам нужно будет отслеживать клики по ссылкам и тригерить бэкбоновские роуты, например:

$('a:not([data-default])').on('click', function(e) {
        e.preventDefault();

        // код упрощен для понимания, необходимо проверить, не находимся ли мы на текущем роуте
        // или существует ли вообще такой роут 
        router.navigate(link.pathname);
});

В роутере вы сможете создать модель и запросить данные с сервера, затем отрисовать вашу страницу. Рекомендую обратить внимание на библиотеку marionettejs.com/. Она добавляет пользные компоненты, например Marionette.Behavior, CompositeView, регионы, биндинг UI элементов, что поможет, если вам все-таки придётся передавать html.