Flow/Architecture/PHP templating (old)

Update April 2014: We're developing the Flow/Epic Front-End using handlebars & lightncandy

This discusses templating in PHP, improving Flow's rendering templates.

A few options for templating output

The goal of these changes to is to make it easy to verify content has been properly escaped. Additionally we want to make it easier to write correct templates. Tertiary goal is to simplify the data passed between blocks and templating to the point where the same data can be json_encoded for templates built client side.

Implicit vs. Explicit

Escaping

For:

• When using explicit escaping its not obvious that a variable is being escaped, you have to trust the system.
• If an unescaped variable makes it into a template via helper or some such its not obvious.

Against:

• ->escaped() on every line
• method calls on an undefined variable is an exception rather than the notice
  • Combined with explicit variables $this->anything could generate a notice and return a blank string object

Variables

For:

• Having $foo and $bar variables just magically appear in the context is not 'natural'
• helper access as $this->something()->foo() matches variable access as $this->otherthing

Against:

• $this-> on every line
• Putting the variables inside $this doesn't achieve much

Examples

Explicit escaping, explicit variables

<div class="flow-topic-container flow-topic-full">
    <div class="flow-edit-title-form flow-element-container">
        <form method="POST" action="<?= $this->editTitleUrl->escaped() ?>">
            <?= $this->errors()->block( $this->block )->escaped() ?>
            <input type="hidden" name="wpEditToken" value="<?= $this->editToken->escaped() ?>">
            <input name="<?= $this->block->getName()->escaped() ?>[content]" value="<?= $this->content- >escaped> () ?>"
                   class="flow-edit-title-textbox mw-ui-input">
            <div class="flow-edit-title-controls">
                <input type="submit" class="mw-ui-button mw-ui-constructive"
                       value="<?= wfMessage( 'flow-edit-title-submit' )->escaped() ?>">
            </div>
        </form>
    </div>
</div>

Implicit escaping, explicit variables

<div class="flow-topic-container flow-topic-full">
    <div class="flow-edit-title-form flow-element-container">
        <form method="POST" action="<?= $this->editTitleUrl ?>">
            <?= $this->errors()->block( $this->block ) ?>
            <input type="hidden" name="wpEditToken" value="<?= $this->editToken ?>">
            <input name="<?= $this->block->getName() ?>[content]" value="<?= $this->content ?>"
                   class="flow-edit-title-textbox mw-ui-input">
            <div class="flow-edit-title-controls">
                <input type="submit" class="mw-ui-button mw-ui-constructive"
                       value="<?= wfMessage( 'flow-edit-title-submit' )->escaped() ?>">
            </div>
        </form>
    </div>
</div>

Explicit escaping, implicit variables

<div class="flow-topic-container flow-topic-full">
    <div class="flow-edit-title-form flow-element-container">
        <form method="POST" action="<?= $editTitleUrl->escaped() ?>">
            <?= $this->errors()->block( $block )->escaped() ?>
            <input type="hidden" name="wpEditToken" value="<?= $editToken->escaped() ?>">
            <input name="<?= $block->getName()->escaped() ?>[content]" value="<?= $content->escaped()  ?>"
                   class="flow-edit-title-textbox mw-ui-input">
            <div class="flow-edit-title-controls">
                <input type="submit" class="mw-ui-button mw-ui-constructive"
                       value="<?= wfMessage( 'flow-edit-title-submit' )->escaped() ?>">
            </div>
        </form>
    </div>
</div>

Implicit escaping, implicit variables

<div class="flow-topic-container flow-topic-full">
    <div class="flow-edit-title-form flow-element-container">
        <form method="POST" action="<?= $editTitleUrl ?>">
            <?= $this->errors()->block( $block ) ?>
            <input type="hidden" name="wpEditToken" value="<?= $editToken ?>">
            <input name="<?= $block->getName() ?>[content]" value="<?= $content ?>"
                   class="flow-edit-title-textbox mw-ui-input">
            <div class="flow-edit-title-controls">
                <input type="submit" class="mw-ui-button mw-ui-constructive"
                       value="<?= wfMessage( 'flow-edit-title-submit' )->escaped() ?>">
            </div>
        </form>
    </div>
</div>