22
iGears: Architect Principles of Template Engines Design

IGears: Template Architecture and Principles

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: IGears: Template Architecture and Principles

iGears: Architect Principles of Template Engines Design

Page 2: IGears: Template Architecture and Principles

First sight (syntax)

Code

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

Page 3: IGears: Template Architecture and Principles

First sight (syntax)

Page 4: IGears: Template Architecture and Principles

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

Page 5: IGears: Template Architecture and Principles

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>

Page 6: IGears: Template Architecture and Principles

First sight (syntax)

Smarty

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

Page 7: IGears: Template Architecture and Principles

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>

Page 8: IGears: Template Architecture and Principles

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"

Page 9: IGears: Template Architecture and Principles

Separate logic from view

Role

LogicView

Page 10: IGears: Template Architecture and Principles

First step — design patterns

• MVC• MVP• MVVM

Application architecture

Page 11: IGears: Template Architecture and Principles

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

Page 12: IGears: Template Architecture and Principles

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

Page 13: IGears: Template Architecture and Principles

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.

Page 14: IGears: Template Architecture and Principles

Data presentation in template

Features

Model Data Static resources

Page 15: IGears: Template Architecture and Principles

Data-bindings

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

Features – Variables

Page 16: IGears: Template Architecture and Principles

Format Data (Modificators)

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

replacements

Features – Variables

Page 17: IGears: Template Architecture and Principles

Logic implementation

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

Features – Functions

Page 18: IGears: Template Architecture and Principles

Loops

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

Features – Functions

Page 19: IGears: Template Architecture and Principles

Caching

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

Features - Cache

Page 20: IGears: Template Architecture and Principles

Code Reuse

• Includes other templates• Config files usage

Features – Code Reuse

Page 21: IGears: Template Architecture and Principles

Points

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

Don’t forget

Page 22: IGears: Template Architecture and Principles