IGears: Template Architecture and Principles

Preview:

DESCRIPTION

 

Citation preview

iGears: Architect Principles of Template Engines Design

First sight (syntax)

Code

<?php if ($items) { foreach ($items as $item) { echo "* {$item}\n"; } } else { echo "No item has been found.\n"; } ?>

First sight (syntax)

First sight (syntax)

<title>{% block title %}{% endblock %}</title><ul>{% for user in users %} <li> <a href="{{ user.url }}">{{ user.username }}</a> </li>{% endfor %}</ul>

Jinja

First sight (syntax)

FreeMarker<html> <body> <p>Hello ${name}! You have the following messages: <#list messages as m>

<p><b>${m.from}:</b>

{m.body}</p> </#list> </body> </html>

First sight (syntax)

Smarty

<ul> {foreach from=$myArray item=foo} <li>{$foo}</li> {/foreach} </ul>

First sight (syntax)

XSLT<?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="/hello-world"> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <H1> <xsl:value-of select="greeting"/> </H1> <xsl:apply-templates select="greeter"/> </BODY> </HTML> </xsl:template> <xsl:template match="greeter"> <DIV>from <I><xsl:value-of select="."/></I></DIV> </xsl:template> </xsl:stylesheet>

First sight (syntax)

ERB<div id='content'> <div class='left column'> <h2>Welcome to our site!</h2> <p><%= print_information %></p> </div> <div class="right column"> <%= render :partial => "sidebar" %> </div> </div>

HAML#content .left.column %h2 Welcome to our site! %p= print_information .right.column = render :partial => "sidebar"

Separate logic from view

Role

LogicView

First step — design patterns

• MVC• MVP• MVVM

Application architecture

MVC

Application architecture

• Input is directed to controller

• Many-to-many relationship

between View and Controller

•View doesn’t have any

knowledge about Controller

•View is aware of the Model it

is expecting to pass on it

MVP

Application architecture

• Input is directed to View

• One-to-One relationship

between View and Presenter

•View holds the reference to it’s

Presenter and Presenter is aware

of this View

•View is not aware of the

Model. Presenter updates the

Model

MVVM

Application architecture

• Input is directed to View

• One-to-Many relationship

between ViewModel and View

•ViewModel haven’t any

knowledge about View

•View is not aware of the

Model. ViewModel updates the

View.

Data presentation in template

Features

Model Data Static resources

Data-bindings

• Variables from controller• Custom variables• Ierarchy variables (objects, associative arrays)

Features – Variables

Format Data (Modificators)

• Format numeric data• Date format• Client input filtering• HTML encoding• Static resources formating, placeholders

replacements

Features – Variables

Logic implementation

• if else operators• inline scripts (ex. {php}{/php})

Features – Functions

Loops

• For .. in• Loop status (odd, even, count, last, first, index)• Hacker functions (break, continue)

Features – Functions

Caching

• Cache time• Personalized caching• Partial caching• Application caching• Static caching• Cache control

Features - Cache

Code Reuse

• Includes other templates• Config files usage

Features – Code Reuse

Points

• Platform• Architecture• Data-binding• Functionality• Development resources• Code style

Don’t forget