SUIT Framework

Scripting Using Integrated Templates

Docs - Comparison of SUIT to its Alternatives

12/27/2015: SUIT Framework is no longer actively maintained.

Why use SUIT? Let's see our alternatives. Firstly, you could have the server-side language print the HTML, CSS, and Javascript. Using PHP as the server-side language, combining all of these elements together yields the following:

combined.php
<?php
$username = 'Brandon';
$loggedin = true;
$members = array
(
    array
    (
        'name' => 'Brandon',
        'admin' => true,
        'banned' => false
    ),
    array
    (
        'name' => 'Chris',
        'admin' => false,
        'banned' => true
    )
);
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>';
if ($loggedin)
{
    echo '
<p style="text-align: center;">
    <a href="#" onclick="alert(\'Welcome, ' . $username . '!\');" style="color: blue; font-size: 16pt; text-decoration: none;">Welcome, ' . $username . '!</a>
</p>';
}
else
{
    echo '
<p>Please log in.</p>';
}
echo '
<fieldset>
    <legend>Who\'s Online?</legend>
    <p>';
foreach ($members as $key => $value)
{
    if ($value['admin'])
    {
        echo '
        <strong>';
    }
    if ($value['banned'])
    {
        echo '
        <del>';
    }
    echo '
        ' . $value['name'];
    if ($value['admin'])
    {
        echo '
        </strong>';
    }
    if ($value['banned'])
    {
        echo '
        </del>';
    }
    if ($key != count($members) - 1)
    {
        echo ',';
    }
}
echo '
    </p>
</fieldset>
</body>
</html>';
?>

Would you want to use this? I wouldn't. Instead, you could use a system that has the dynamic code embedded in the static HTML. Similarly, you could embed the CSS and Javascript in the header instead of in the middle of the HTML. PHP can do this by default, and Mako can do this for Python:

embedded.php
<?php
$username = 'Brandon';
$loggedin = true;
$members = array
(
    array
    (
        'name' => 'Brandon',
        'admin' => true,
        'banned' => false
    ),
    array
    (
        'name' => 'Chris',
        'admin' => false,
        'banned' => true
    )
);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
a
{
    color: blue;
    font-size: 16pt;
    text-decoration: none;
}

.centered
{
    text-align: center;
}
</style>
<script type="text/javascript">
function welcome(username)
{
    alert('Welcome, ' + username + '!');
}
</script>
</head>
<body>
<?php
if ($loggedin):
?>
<p class="centered">
    <a href="#" onclick="welcome('<?php echo $username; ?>');">Welcome, <?php echo $username; ?>!</a>
</p>
<?php
else:
?>
<p>Please log in.</p>
<?php
endif;
?>
<fieldset>
    <legend>Who's Online?</legend>
    <p>
<?php
foreach ($members as $key => $value):
    if ($value['admin']):
?>
            <strong>
<?php
    endif;
    if ($value['banned']):
?>
            <del>
<?php
    endif;
?>
            <?php echo $value['name']; ?>

<?
    if ($value['admin']):
?>
            </strong>
<?php
    endif;
    if ($value['banned']):
?>
            </del>
<?php
    endif;
    if ($key != count($members) - 1):
?>
            ,
<?php
    endif;
endforeach;
?>
    </p>
</fieldset>
</body>
</html>

Much better, but one file still contains all 4 of the languages used. With SUIT, we can separate the server-side programming and the template structure into different files just like you can for the CSS design and the Javascript:

separated.php
<?php
require 'suit.class.php';
require 'templating.class.php';
$suit = new SUIT();
$templating = new Templating($suit);
$template = file_get_contents('index.tpl');

$templating->var->username = 'Brandon';
$templating->var->loggedin = true;
$templating->var->members = array
(
    array
    (
        'name' => 'Brandon',
        'admin' => true,
        'banned' => false
    ),
    array
    (
        'name' => 'Chris',
        'admin' => false,
        'banned' => true
    )
);
echo $suit->execute($templating->rules, $template);
?>
index.tpl
[trim]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="javascript.js"></script> 
</head>
<body>
[if condition="loggedin"]
<p class="centered">
    <a href="#" onclick="welcome('[var]username[/var]');">Welcome, [var]username[/var]!</a>
</p>
[/if]
[if condition="loggedin" not="true"]
<p>Please log in.</p>
[/if]
<fieldset>
    <legend>Who's Online?</legend>
    <p>
        [loop value="value" iterable="members" join=","]
        [if condition="value.admin"]<strong>[/if]
        [if condition="value.banned"]<del>[/if]
        [var]value.name[/var]
        [if condition="value.admin"]</strong>[/if]
        [if condition="value.banned"]</del>[/if]
        [/loop]
    </p>
</fieldset>
</body>
</html>
[/trim]
style.css
a
{
    color: blue;
    font-size: 16pt;
    text-decoration: none;
}

.centered
{
    text-align: center;
}
javascript.js
function welcome(username)
{
    alert('Welcome, ' + username + '!');
}

To be fair, I must clarify on a couple of things. Firstly, I am aware that what method you use for CSS / Javascript has no relation to what you use for the server-side language. I merely combined the similar methods to help reinforce the differences. Also, you might be wondering if I used static variables, why did I not store them in an external file, or just use static HTML? This example assumes that you would be generating these variables from an actual condition and loop, perhaps by using a database. However you generate the data, the application of it to the document remains the same.

Those explanations aside, I believe SUIT will serve you better than the other options. Perhaps this example doesn't convince you. Before making up your mind, see Features for more examples of how SUIT can improve your Web 2.0 application.

These options all generate the same page. Take your pick.