igears: template architecture and principles
Post on 25-Jan-2015
145 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related