Mastering front-end components in WinterCMS

Most of the time when you are building a large website, you re-use some markup snippets over and over through all the pages.
The most basic example that comes to me is forms: to keep them consistent with the design, I create form's inputs that keep the same appearance through all the site.

When I build a site with a front-end framework like Vue, or a PHP template engine like Blade, I usually create many components to simplify my end-pages markup and keep the code as DRY as possible.

This helps me to maintain them as I just need to modify a single component to change all the pages in which it's present.

Coming from a Laravel experience and its powerful Blade template engine which includes components, you may struggle to find out how this could be achieved on WinterCMS with Twig.

There are different ways to tackle this, depending on the need of the component you are building:

• Does it just need to render a styled component that you use repeatedly over the site? Then you should use macro.
• Does it need to support the slot feature? Just use a partial.
• Does it need a PHP class to be attached to some dynamic logic? Build a plugin's component.

These three ways to build components are slightly different so this article will be split in many parts, including this first one about the story and the why?

Why Winter uses Twig instead of Blade?

I wasn't here at the beginning, but this question has been asked so many times that I feel like I could answer it today.
The answer comes from the history of both Laravel and WinterCMS:
The CMS has been released in 2014, at this moment Laravel was on the version 5.0.
Blade already exists but components has not been introduced yet.
In front of that there is Twig, which is way more advanced than Blade for the time being.
Twig includes powerful features that does not exist yet into Blade and no one could have said what both would become in the future.

The choice when it has made was clear: Use Twig for the front-end themes.

Winter introduced components way before Blade did.

Because Winter is using Twig, macros was already here from the beginning and so does Winter's partial, in 2014.
Blade introduced its equivalent components in Laravel 5.4, released on january 2017!

Also Winter's plugins components are here since the beginning of the CMS.
Its equivalent: Blade's class based components has been introduced into Laravel 7 in March 2020!

And to finish with the cherry on the top, plugins components supports HTML over the wire.
This feature doesn't exist yet into Laravel, and you'll need to install Livewire to do the equivalent stuff.

Now that you know that, you perfectly understand why you are using Twig instead of Blade to build Winter's themes.
Let's dig into our first basic components using Twig macros!