Здрасте!
Поговорим про самое спорное телодвижение компании Битрикс, а именно технология «Композитный сайт».
Спорное оно потому, что ребята запатентовали технологию, которая по моему мнению, не тянет даже на курсовую 3 курса профильной специальности.
Ну да ладно, это ж маркетологи.
В статье рассмотрены:
- сама технология «Композитный сайт»
- альтернатива данной технологии «CompoJax» (через ДЖ)
- примеры кода, для той и другой технологии
INTRO
Честно, не понимаю какой был смысл патентовать технологию на 1-2 сотни строк кода, да к тому же и совсем не инновационную, это правда уже вопросы к «патентному бюро», так что по фиг.
Погнали!
Технология композитный сайт
Громко конечно называть это технологией, но все же пусть будет так.
Что же это такое?
Цитата с сайта Битрикс:
Уникальная технология производства сайтов объединяет в себе высокую скорость загрузки статического сайта и все возможности динамического сайта.
Пользователь мгновенно получает контент страницы.
Обещают даже ускорение в 100 раз, правда бенчмарки не предоставили.
Ну это опять вопрос к маркетологам, а это, честно, не по моей части.
Алгоритм работы следующий:
То, что выделено красным, выполняется параллельно.
Пояснять не буду, тут все понятно.
Пример использования
/* * включение в компоненте и в шаблоне */ $component->setFrameMode(true); $template->setFrameMode(true); /* * динамический фрейм */ $frameBuffer = new Bitrix\Main\Page\FrameBuffered("id_container_buffer"); $frameBuffer->begin("сообщение, которое будет выведено вместо контента"); echo "динамические данные"; $frameBuffer->beginStub(); echo "статические данные"; $frameBuffer->end(); /* * статический фрейм */ $frame = new \Bitrix\Main\Page\FrameStatic("id_container_static"); $frame->setStub("сообщение, которое будет выведено вместо контента"); $frame->startDynamicArea(); echo "динамические и статические данные"; $frame->finishDynamicArea(); |
Код снят с документации и подглядками в исходники.
Сильно не углублялся, да это мне и не нужно, есть же CompoJax))).
Запускать в компонентах не пробовал, скажу лишь, что на страницах и шаблоне сайта он не завелся.
Кому интересно может почитать документацию, но на самом деле не советую, т.к. после 9-ти страничного теоретического петтинга, вы увидите почти те же самые строчки кода.
CompoJax
Собственно, «технология» делающая практически тоже самое, только без пафоса, патента, проще, прозрачнее + PJAX.
Разделить технологию можно на 2 части:
- Композит
- PJAX
Для второй составляющей, необходимо наличие библиотек
Алгоритм работы следующий:
Собственно, вот и все.
Алгоритмически «технологии» не одинаковы, так что нарушения патента, в принципе, нет.
В патент не углублялся, но если придет повестка в суд сделаю в статье update
Ниже представлены все возможности CompoJax, параметры PJAX и способы его кастомизации.
Данный код можно использовать везде, в компонентах, шаблонах, своих классах, неважно.
Пример использования
use Jugger\Context\CompoJax; /* * простой вызов, без параметров */ if (CompoJax::begin("id_container")) { // ...content... CompoJax::end(); } /* * указываем картинку лоадер */ $params = [ "loading" => "http://dev.1c-bitrix.ru/community/webdev/%3Ca%20href=%22http://loader.gif%22%3Ehttp://loader.gif%3C/a%3E", ]; if (CompoJax::begin("id_container", $params)) { // ...content... CompoJax::end(); } /* * указываем URL к которому делается запрос на вывод данных * таким образом Вы сможете динамически подгружать данные откуда угодно */ $params = [ "url" => "/api/methodName?param1=...", ]; CompoJax::begin("id_out_container", $params); /* * можно перегрузить логику обработки ответа */ $js = <<<JS function(xhr, params) { // xhr - объект XMLHttpRequest // params - объект содержащий параметры блока: id - индектификатор контейнера, url - адрес на который отправлялся запрос if (xhr.status == 200) { document.getElementById(params.id).innerHTML = xhr.responseText; } else { // обработка ошибки } }; JS; $params = [ "callback" => $js, ]; if (CompoJax::begin("id_container", $params)) { // ...content... CompoJax::end(); } /* * для работы с PJAX необходимо добавить соответствующий пункт в параметрах, * структура представлена на примере ниже, * добавлять можно несколько вариантов привязки */ $params = [ "pjax" => [ // по умолчанию контейнер самого compoJax блока // "container" => "#id_container" [ "selector" => "a", // обязательный параметр ], [ "selector" => "form#pjax-form", "container" => "#pjax-form-contaner", // параметры самого PJAX (подробнее: [URL=https://github.com/defunkt/jquery-pjax#pjax-options]https://github.com/defunkt/jquery-pjax#pjax-options[/URL] ) "options" => [ "push" => false, "scrollTop" => false, ], ], // правило ниже не примениться, т.к. не указан 'selector' [ "container" => ".fail-container" ] ], ]; if (CompoJax::begin("id_container", $params)) { // ...content... CompoJax::end(); } |
CompoJax включен в либу Juggernaut, однако, вы можете скачать его отдельно (всего 1 класс), ссылки ниже.
Ну вот и все
В принципе, все готово, все круто, все работает.
Осталось только добавить кеширование и вообще будет замечательно.
Это будет добавлено в скором времени, возможно.
Juggernaut:
CompoJax:
Данный технология работает на сайте