Psttt! is a template system that does not alter original html files for better maintenance and reusability
Psttt! is kind of a template engine but it does not alter original html files it just uses original mockups from the initial development stage, allowing continuous mockup development and leaving front end developers and programmers living in peace by excluding the possibility to step on each others toes.
How to achieve this?
Enough talking, let me show you some snippets to get a better view.
The simplest and dumbest example:
html mockup<h1 id='title'>Write our company name here</h1>
$view->title = ‘Foo company’;
h1#title = $title;
<h1 id=?title?><?php echo $this->title;?></h1>
Not convincing enough isn’t it? just showing you the separate layers, let’s move on to some more realistic examples like a shoping cart product list page, a very common pattern.
html mockup
<div id='product_list'>
<div class='product'>
<h2>Mockup product 1</h2>
<img src='/images/default_product1.jpg'/>
<p>Some product description goes here!</p>
<span>Price: <strong>99999</strong></span>
</div>
<div class='product'>
<h2>Mockup product2</h2>
<img src='/images/default_product2.jpg'/>
<p>Some product description goes here!</p>
<span>Price: <strong>888.99</strong></span>
</div>
</div>
$view->products = array(
1 => array('title'=> 'Product 1', 'img' => '/img/products/1.jpg' , 'description' => 'the best product ever', 'price' => '$10'),
2 => array('title'=> 'Product 2', 'img' => '/img/products/2.jpg' , 'description' => 'the second best product ever', 'price' => '$30')
);
//we just need one product to fill in data and iterate
#product_list>.product|deleteAllButFirst
//add iteration code, php foreach that will fill in data
#product_list>.product|before = <?php if ($this->products) foreach($this->products as $product ):?>
#product_list > .product> h2 = $product[title]
#product_list > .product > img|src = $product[img]
#product_list > .product > p = $product[description]
#product_list > .product > .span > strong = $product[price]
#product_list>.product|after = <?php endforeach;?>
<div class=?user_box?>
Welcome <strong class=?username?>Demo user 1</strong>
</div>
<div id=?product_list?>
<?php if ($this->products) foreach($this->products as $product):?>
<div class=?product?>
<h2><?php echo $product[title];?></h2>
<img src=?<?php echo $product[img];?>?/>
<p><?php echo $product[description];?></p>
<span>Price: <strong><?php echo $product[price];?></strong></span>
</div>
<?php endforeach;?>
</div>
Maybe you are not convinced and you say to yourself that you can add that php code directly into the html or add some smarty or other template engine syntax and that this is not such a big deal.
And that is an overhead to maintain a different file and keep these things separate.
If so, then think what happens when the front end developer changes the layout even if a little bit after you wrote your templates and he added lots of divs in all over the places and you have to follow all your template includes and change all that, I know, it sucks and it’s very time consuming.
With Psttt! when the developer changes the layout you don’t have to change anything you already wrote, the logic for the html file that will be automatically be injected in his new html files.
That’s the power of keeping things clean and separated, no more html + logic hard to maintain bloat, that just doesn’t cut it in an continuous changing living and breathing website.
Psttt! full documentation, full source code with examples can be found on github
Share this with the world
Related
Comments
Will Psttt take the place of Smarty somedays later?
Posted on 2010-09-21 03:33:35Interesting approach here. I'll be taking a look deeper into the project. I'm not quite sure how I would like to learn psst code but it looks fairly easy, similar to jquery?
Posted on 2010-11-11 09:15:19@huarong I hope so :)
Posted on 2010-11-12 09:41:41@jason Is similar to jQuery in the way that it uses CSS selectors to alter html DOM but on the server side and is limited on inserting php code into the html.
Make yourself heard