3

Во мне накопилось немного информации о возможных способах шаблонизации, но я так и не сумел найти ничего, где понятно объяснялось бы что и в каких случаях лучше использовать. Поэтому я решил выписать немного плюсов и минусов каждого типа так, как я их понимаю, и обсудить их с вами... потому что обсудить это мне с кем-нибудь нужно :)

1. Клиентская шаблонизация с json rest api

Достаем из базы данные => отдаем их на клиент в json/xml => разбираем данные на клиенте, создавая объекты по клиентским моделям => добавляем каждую полученную модель в DOM.

плюсы:

  • пользователь ждет только нужные ему данные
  • в процессе загрузки данных можем показать красивый прелоадер

минусы:

  • дублируем модели
  • лишний раз напрягаем клиентский браузер шаблонизацией

2. Тоже rest api, только шаблонизация, в целом, серверная

Достаем из базы данные => создаем из них html код => отдаем на клиент html => на клиенте просто пихаем полученный html в DOM не думая.
Этот способ мне кажется самым практичным, но о нем почему-то практически не пишут. Я просто что-то не то читаю, или есть серьезные недостатки, которых я просто не вижу?

плюсы:

  • первых два из пункта выше
  • не дублируем модели

минусы:

  • выглядит так, будто их нет

3. Классическая серверная шаблонизация... только сервер

Выбираем данные из базы => на сервере это все дело делаем в html, но не кусочек страницы, а всю страницу целиком => отдаем на клиент заново всю страницу.

плюсы:

  • не дублируем модели

минусы:

  • перерисовываем все то, что у пользователя уже было и все вытекающие по типу отсутствия прелоадеров, пустой белой страницы и так далее

Вопросы

  1. Какие еще есть вариации?
  2. Кто что использует в своих проектах (личных, рабочих, как делают крупные компании...)?
  3. Почему?
  4. Какие плюсы и минусы я пропустил/не понял?
  5. В каком случае что использовать лучше?
10
  • Близкое к пункту 2 можно погуглить по словам pjax и turbolinks, я такое на своих сайтах активно юзаю (пункт 1 считаю ересью, а пункт 3 слишком тормознутым, но это лишь моё личное мнение)
    – andreymal
    4 сен 2016 в 22:50
  • @andreymal скажите, почему первый пункт вы считаете ересью? Вы против angularjs, ember, knokout? На счет 2 способа - минус: сложно делать переиспользуемые компоненты. 5 сен 2016 в 4:52
  • @Stepan да, против :) А что мешает переиспользовать компоненты на сервере?
    – andreymal
    5 сен 2016 в 7:14
  • @andreymal а что если не использовать turbolinks, а сразу разрабатывать приложение так, чтобы сервер отдавал куски html, а какой-нибудь backbone.js отлавливал нажатия по ссылкам, менял заголовки/url страницы и вставлял полученный html в нужное место?
    – fobedep
    5 сен 2016 в 8:09
  • Всплывёт куча неприятных мелочей вроде браузерных кнопок Назад/Вперёд или проблем со скроллингом или с css или со скриптами для свежеподгруженных данных (впрочем, в любом случае всплывёт, но с pjax вроде чуть легче)
    – andreymal
    5 сен 2016 в 8:20

2 ответа 2

3

Кто что использует в своих проектах (личных, рабочих, как делают крупные компании...)?

Крупная компания, более 20 разработчиков на проекте бывает.

Либо полный server-side, либо полностью client-side, смешивание только в очень специфичных случаях (возможно бывают такие, сам не встречал).

Server-side для проектов, где можно обеспечить full-stack разработчиков, чтобы и сверстать по мелочи, и скрипт на JS написать и запрос к базе сформировать смогли и т.д. Мобильные приложения не требуются, предоставления API для третьих лиц тоже. Чаще всего проекты, где веб-интерфейс минимален перспектив развития интерфейса нет.

Client-side если команда большая, разделить можно на фронтэндщиков, бекендщиков, мобильщиков. Минусы - расходы на поддержку линии API. Чаще всего такой подход применяем, причем API first (у нас RAML).

Была пара проектов в практике, где ответственность за отображение поделили между сервером и клиентом, очень неприятные впечатления: постоянные вопросы о том, кто за что должен отвечать, вопросы согласованности (например динамически формируемая форма на клиенте и ее перезаполнение в случае ошибочного сабмита). Требования к разработчикам очень высокие, нужно знать и client-side и server-side технологии.

2

Во втором случае на самом деле есть куча минусов (кстати, слова "REST API" к нему неприменимы - потому что это не REST и не API).

  • во-первых, возможности разметки в таком режиме получаются "обрезанными" - в частности, многие способы вставки HTML-кода в документ не запускают скрипты;

  • во-вторых, страница, изготовленная из кучи надерганных кусков обычно является кошмаром верстальщика - совершенно не понятно в каком вообще файле надо искать нужный кусок верстки;

  • в-третьих, постоянное дерганье innerHTML негативно сказывается на производительности;

  • в-четвертых, такое решение обычно требует больше трафика чем оба альтернативных.

Из плюсов же у него - поддержка большинством серверных фреймворков.


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

Дублирование моделей тоже не является особенностью первого варианта - зачастую клиентская модель, серверная модель и модель передачи являются совершенно разными - и это совершенно нормально. Фактически, при переходе от тертьего варианта к первому модель не дублируется, а разделяется на две.

2
  • Первый пункт легко поправим, второй пункт решается грамотной организацией шаблонов (у меня за четыре года юзания второго способа проблем не возникло), третье за те же четыре года ни разу не наблюдал, четвёртое неправда и небольшая экономия трафика в сравнении с третьим способом таки есть
    – andreymal
    5 сен 2016 в 10:39
  • @andreymal в своем проекте проблем и правда не возникает. А вот когда в проект приглашают отдельного верстальщика, чтобы разгрузить основного разработчика - начинается веселье :) 5 сен 2016 в 10:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.