{latte}

02/2016 / Milan "perún" Herda / @moriquend / hrad.perunhq.org

O čom budeme hovoriť

  • Čo je latte
  • Inštalácia a základné použitie
  • Typy makier
  • Nevýhody oproti Twigu
  • Výhody oproti Twigu
  • Killer feature

latte je šablónový systém

  • určený pre PHP
  • rýchly (kompiluje šablóny do php súborov)
  • bezpečný proti XSS (context-aware escapovanie)
  • html-aware
  • vznikol v rámci Nette frameworku

Inštalácia


composer require latte/latte

Použitie


$latte = new Latte\Engine;
$latte->setTempDirectory('/latte/cache/dir');

$latte->render(
    'templates/example.latte',
    [
        'user'  => $user,
        'items' => $items,
    ]
);

Pozor: Metóda render zapisuje (echo) priamo na výstup!

Použitie 2


$latte = new Latte\Engine;
$latte->setTempDirectory('/latte/cache/dir');

$output = $latte->renderToString(
    'templates/example.latte',
    [
        'user'  => $user,
        'items' => $items,
    ]
);

echo $output;

Je lepšie si pre vytváranie inštancií Latte\Engine vytvoriť vlastnú Factory, do ktorej potom môžeme registrovať vlastné filtre a makrá.

Ako vyzerá šablóna?


{if count($users)}
    <ul>
        {foreach $users as $user}
            <li n:class="$iterator->last ? last">
                {$user->getName()|capitalize}
            </li>
        {/foreach}
    </ul>
{/if}

Ako vyzerá šablóna? 2


<ul n:if="count($users)">
    <li n:foreach="$users as $user" n:class="$iterator->last ? last">
        {$user->getName()|capitalize}
    </li>
</ul>

Tá istá šablóna cez twig


{% if users|length %}
    <ul>
        {% for user in users %}
            <li class="{% if loop.last %}last{% endif %}">
                {{ user.name|upper }}
            </li>
        {% endfor %}
    </ul>
{% endif %}

Typy makier

  • makrá
  • n:makrá

Makrá

  • Obaľujú sa do krútených zátvoriek: {}
  • Sú párové aj nepárové

Príklady makier

{$foo}vypíše premennú a escapuje
{$foo|noescape}vypíše premennú a nescapuje
{var $foo = 'bar'}vytvorí premennú
{capture $foo}...{/capture}vytvorí premennú z obsahu vo vnútri hraníc makra

Príklady makier

{if podmienka}...{elseif}...{else}..{/if}podmienky
{foreach $items as $item}
   ...
{/foreach} 		foreach cyklus
{continueIf podmienka}continue
{breakIf podmienka}break
{sep}...{/sep}separátor položiek v cykle

Príklady makier

{include 'foo.latte'}vloží inú šablónu
{cache $key}...{/cache}nacachuje časť stránky (pre http cache)
{_"text"}preklad reťazov
{block}...{/block}definovanie bloku
{layout 'layout.latte'}určenie šablóny s layoutom
{dump $foo}dump premennej do Tracy

n:makrá

  • sú súčasťou html tagu!
  • uvodzujú sa n:
  • existujú dva druhy
    • obyčajné
    • každé párové makro je možné zapísať ako n:makro

Príklady n:makier

n:class priradí tagu triedu, pokiaľ je splnená podmienka
n:attr podobne ak n:class, ale pre hocijaký atribút
n:tag-if vypíše tag, iba pokiaľ je splnená podmienka
n:foreach cyklus
n:block nadefinovanie obsahu tagu ako bloku

Príklady n:makier

Pokiaľ n:makru dáme prefix inner-, tak sa makro aplikuje iba na obsah tagu


<ul n:inner-foreach="$users as $user">
    <li>
        {user->getName()}
    </li>
</ul>

Ukážka n:tag-if


<li><a href="{$url}" n:tag-if="{$url}">Správy</a></li>

Výsledok bude závisieť od obsahu $url 


<li>Správy</li>
<li><a href="/spravy">Správy</li>

Nevýhody oproti twigu

  • Nemá globálne parametre pre všetky šablóny (ale dá sa jednoducho urobiť vlastná implementácia)
  • dokumentácia obsahuje aj niektoré veci špecifické pre Nette
  • po 20 minútach rozmýšľania som uznal, že iná nevýhoda asi nie je

Výhody oproti twigu

  • menej ukecané
  • nesnaží sa o vytvorenie nového jazyka z vlastými pravidlami, syntaxou a operátormi
  • čo funguje v php, funguje aj vo vnútri makra
  • n:makrá sú niekedy na nezaplatenie
  • pekný html výstup

Absolútna killer feature:

Context-aware escaping

Na XSS môžete zabudnúť

Cvičenie v twigu

Ochráňte kód pred XSS


<style>
h1:after {
    content: '{{ title }}';
}
</style>
<button onclick="alert(&quot;{{ title }}&quot;)">
    {{ title }}
</button>

<script>var name = {{ title }};</script>

Cvičenie v twigu - riešenie

Ochráňte kód pred XSS


<style>
h1:after {
    content: '{{ title|e('css') }}';
}
</style>
<button onclick="alert(&quot;{{ title|e('html_attr') }}&quot;)">
    {{ title }}
</button>

<script>var name = {{ title|e('js') }};</script>

Riešenie v latte


<style>
h1:after {
    content: {$title};
}
</style>
<button onclick="alert({$title})">
    {$title}
</button>

<script>var name = {$title};</script>

latte samo automaticky oescapuje premenné pre každý kontext

Ďalšie štúdium

Ďakujem za pozornosť