Smarty - Best way to create reusable components

[nunong21]

We are using Smarty for our UI in our platform which is very complex, used by thousands of users per hour, and we're looking for a way to uniformize a bit more our UI by creating some sort of component sets.

We did this for a couple of elements, for example Buttons, Text Inputs and complex elements by using the registerPlugin to register many blocks and functions.

For example, using the following in our Smarty templates:

{Button title="Try now"}

Will run this:

public static function simple($params, $smarty)
{
    $smarty->assign('button', $params);
    $smarty->caching = false;
    return $smarty->fetch(self::$componentsPath . '/UI/buttons/btn-simple.html', false);
}

Results in:

<button type="button" class="btn btn--primary">
    <span class="btn__label">Try now</span>
</button>

With this, we make sure that all our buttons will look the same, but I get the impression we are overusing the registerPlugin and $smarty->fetch functions even for some things that could be simple.

This was most notable when today we had to implement a Card element. The Card itself could be really simple, but it may have an header, content and actions elements inside of it.

So, for example, to get the following HTML

<div class="card">
    <div class="card__header">
        <img class="card__logo" src="test.jpg" alt="title">
        <div class="card__titles">
            <div class="card__label">Title Grayed</div>
            <div class="card__title">Title Main</div>
            <div class="card__subtile">Title Subtitle</div>
        </div>
    </div>
    <div class="card__content">
        Add some custom content
    </div>
    <div class="card__actions">
        <button class="btn btn--primary">Try now</button>
    </div>
</div>

We would simply do the following to make sure all our cards would look the same:

{Card}
    {CardHeader logo="test.jpg" title="Title Main" label="Title Grayed" subtitle="Title Subtitle"}
    {CardContent}
        Add some custom content
    {/CardContent}
    {CardActions}
        {Button title="Try now"}
    {/CardActions}
{/Card}

It does look better, but I don't know if it feels right to do so many $smarty->fetch to in the end, draw only a couple <div> elements...

Is there any better way of doing it or any suggestion?

[wisskid]

Interesting. And I suppose you are worried about speed or memory usage?

Why not simply use {include}?

[nunong21]

Tbh our production servers are powerful enough, I was just wondering how much impact this could cause when overused...
The include doesn't feel that natural and for some complex cases would require a big work around to dodge some html problems.

Was something to handle a system like this on the table for implementation one day? What would you think would be the best way to achieve reusable components like this?

Later on, I can show you some more examples that we use if that's of interest.

[wisskid]

You might consider not using smarty->fetch inside the block function handler if it's only a simple tag. But otherwise I suppose this is fine.