json вместо html

Question

[excalibur]

Есть страница пользователя, т.е. стена пользователя (как на вконтакте или фейсбуке). С помощью «infinite scrolling» подгружаются разный тип контента, т.е. комментарий, запись на стене, список фото и т.д. Самый простой способ — это возвращать html, но хотелось бы все таки работать с json, сами понимаете почему.

Новости, список фото, обычные записи — это компоненты, а стена — это «user activity stream». В php компоненты общаются между собой с помощью внутреннего API. А вот как научить общаться компоненты на стороне клиента — пока неясно.

Помогите советом, как лучше всего спроектировать подобный функционал на стороне клиента, чтобы можно было использовать json для рендеринга вместо html, принимая во внимание то, что компоненты должны существовать автономно, т.е. никакого хардкода в компоненте «стена» не должно быть. Т.е. в компоненте «стена» не дожно быть чего-то подобного:

if(component == 'news'){
 //отобразить новость
} elseif(component == 'comment'){
//отобразить комментарий
}

Answer 1

[dshvechikov]

есть разного рода javascript шаблонизаторы, думаю вам стоит смотреть в эту сторону. К примеру, handlebarsjs.com/

Comments

[excalibur]

Шаблонизаторы — это чуть не то. Наверное я не совсем точно выссказался. Меня больше интересует то, как можно получить указания для рендеринга записи для компоненты «стена». Т.е. получаю json, в котором указано, что нам пришел список фото и эти фото нужно отобразить как-то, т.е. нужно сформировать html, но за каким принципом — пока не понятно.

[excalibur]

Т.е. указания по рендерингу этих фото, какой css-клас нужно к ним цеплять, в какие теги обернуть — нужно узнать в компонеты «фото». А как узнать — не ясно.

[gigigi]

А что мешает завести отдельный шаблон для каждого типа записей (их ведь не много) и рендерить для каждого поста нужный?
Что плохого в if\else если у вас различия по типам?

[excalibur]

Плохого ничего нету. Только некрасиво будет, и не совсем правильно с точки зрения проектирования.

[dshvechikov]

Приходит json, где есть данные и название шаблона. Логика отрисовки, все if'ы и прочее находится в шаблоне. По моему это самый лаконичный и читабельный вариант

[excalibur]

Да, согласен! Как лучше тогда сделать: подключить к странице все возможные шаблоны и джаваскрипты или подгружать все динамически каким-то образом?

[dshvechikov]

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

[excalibur]

Вот и я о том же. Хорошо, спасибо!

Answer 2

[1x1]

Можно подгружать нужные компоненты, вроде такой схемы:

var callback=function() {
    known_components[component_id](data);
}
if (!known_components[component_id]) {
    load_component_js_from_server(component_id, callback)
} else {
    callback();
}

Comments

[excalibur]

Это уже теплее к ответу на мой вопрос! А чуть подробнее о функции load_component_js_from_server() можете? Т.е. как получать json из сервера — это не составляет сложности, а вот джаваскрипт-функции — это уже более экзотично…

[egorinsk]

Это плохая идея, если у вас 30 компонент, у вас будет 30 запросов к серверу ( = вечность). Будет ощущение, что сайт тормозной. Загружать выгоднее всего одним запросом. Если уж на то пошло, шаблонов для сущностей у топикстартера вряд ли будет больше 10 и логичнее всего их сразу включить в код страницы, чтобы не тратить время на пинг-понг с сервером.

Правильный способ вы можете, увидеть, например, вконтакте. Там когда надо отобразить какой-то диалог с сервера, одним запросом подгружается сам диалог, и JS-код, управляющий им, и все остальное.

[egorinsk]

> а вот джаваскрипт-функции — это уже более экзотично…

Это как раз простая часть, можно либо делать eval() послу загрузки скрипта, либо делать var script = document.createElement('script'); script.src = ''; document.body.appendChild(); и так далее.

[1x1]

Оптимизация при множестве компонентов — отдельный разговор, вариантов тут хватает, у всех есть плюсы и минусы. Вариант «в лоб» — самый простой и (учитывая кэширование и прелоад часто используемых компонентов) вполне жизнеспособный.

Отправка js каждый раз оправдана для диалогов, но не для компонентов; неоправданно увеличивается объём каждого ответа.

Answer 3

[Виктор Виктор]

Можно получить пример json, чтобы лучше понять ситуацию?

Comments

[excalibur]

В php примерно вот такой массив:

$toJson = array(
'component' => 'news',
'data' => array(
'title' => 'Это заголовок новости',
'description' => 'А это описание новости или краткое описание новости, пока еще не решил. Т.е. может приходить краткое описание, а потом будет ссылка "Подробнее", которая развернет полное описание.'
)
);

[Виктор Виктор]

Думаю, все же icanhazjs подойдет, использовать component как id шаблона и всё

[excalibur]

У меня свой примитивный шаблонизатор, без конструкций, а только с заменой переменных. Я понял Вашу позицию. Вы предлагаете подгружать на страницу все возможные шаблоны компонент и джаваскрипт, который относится к ним (например обработка событий нажатий на изображения для их увеличения) и т.д. Можно что-то придумать, чтобы код страницы не был очень избыточным?

[Виктор Виктор]

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

ich.addTemplate(name, mustacheTemplateString);

при этом mustacheTemplateString будет всё тем же HTMLом
Ну и проверять недостающие скрипты и подгружать их

[excalibur]

Вам огромный плюс за последний комментарий! А как динамически подгружать нужные скрипты (я так или иначе поищу в гугле)?

[Виктор Виктор]

   function loadOurScript(source){
    var head = document.getElementsByTagName("head")[0];
    script=document.createElement('script');
    script.id='formPrinter';
    script.type='text/javascript';
    script.src=source;
    head.appendChild(script);
   }

или используя jQuery

[excalibur]

А если подгружать шаблон без ich? По сути, достаточно будет взять ответ из сервера в виде html?

[Виктор Виктор]

Тогда можно создать объект, у которого имена свойств будут совпадать с типами компонентов, а сами свойства содержать нужный шаблон для вашего шаблонизатора. И по ходу дела расширять объект новыми свойствами, подгружая их аяксом. В этом же объекте можно хранить и методы для соответствующих компонентов.
Если я ничего не путаю, конечно, то можно будет обойтись только вашим шаблонизатором

Answer 4

[asm0dey]

А может генерировать на сервере HTML а потом конвертировать его в json?

Comments

[excalibur]

Как-то не задумывался над этим… Пока такой вариант кажется мне неподходящим.

[gigigi]

Генерировать html, конвертировать его в json, чтобы потом из json получить html? А в чём смысл?

[asm0dey]

При правильном подходе трафик сожмется очень сильно — надо только выработать правила — вместо class писать c, например, вместо a href — ah, ну и так далее.
А если не думать про экономию трафика — то тогда во всей этой идее какой смысл вообще?

Answer 5

[Денис Пушкарев]

События, что сказать.
В транспорте, на получении json что-то в стиле:

app.trigger('load'+data.component,data)

В компонентах на это событие:

app.on('loadNews',function(data){/*парсим шаблон*/})

Comments

[excalibur]

"/*парсим шаблон*/" — а если шаблона еще нету на странице, как его подгрузить?

[Денис Пушкарев]

Require.js или чем подобным, но если приложение не сильно здоровое — лучше отдать сразу все в одном файле, минифицированное и gzip-ованное.

Answer 6

[Eternalko]

Попробуйте глянуть в сторону:
icanhazjs

Answer 7

[scrivener]

Мне кажется, самое время вам начать копать какой-нибудь javascript фреймворк. Типа Backbone, Knockout и др.

По шаблонизаторам — самый легкий и быстрый Dot.js