Вход • Регистрация

Поддержка шаблонизатора Twig

  •
  • 22 марта 2017 г. , редакция: 22 марта 2017 г.
  • Очень давно занимаюсь созданием шаблонов под diafan.CMS, поэтому решил отдохнуть от PHP и окунутся в мир JS front-end разработки.
    Ознакомившись с текущими трендами, поработав с Webpack, Gulp и Vue.js теперь не представляю как жил до этого раньше :)

    Но пора было вернуться в 2007 (сентябрь горит) и продолжать кодить шаблоны на PHP и первое с чем я не смог смерится - как же муторно закрывать все эти кавычки и расставлять точки.

    на Vue.js
    Код
    <a :href="row.link">{{ row.name }}</a>

    на PHP
    Код
    echo '<a href="'.$row['link'].'">'.$row['name'].'</a>';

    Вывод напрашивается сам собой использовать шаблонизатор. Загуглив "most popular php template engine" выбор пал на Twig, потому что он развивается и поддерживается сообществом разработчиков Symfony.

    Первое, что я сделал это внедрил шаблонизатор прямо в CMS https://github.com/diafan/twig-plugin
    Всё работает все хорошо, но подумалось о быстродействии данного решения, посмотрев файлы которые генерирует Twig как-то они мне не понравились
    Код
    // line 4
    $context['_parent'] = $context;
    $context['_seq'] = twig_ensure_traversable((isset($context["rows"]) ? $context["rows"] : null));
    foreach ($context['_seq'] as $context["_key"] => $context["row"]) {
    // line 5
    echo "\t\t<a href=\"";
    echo twig_escape_filter($this->env, (twig_constant("BASE_PATH_HREF") . $this->getAttribute($context["row"], "link", array())), "html", null, true);
    echo "\" class=\"item\">

    При создании шаблонов я использую SASS (препроцессор CSS) и собираю его в Gulp, так почему бы не создать препроцессор Twig => PHP в виде плагина для Gulp?
    Пошерстив npm были найдены готовые решения, но они просто прогоняли шаблоны через Twig и на выходе мы получали теже скомпилированые страшные файлы, причем для этого создавались отдельные системные потоки PHP в общем жуть.

    Было принято решение писать плагин самостоятельно на родном для Gulp языке, за ночь родился этот монстр https://www.npmjs.com/package/gulp-twig2php
    Здесь https://diafan.github.io/gulp-twig2php/ в режиме онлайн вы можете поиграться с трансляцией шаблонов в PHP :)

    Плагин сыроват и сейчас обходит боевую обкатку на реальных проектах, так что при багах пишите Issue и не забывайте обновляться `npm update`.
  • 22 марта 2017 г.
  • Блин... Сколько прогеров сколько дизигнеров - у всех свое мнение....

    Но только я не могу понять: В чём отличие - ну копия же PHP?
    - Смысл мозги пудрить и тратить время на изучение а потом рыццо в голове и отделять ПХП от ТВИГ?
    •
    • 22 марта 2017 г.
    • Код
      <a :href="row.link">{{ row.name }}</a>

      по мне красивее... ПХП
      Код
      <a href="<?=$row.link?>"><?=$row.name ?></a>

      или
      Код
      echo '<a href="'.$row.link.'">'.$row.name.'></a>';
    •
    • 22 марта 2017 г.
    • В Twig нельзя но в Vue.js можно делать вот так
      Код
      <div v-if="date" class="date">{{ date }}</div>

      на PHP
      Код
      if(!empty($row['date'])) { echo '<span class="date">'.$row['date'].'</span>'; }

      С шаблоном код пишется легче, он остается валидным "HTML" разметкой, а не лапшой из echo => легче ориентироваться, меньше писать текста (это радует особенно когда это ежедневная рутина) трудней забыть какой-нибудь закрывающий тег, редакторы могут автоматически отформатировать разметку, легче внести изменения в верстку.

      Вы ещё скажите что в своей работе не используете автодополнение кода, сниппеты и автоматическое форматирование ) К хорошему привыкаешь быстро и потом без него уже не можешь )
      •
      • 22 марта 2017 г.
      • Ну может я уже стар и в большей мере я всегда был консерватором.
        - ХЗ...
      •
      • 22 марта 2017 г.
      • пока плюсы не понятны, видимо надо самому попробовать пощупать
        •
        • 23 марта 2017 г. , редакция: 23 марта 2017 г.
        • Ну плюсы приблизительно те же, что и у Jquery по сравнению с чистым JS. Для восприятия проще, написано более прозрачно, в комплекте куча предустановленных функций. Писать в разы быстрее. Можно даже копипастой неплохие вещи реализовывать.

          Из минусов - нужно освоить синтаксис и правила библиотеки, которая по сути делает то же, что и JS, быть в зависимости от этой библиотеки и т.п.. Я, например, небольшие вещи на чистом JS реализую по этим причинам. Срабатывает мгновенно, без задержек и т.п..

          Всё должно быть оправдано.
  • 23 марта 2017 г. , редакция: 23 марта 2017 г.
  • Насколько это всё притормозит загрузку? Или я возможно не понял суть технологии.
    Месяца 4 назад ходил на защиту дипломов местного крутого центра обучения, крутых IT специалистов. Один спец меня поразил, занимался он разработкой собственного фреймворка для визуализации проекта и сопряжённых частей для придания общего стиля всех поделок компании, а вот чувак который рассказывал как он делает сайты для компании на Вордпрес используя Бутстряп, Бовер, Галп что то ещё. Я подумал на тот момент: "Пипец большая полезная часть этого всего уже есть по умолчанию в Diafan и причём давно. Какие нахрен 12 секунд для загрузки первой страницы ты сума сошёл? Это же просто блогового плана сайты, что там может тормозить? Ну-ну, утешай себя дальше, что следующие переходы и загрузки происходят почти без задержек."
    Так что оказывается я очень заблуждался?
    Если короче - производительность не будет страдать и не придётся жертвовать чем либо, то я за любой прогресс в лучшую сторону.
    •
    • 24 марта 2017 г. , редакция: 24 марта 2017 г.
    • Этот ответ так же посвящается Любимову Павелу. Плагин для Gulp работает на локальной машине, на локальной машине Вы пишете шаблон - он на локальной машине транслируется в нативный PHP и этот нативный PHP попадает на FTP. Нам не нужно быть зависимым от библиотеки, потому что мы получаем на выходе чистый код :) Вот тут инструкции по установке и пример настройки https://github.com/Garik-/gulp-twig2php

      Из мира JS могу привести пример библиотека Babel ты пишешь код по современным стандартам она транслирует его в поддерживаемый большинству обозревателей стандарт. На сервере для всех, на локалке круто с синтаксическим сахаром и новыми плюшками для тебя :)

      Сейчас вот например делал второй уровень в шаблоне меню - играться онлайн можно здесь https://diafan.github.io/gulp-twig2php/
      Код
      {% if row.children %}
      <ul class="aside__list__popup">
      {% for popup in result.rows[row.id] %}
      <li class="aside__list__popup--item"><a href="{{ popup.link }}">{{ popup.name }}</a></li>
      {% endfor %}
      </ul>
      {% endif %}

      пишется быстро, верстку сразу видно, можно использовать автоформатирование. на выходе имеем код с кучей точек $ и закорючек :)
      Код
      if($row['children']) {
      echo '<ul class="aside__list__popup">';
      foreach ($result['rows'][$row['id']] as $popup) {
      echo '<li class="aside__list__popup--item"><a href="' . $popup['link'] . '">' . $popup['name'] . '</a></li>' ;
      }
      echo '</ul>';
      }

      ^ c отступами это смотрится красивей, форум съедает...

      Идея была в общем такая ) Надо обкатывать на реальных проектах ) Пока всё очень сыровато )
      •
      • 24 марта 2017 г. , редакция: 24 марта 2017 г.
      • На Vue.js это бы смотрелось ещё красивей
        Код
        <ul v-if="row.children" class="aside__list__popup">
        <li class="aside__list__popup--item" v-for="popup in result.rows[row.id]"><a :href="popup.link">{{ popup.name }}</a></li>
        </ul>

        Но это разные технологии, шаблонизаторы работают с текстом используя лексические анализаторы, а Vue.js с DOM деревом непосредственно в обозревателе, ему легче. Хотя... http://php.net/manual/ru/book.dom.php, https://github.com/vuejs/vue/tree/dev/src/compiler/parser но это уже совсем другая история :)
      • 24 марта 2017 г. , редакция: 24 марта 2017 г.
      • [ПЕРЕНЁС]
        •
        • 24 марта 2017 г.
        • Это надо в предложения писать, я лишь генерирую гениальные идеи ) Очередная бессонная ночь https://github.com/Garik-/gulp-vue2php и мы выяснили что Open Source это очень хорошо. Оказалось что Vue.js использует собственный парсер, который удалось "прикрутить", остается написать логику :)
      •
      • 24 марта 2017 г.
      • Аха это подобие sass для css которым пользуюсь. Но я думаю что у нас это не приживётся - в конторе у программистов очень разное виденье и каждый стоит на своём все фулстек и разделения не произошло ди сих пор. Я использую sass для создания проекта - далее проект поддерживается без него. Потому что другой программист использует less. Мне лес вообще не нравится он очень сильно минималистичен и большие структуры очень плохо понять что во что вложено.
        Ну как-то так. Сахар хорош в прикуску :)
        •
        • 24 марта 2017 г.
        • Ну лично я люблю стандарты, придерживаясь стандартов проще поддерживать большой проект в котором принимает участие не один человек. Например мне очень нравятся миксины из bootstrap отвечающие за адаптивность https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints - по коду сразу видно какие стили к какому разрешению относятся и нет всяких извратов типа 438px 342px которые бывают придумывают верстальщики непонятно зачем и для каких устройств.
          В том же Google вообще придумали свой язык Go что бы программисты не писали всякую отсебятину :)
          •
          • 24 марта 2017 г.
          • Ну верстальщики лепят 438px и иже с ними в виду того что дизайнер на глазок нарисовал. И чтобы в итоге чтобы более похоже это всё выглядело режут по линейке.
            Согласен я тоже не люблю такие штуки всё должно быть с нуликами или пятёрочками как минимум. Со всех сторон ровно и часто приходится отстаивать такую точку зрения.

Новости

  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля, среда
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
  • Новость. Сборка. Тарифы
  • 15 декабря 2023 г.
  • Подводим итоги 2023 года. Выпустили новую сборку DIAFAN.CMS 7.1.1, вводим новые тарифы на аренду сайта и коммерческую поддержку и автообновления с января 2024 г., строим планы на будущий год.
Все новости