Введення в JadePHP

За пропозицією автора цікавих і корисних для веб-розробника # 17 , пропоную свій переклад статті Introduction to JadePHP .
 
Існують десятки шаблонизатор. Серед найбільш відомих можна виділити Smarty , Twig (використовується в наступній версії Drupal), Blade (використовується за умовчанням в Laravel) і, звичайно ж, vanilla PHP. Якщо не говорити конкретно про PHP, то для eRuby / ERB і Haml для Ruby / Ruby on Rails і Javascript є ряд популярних варіантів, як наприклад Mustache , Handlebars , Hogan і EJS . У одних відмінності в синтаксисі незначні, в інших вони більш виражені.
 
Шаблонизатор Jade , який значно отлічяется від інших, зазвичай асоціюється з JavaScript додатками, наприклад він підтримується в Express для Node.js. У цій статті, я поговорю про Jade або, більш конкретно, про Jade зробленої для PHP — JadePHP .
 
 

Haml і Jade

Було б неправильно говорити про Jade, не згадавши Haml, який був надихає ідеєю для Jade. І справді, існують декілька бібліотек для підтримки Haml в PHP. Jade дотримується тієї ж філософії що і HAML, тобто створення «красивих» шаблонів і те що автори називають шаблонізаціі «хайку». Що б це не значило, у Haml і Jade є деякі однакові якості, які фундаментально відрізняють їх від більшості інших шаблонизатор.
 
 

У чому різниця?

Більшість шаблонизатор припускають написання кінцевої розмітки з «впровадженням» в неї placeholder'ов а й основний логіки. У Jade ж є не тільки placeholder'и і логіка, а й спосіб для скороченого написання XML подібних елементів. Загалом, це означає HTML, хоча ви можете використовувати це для RSS і власне XML.
 
По суті, якщо ви хочете, то ви можете використовувати Jade як скорочення для HTML без його «традиційних» шаблонізаторскіх можливостей.
 
 

Як використовувати репозиторій

На жаль, зараз код недоступний через Composer , хоча його неважко запакувати, якщо у когось знайдеться годину інший. Але ви можете його запустити, клонувати репозиторій і включивши
autoload.php.dist
(Github репозиторій включає
UniversalClassLoader
з Symphony).
 
Нижче, адаптованість приклад з README проекту. Передбачається, що репозиторій був поміщений в директорію
jade
.
 
 
use Everzet\Jade\Dumper\PHPDumper,
        Everzet\Jade\Visitor\AutotagsVisitor,
        Everzet\Jade\Filter\JavaScriptFilter,
        Everzet\Jade\Filter\CDATAFilter,
        Everzet\Jade\Filter\PHPFilter,
        Everzet\Jade\Filter\CSSFilter,
        Everzet\Jade\Parser,
        Everzet\Jade\Lexer\Lexer,
        Everzet\Jade\Jade;

$dumper = new PHPDumper();
$dumper->registerVisitor('tag', new AutotagsVisitor());
$dumper->registerFilter('javascript', new JavaScriptFilter());
$dumper->registerFilter('cdata', new CDATAFilter());
$dumper->registerFilter('php', new PHPFilter());
$dumper->registerFilter('style', new CSSFilter());

// Initialize parser & Jade
$parser = new Parser(new Lexer());
$jade   = new Jade($parser, $dumper);

$template = __DIR__ . '/template.jade';

// Parse a template (both string & file containers)
echo $jade->render($template);

Цей код скомпілює файл
tempalte.jade
і покаже його вміст.
 
То де це можна застосувати, залежить від вашого робочого процесу, наприклад, чи використовуєте ви framework і т.д. Наприклад, можна було б використовувати сервіс на зразок Watchman , Guard або Resource Watcher , щоб стежити за файлової системою і змінами в ваших Jade шаблонах, і компілювати їх в певний час у процесі розробки.
 
 

Простий приклад

Розглянемо простий приклад, який відобразить повну HTML сторінку з двома змінними, поки без логіки.
 
!!! 5
html(lang="en-us")

  meta(charset="utf-8")
  meta(http-equiv="X-UA-Compatible", content="IE=Edge;chrome=1")

  title(dir="ltr")= pageTitle

  meta(name="viewport", content="width=device-width, initial-scale=1.0")

  link(rel="stylesheet", media="screen", href="/css/styles.css")

  body
  header
  h1 My Jade Application
  div#content
  div.inner
      =$bodyContent

  script(data-main="js/main.js", src="js/libs/require.js")

 
Важливо: потрібно використовувати два пробілу для відступу. На даний момент це єдиний метод зрозумілий Jade PHP. Інакше виникнуть помилки або це буде некоректна розмітка.
Відразу стає очевидним, Jade досить відрізняється від звичного HTML. По-перше, у нього немає кутових дужок < > і закривають тегів. А також немає фігурних дужок, подвійних фігурних дужок або інших загальноприйнятих способів для позначення змінних в шаблонах. (Проте ви можете використовувати синтаксис з подвійними фігурними дужками. Але це не є частиною Jade).
 
Jade виглядає як дуже стислий метод для генеріраціі розмітки. Подивимося на підсумковий HTML:
 
<!DOCTYPE html>
<html lang="en-us">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
    <title dir="ltr"><?php echo pageTitle ?></title>
    <meta name="viewport" content="width=device-width" initial-scale="1.0" />
    <link rel="stylesheet" media="screen" href="/css/styles.css" />
    <body>
        <header>
            <h1>My Jade Application</h1>
        </header>
        <div id="content">
            <div class="inner">
                <?php echo $bodyContent ?>
            </div>
        </div>
        <script data-main="js/main.js" src="js/libs/require.js"></script>
    </body>
</html>

 
Пройдемося по всіх ключових рядках в шаблоні Jade, для того щоб зрозуміти, як працюють HTML скорочення.
 
 
!!! 5
— скорочення для HTML5 doctype. Це єдине місце, де ви побачите потрійний знак оклику в синтаксисі. Ви також можете іспользоивать
!!! xml
, щоб отримати
<?xml version="1.0" encoding="utf-8" ?>
. Для
transitional
, ви можете використовувати
!!! transitional
щоб отримати
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
. За замовчуванням
!!! default
дасть
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 
 
Примітка: в останній версії Jade, приправленою JavaScript, оголошення
!!! 5
було змінено на
doctype html
. Можливо, JadePHP послідує цьому прикладу, хоча напевно врядли, судячи з отсутсвии активності на Github.
HTML тег вказується по одному його імені, без необхідності його закриття. Наприклад:
 
body
  header

… Якби ви зупинилися на цьому, призвело б до наступного результату:
 
<body>
  <header></header>
</body>

Відмітьте, як структура документа представлена ​​з відступами.
 
Ви можете помістити вміст тега після його імені з пробілами:
 
 
h1 My Jade Application

… Стає
 
<h1>My Jade Application</h1>

Якщо ви хочете розбити великі блоки з вмістом на рядки, використовуйте символ вертикальної риси |:
 
p 
  | Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. 
  | Aenean eu leo quam. 
  | Pellentesque ornare sem lacinia quam venenatis vestibulum.

Це скомпіліруется в:
 
<p>Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

Ви можете використовувати формат схожий з CSS селекторами для додавання id і class атрибутів в HTML елементи:
 
div#content
  div.inner

… Призводить до:
 
<div id="content">
    <div class="inner">

Інші атрибути як src, href, lang, media, і т.д. можуть бути зазначені, використовуючи круглі дужки:
 
html(lang="en-us") === <html lang="en-us">
link(rel="stylesheet", media="screen", href="/css/styles.css") === <link rel="stylesheet" media="screen" href="/css/styles.css" />

Знак дорівнює використовується для підстановки змінних. Як видно вище, коли ви компілюєте Jade шаблон, він конвертує:
 
= $pageTitle

в наступне:
 
<?php echo $pageTitle ?>

 
 

Додаємо трохи логіки

Ви можете іспользоивать тире для умовної логіки. Ось конкретний приклад:
 
header
    h1= $pageTitle
    - if ($loggedIn):
    p.greeting Welcome back!
    - else:
    a(href="/login") Please login
    - endif;

Якщо скомпілювати цей шаблон, в результаті вийде наступне:
 
<header>
    <h1><?php echo $pageTitle ?></h1>
    <?php if ($loggedIn) ?>
    <p class="greeting">Welcome back!</p>
    <?php else ?>
    <a href="/login">Please login</a>
    <?php endif ?>
</header>

Для циклів код дуже схожий:
 
ul
  - foreach ($items as $item):
  li= $item

 
 

Фільтри

У JadePHP є можливість використовувати фільтри для обробки блоків тексту різними способами. Наприклад:
 
:php
    | $value = 10;
    | $computed_value += 100;
    | print $computed_value;

… Буде перетворений в:
 
<?php
    $value = 10;
    $computed_value += 100;
    print $computed_value;
?>

Ймовірно більш корисні фільтри будуть для JavaScript і CSS. Наприклад:
 
:style
| body {
|   background: yellow;
| }

… Буде перетворений в:
 
<style type="text/css">
body {
  background: yellow;
}

Встановлюються ці фільтри такий спосіб (дивися приклад з кодом вище для розуміння контексту цих оголошень):
 
$dumper->registerFilter('javascript', new JavaScriptFilter()); 
$dumper->registerFilter('php', new PHPFilter());
$dumper->registerFilter('style', new CSSFilter());

Перший аргумент — це текст, який ви розмічає у своєму шаблоні з додаванням двокрапки. Для прикладу вище ви можете використовувати
:javascript
,
:php
і
:style
відповідно.
 
Якщо включити
Everzet\Jade\Filter\FilterInterface
, то ви навіть можете визначати свої власні фільтри.
 
 

Навіщо використовувати Jade?

Суперечки про те які шаблонизатор використовувати, в кінцевому рахунку, досить марні. Ви можете зробити тести, для того щоб визначити які шаблонизатор є краще по продуктивності в різних умовах, а які більше підходять в певних середовищах, наприклад на клієнті або сервері. Але зрештою, вибір часто залежить від того що для вас комфортніше. У мене немає намірів підливати масла у вогонь, так само як і учавствовать в суперечках про кращому мовою програмирования.
 
Метод скорочення Jade не для всіх. Одні люди будуть стверджувати що його легше читати, а інші пристрасно з цим не погодяться. Але якщо ви вважаєте що це гідний метод, то це вже хороший привід його вибрати.
 
Інша причина, по якій ви можете вирішити використовувати Jade (до речі кажучи про кількість шаблонизатор) — це чергування між технологіями. Якщо ви часто перемикаєтеся між, скажімо, Node.js і PHP, то існує деяка логіка для підтримання сталості. Навіщо вивчати один інструмент, а потім використовувати щось зовсім інше, якщо він доступний для багатьох мов?
 
 

Резюме

У цій статті я розглянув JadePHP, портірованний шаблонизатор Jade, споконвічно орієнтований на JavaScript. Я дав вам кілька наводок на те, як його використовувати, і ідей про те, навіщо він вам може знадобиться. Спробуєте ви його, або він здається вам необгрунтовано стисненим? Напишіть що ви про нього думаєте в коментарях.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.