How to Make Designer-Friendly Template Engine

RubyKaigi 2010

How to Make Designer-Friendly
Template Engine
- Keep Template as pure HTML -

makoto kuwata
http://www.kuwata-lab.com/

copyright(c) 2010 kuwata-lab.com all rights reserved.
1

README.txt

Goal
✤ For template engine users: get
correct knowledge
✤ For template engine desingers: get
an ideal solution

Motiv. ✤ Want correct wrong explanations
related to template engine
✤ Want to insist that eRuby is not an
ideal solution

Target ✤ Template engine users and designers

2

I must apologize...
✤ I would talk about...
✤ How to keep html design of template ﬁles
✤ What are performance bottole necks of engine
✤ What is wrong about existing template engines
✤ How to design engine which is designer-friendly,
very fast, and easy to implement in any languages

✤ But I only have 30 minutes
✤ I can talk about the ﬁrst issue

3

Reference
✤ Rubyist Magazine - Guide to Template System
✤ http://jp.rubyist.net/magazine/?0024-TemplateSystem
✤ http://jp.rubyist.net/magazine/?0024-TemplateSystem2

4

Agenda
✤ Fundamental section:
✤ Business Layer and Presentation Layer
✤ Existing Issues and the Cause
✤ Think about Presentation Logic

✤ Kwartz section:
✤ Introduction to Kwartz template engine
✤ Presentation Logic Pattern

5

Fundamental section:
Business Layer & Presentation Layer

6

Business layer and Presentation layer
✤ Business layer
✤ WHAT should be displayed?
✤ by main program

✤ Presentation layer
✤ HOW to display it?
✤ by template engine, template ﬁle

7

Data and Logic
✤ Both layers have each data and logic

Business layer Presentation layer
(main program) (template engine)

Data Business Data Presentation Data

Logic Business Logic Presentation Logic

separated by template engine
8

Applicaiton Example
Business logic
✤ Select top 20

✤ of book sales Business data

✤ by <table> tag Presentaion
data
✤ with toggling bgcolor

Presentation
logic

9

Frequent Misunderstandings (1)

Mis: ✤ Template engine separates
presentation from logic.

Truth: ✤ Template engine separatin
presentation layer from business
layer.
✤ Presentation layer have own
logics.

common mistake in Japan...
10

Frequent Misunderstandings (2)

Mis: ✤ Presentation layer shouldn't
contain any logics.

Truth: ✤ Presentation layer should contain
presentation logics.
✤ "HTML template shouldn't contain any
presentation logics" and "Layers should
be separated" are diﬀerent things.

11

Add-up
✤ Business layer
✤ WHAT should be displayed?
✤ By main program

✤ Presentation layer
✤ HOW to display it?
✤ By template engine and template ﬁle

✤ Both layers have each data and logics

12

Fundamental section:
Existing Issues and the Cause

13

Templates Annoys Designers
ProjectA: Rails
<table> ProjectC: PHP
<% @arr.each { %> <table>
.... <?php foreach() { ?>
<% } %> ....
</table> <?php } ?>
</table>
ProjectB: JSP
<table>
<forEach items="">
Designer: Why I must
....
master so much langs?
</forEach>
</table>
14

Edit & Update the same file
template ﬁle
<table>
<% @arr.each { %>
....
<% } %>
</table>
Conﬂict!
edit presentaion
edit HTML logic

Designer Programmer

15

The Cause of Issues

✤ It is the cause that template ﬁle
presentation logics <table>
are embedded in <% i = 0 %>
<% @arr.eachx do |x| %>
template file
<% i += i %>
<% c = i.odd ? %>
<% 'odd':'even' %>
pure HTML is the <tr class="<%=c%>">
solution <td><%= x %></td>
</tr>
<% end %>
</table>

16

Pure HTML Template is Great
✤ Easy to preview by browsers
Designer
for

✤ No need to learn a lot of template langs!
✤ Easy to validate by HTML validator
✤ Allow to use their favorite HTML editor

Avoid edit confliction
Programmer
for

✤

✤ Remove whitespaces to reduce traffic
✤ Transform template files for mobile phones

17

The Question which bothered Matz
✤ So, where is presentation logics?

Matz diary (2004-08-24)
http://www.rubyist.net/ matz/20040824.html#p01

(Summary)
When view layer needs some logics,
where should I put it in?
I don't want it to be in HTML template...

18

Add-up
✤ Presentation logics in template ﬁles
causes a lot of problems
✤ Pure HTML template is great
✤ Where is presentation logics?

19

Fundamenta section:
Think about Presentaion Logic

20

Where should be Presentation Logics?

A. In template ﬁle (eRuby, JSP, Kid)
Presentation Logic
Business Logic & Data
＋ Presentaion Data

B. In main program (Amrita2, XMLC, HTML::Template)
Presentation Logic
Presentation Data
＋Business Logic & Data

C. In independed ﬁle (Kwartz, Tapestry, Mayaa)
Presentation Logic
Business Logic ＆ Data
Presentation Data

template file main program
21

A. In Template File (1)

ex: eRuby (Ruby)
<table>
<% odd = false %>
<% for item in @list %>
<% odd = ! odd
<% cls = odd ? 'odd' : 'even' %>
<tr class="<%= cls %>">
<td><%=h item %></td>
</tr>
<% end %> •HTML and non-HTML
</table> are mixed
→ never pure HTML !

22


ex: JSP with custom tags (Java)
<table>
<c:forEach var="item" items="${list}"
varStatus="loop">
<c:set var="klass"
value="${loop.count%2==0?'odd':'even'}" />
<tr class="${klass}">
<td><c:out value="${item}" /></td>
</tr>
</c:forEach> •Even if you use custom tags,
</table> presentation logics are mixed into
HTML (just same as eRuby).

23


ex: Kid template engine (Python)
<table>
<tr py:for="i, item in enumerate(items)"
class="${i % 2 and 'even' or 'odd'}">
<td py:content="item">dummy</td>
</tr>
</table>
•Using HTML tags and attributess, Kid
aquired designer-friendly template!
•But notice that presentation logics are
still embedded into templates

24

Pros.
✤ Presentation layer (= template file) is
compretely separated from business layer.
✤ Easy to uderstand, easy to implement

Hard to keep pure HTML
Cons.

✤

✤ Designer and programmer will edit the
same file at the same time, and conflicted
in the result
✤ Designer may break presentation logics in
template files accidentally
25


Presentation Logic

Presentation Logic
Presentation Data

Presentation Logic
Presentation Data

26

B. In Main Program (1)

ex: Amrita2 temlate ﬁle (Ruby)
<table>
<tr id="list" class="odd">
<td id="item">dummy</td>
</tr>
</table>

•Just to place "mark" (= id attr in
Amrita2) into template ﬁle
•Pure HTML template (because no
presentation logics in it)

27

ex: Amrita2 main program (Ruby)
## business data to display
list = [ 'A', 'B', 'C' ] •Necessary to "process"
## presentation logic bussiness data for
list2 = []; odd = false presentation layer
for x in list
cls = (odd = !odd) ? 'odd' : 'even'
item2 = a(:class=>cls) { {:item=>x} }
list2 << item2
end
context = { :list=>list2 }
## read template and render with data
tmpl = Amrita2::TemplateFile.new('ex1.html')
tmpl.expand(html='', context)
print html
28

Pros.
✤ Just embed "mark" into template
✤ pure HTML template (in most cases)
✤ No conflicts when editing files
✤ No accidental change of logics by designer
Cons.

✤ Business layer and Presentation layer are
NOT separated! (*)
✤ Confusable usage (because logic should be
represented by data)

(*) devisable to avoid (ex. define dedicated class)
29


Presentation Logic

Presentation Logic
Presentation Data

Presentation Logic
Presentation Data

30

C. In Independed File (1)

ex: Kwartz presentation data ﬁle (Ruby)
<table>
<tr id="mark:list" class="odd">
<td id="mark:item">dummy</td>
</tr>
</table>
•Just place "mark" (= id attr in
Kwartz) in template ﬁle

31

C. In Independent File (2)

ex: Kwartz presentation logic ﬁle (Ruby)
#item { ## id="mark:item"
value: x; ## display value of x
}
#list { ## id="mark:list"
logic: { ## iterate over element
for x in @list
_elem
end
} •Write your presentation logics
}
just like CSS
•No presentation logics in HTML !
32

CSS
(Visual Design)

HTML
(Document
Structure)
Kwartz JavaScript
(Presentation (Client-side
Logic) Logic)

33

C. In Independent File (3)
Pros.
✤ Business layer and Presentation layer are
completely separated!
✤ Presentation data (=HTML) and
Presentation logic are also separated!
✤ Pure HTML template
✤ No conflicts when editiong files
✤ No accidental modification of logics
Cons.

✤ Number of files are increased

34

Important thing, More Important thing
✤ Important thing
✤ Template format is pure HTML

✤ More important thing
✤ Presentation logic should be separated (or
independent) from others!
✤ Pure HTML template is just derivation from it

35

Frequent Misunderstanding (1)

Mis.: ✤ My template is pure HTML, so
presentation layer is separated!

Truth: ✤ "Template is pure HTML" doesn't
mean "Presentation layer is
separated"
✤ Probably she/he misunderstands "No
logics in template" as "Presentation layer
is separated"

36

Frequent Misunderstanding (2)

Mis.: ✤ Web designer may write buggy
logic in raw PHP, so I introduced
Smarty!

Truth: ✤ Smarty can't prevent buggy logic
nor accidental logic modiﬁcation.
✤ The root cause of the problem is that
desginer can access to presention logic
✤ A radical solution is to separate
presentation logic from template ﬁle

37

Add-up
✤ Presentation logic can be...
✤ In template file (non-html, conflictions)
✤ In main program (layers are not separated)
✤ In independent file (ideal)

✤ Pure HTML template is important
✤ Separation of presentation logic is
more important

38

Kwartz section:
Introduction to Kwartz

39

Kwartz Overview
✤ What is Kwartz?
✤ A template engine which can separate
Presentation logic from Presentation data
(=HTML)
✤ Pure HTML template
✤ Implemented in Ruby, PHP
✤ http://www.kuwata-lab.com/kwartz/

40

Example: Presentation Data
Add "marking" (=id attr)
to where you want to
ex.html manipulate dinamically
<table>
<tr id="mark:list">
<td id="mark:item">Foo</td>
</tr>
<tr id="dummy:d1">
<td>Bar</td>
</tr>
</table> `id="dummy:xxx"' means
dummy elelment

41

Example: Presentation Logic

ex.plogic Write presentation logic
#list { for each elements
logic: {
for x in @list
_stag ## start-tag
_cont ## content
_etag ## end-tag
end
} Repeat <tr> element
}
#item {
value: x;
Display value of x as
}
content of <td> element
42

Example: Compilation

Compile files into a eRuby file
$ kwartz -l eruby -p ex.plogic ex.html > ex.rhtml

ex.rhtml (compiled by Kwartz)
<table>
<% for x in @list %>
<tr> •Attribute ìd="mark:xxx"' is
<td><%= x %></td> removed automatically
</tr> (not removed if ìd="xxx"')
<% end %>
</table> •Element which has
ìd="dummy:xxx"' is also
removed
43

Example: Main Program

Main program
## business data to be displayed
list = ['A', 'B', 'C']
context = { :list => list }

## load template and render it with data
require 'erubis'
eruby = Erubis::Eruby.load_file('ex.rhtml')
html = eruby.evaluate(context)
print html
Main program doesn't
require Kwartz

44

Pros and Cons
✤ Pros. ✤ pure HTML template
✤ Very fast
✤ Supports eRuby, PHP, JSP, and so on
✤ Available with non-HTML text ﬁle

✤ Cons. ✤ Messy compile (should be automated)
✤ Runtime error is reported with line
number AFTER compiled code, not
original source code

45

Practical Examples (1)

repeat over element repeat only content
#list { #list {
logic: { logic: {
for item in @list _stag
_stag # start-tag for item in @list
_cont # content _cont
_etag # end-tag end
end _etag
} }
} } Useful to repeat
<dt> and <dd>

46


display only when display default value
#list { #list {
logic: { logic: {
if @list.size > 0 _stag
_stag if @name.blank?
_cont print('World')
_etag else
end _cont
} end
} _etag
}
}

47


remove dummy tag remove dummy element
#list { #list {
logic: { logic: {
#_stag }
_cont }
#_etag
} replace by other
}
#list {
logic: {
_element(list2)
}
} reuse a certain
element
48


より複雑なプレゼンテーションロジック
#list {
attrs: "class" cls; # attribue
logic: {
odd = false Presentation logic is
for x in @list separated from HTML ﬁle
odd = !odd
cls = odd ? 'odd' : 'even'
_elem
end No need to touch HTML at all
} even if you change presentaion
} logic dramatically

49

Add-up
✤ Kwartz tempate engine
✤ Separates presentation logics from presentation
data (=HTML)

✤ Pure HTML Template
✤ No need to touch HTML ﬁle at all even if you
change presentation logics

50

Kwartz section:
Presentation Pattern

51

Overview
✤ What is Presentation Pattern?
✤ Best practices in presentation layer (data & logic)
✤ (Notice that this is my original term and not
popular at all)
✤ Very easy to understand, compared to GoF!
✤ http://www.kuwata-lab.com/kwartz/kwartz3ruby-
pattern-catalog.html

52

List of Patterns
✤ Replacement ✤ Iteration
✤ Replace Element with ✤ Iterate Element Pattern
Value Pattern ✤
Iterate Content Pattern
✤ Replace Content with
Value Pattern ✤ Selection
✤ Default Content Pattern ✤ Select Element/Content
✤ Replace Element with Pattern
Element/Content Pattern ✤ Pick-up Element/Content
✤ Replace Content with Pattern
Element/Content Pattern ✤ Extract Element/Content
Pattern
✤ Deletion
✤ Delete Element Pattern Today's menu
✤ Delete Tag Pattern
53

Select Element Pattern
✤ Req: Want to change data according to condition

<div id="mark:message"> #message {
<div id="error"> logic: {
ERROR! if status == 'error'
</div> _element(error)
<div id="warning"> elsif status == 'warn'
Warning: _element(warning)
</div> else
<div id="noerror"> _element(noerror)
No error. end
</dvi> } Select an elem
Add diﬀerent id according to
</div> }
for each elems condition
54

Pick-up Element Pattern
✤ Req: Want to include a lot of dummy elems (for preview)

<ol id="mark:list"> #list {
<li id="mark:item"> logic: {
Item1 _stag
</li> add id to _element(item)
<li>Item2</li>
non-dummy _etag
<li>Item3</li>
elements }
<li>Item4</li> }
Pick up only non-
<li>Item5</li> dummy elems, and
<li>Item6</li> dummy elems are
</ol>
removed in the result

55

Extract Element Pattern
✤ Req: Want to extract a certain elem form a document

<html id="mark:whole"> #whole {
<body> logic: {
<form id="form"> _element(form)
<input ... /> }
Replace document
<input ... /> }
by a certain elem
<input ... />
</form> #DOCUMENT {
</body> logic: {
</html> Add id attr to _element(form)
document root }
elem (=<html>) Kwartz provides special
}
id name for this purpose
56

Add-up
✤ Presentation pattern
✤ Best practices for presentation layer (data & logic)
✤ Select Element Pattern:
select only a elemement according to condition
✤ Pick-up Element Pattern:
use only necessary element, and remove others
✤ Extract Element Pattern:
replace document by a certain element

57

questions?

58

thank you

59

How to Make Designer-Friendly Template Engine

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie How to Make Designer-Friendly Template Engine

Ähnlich wie How to Make Designer-Friendly Template Engine (20)

Mehr von kwatch

Mehr von kwatch (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

How to Make Designer-Friendly Template Engine