Patterns
I have tried out the brand new Patterns plugin and can now share what I’ve leared from it. Maybe you work completely different? In that case I would like to hear your story as well.
I recommend you to first read about Patterns as well as looking at the video. Else you might get lost because I skip much of the basics in this thread.
When to use it
If you like to work with details and polish them to perfection, this can be for you. With Patterns everything is a module that you design independently of other modules. You bundle the php, css and js together to a pattern.
When to not use it
If you are in a hurry and time is against you and the project you are working on is small and don’t require maintainace. Then I suggest you go with the normal workflow (templates and snippets only). If you don’t like to learn anything new and just like the current workflow, there is no reason for you to change.
Speed
For me it was a very slow start. It takes time to learn and get used to. It’s not hard to get started but it’s a completely new way of thinking and get organized.
In the end, or later on in the process you save time instead. That’s because you have done so many clever things on the way, reused patterns for ways you did not think of before. Less code is also a reason for speeding things up later on.
Page objects
For me it has been helpful to often send a page with page('my-page') through the config called p.
P variable
I often send the $p variable to sub patterns.
Here is how the template looks like:
pattern('site', ['p' => $page ]);
And I can send that to the sub patterns as well:
pattern('site/my-pattern', ['p' => $p]);
I can’t name it page. For some reason it’s blocked. Therefor I think p is a good name for it as it already appear in the docs quite a lot.
Item variable
In the foreach loops I often use $items as variable, like this:
foreach( $p->children() as $item ) {
echo $item->title();
}
Then I know that $p is a manipulated version of $page and $item is some kind of page item in a loop.
Using templates
You can still use templates when working with patterns. I do that alot.
In the template it looks like this:
pattern('site', ['template' => $page->intendedTemplate(), 'p' => $page ]);
In the pattern it looks like this:
if( $template == 'faq') {
pattern('site/main/page/qa'); // Loading a sub pattern
}
Filenames
It’s required to name the files and folders like this:
my-pattern
my-pattern/my-pattern.html.php
my-pattern/my-pattern.config.php
What I was missing was that these are the only two files that needs to be named this way. You can for example have a bunch of images not following this structure at all, like:
my-pattern/hello.svg
my-pattern/goodbye.png
Naming of classes in css, scss etc
If a pattern is named my-pattern I always have a div with the same name as the pattern.
.my-pattern{
a {
background: red;
}
}
Then it makes it alot easier to know how everything works, even without fiddling through folders.
BEM
Before using Patterns I was planning to use BEM. If there is a really really large site, it could make sense to use it. That’s up to you.
What I find out in my case was that with Patterns you get so organized, so you may not even need use it. I don’t use it anymore. If you are not using BEM you will probably have less code which is easier to read.
When a pattern is a pattern
Sometimes it can be hard to know if some part should be a pattern or not.
Is a pattern - NO
Here is my personal opinion of what is NOT a good fit for a pattern:
- header.php - All the stuff that is invisible in the header can not be previewed, so a such pattern is of no meaning.
- footer.php - Same as header.php. Keep it as a snippet instead.
- An element that can’t be by itself like a list item. A list item is never be shown outside the list. Therefor it make more sense to have the list as a pattern. A list can stand by itself.
Is a pattern - YES
- Almost everything else.
- You may think that the only things that needs a pattern are the ones you need to use more than once? I strongly recommend to do patterns of them even if they are used only once. It has other positive side effects.
Positive side effects
Isolated elements with patterns
If you build a site the normal way with templates and snippets and have three flags in the top menu (for changing language). Then you might add some padding or margin to it to give it some space to the menu. Later on you need to add the same flags in the footer. Then you need to hack away some padding, margins and maybe floating. That’s because the flags are not independent. They are built as a part of the menu. It’s very common but a big fail.
Doing the same thing with Patterns. That means that the flags will be a pattern and you will very early discover if you by accendent set a margin left that should not be there. You should be able to add a border around the flags pattern and it should contain the flags and not any wierd spaces or any other crazyness.
Instead of setting that margin on the flags pattern it’s better to set it on the menu pattern. Then the flags are still just flags. In the footer pattern you can now add the flags without any strange inheritance from the menu. The position and margins of the flags in the footer is set by the footer pattern.
More focus on details
Because a pattern is so isolated it’s both fun and easy to dig into details of that pattern. The site is not a big monster anymore.
Do things once and never again
As a web developer you often build things until they become too big and then you just restart from scratch. I feel like this finally can break that workflow. It feels more like polish and not start over from scratch.
Use patterns with other projects
If you are making more sites it will probably be easy to reuse patterns in a new way. Like you do with plugins but with patterns. Do one pattern one time and never again.
Share patterns with others
I’m thinking of a site for free patterns, or somehow share patterns with others. It’s possible because they are not, or should not have so much dependences. It’s not possible for all patterns, but for many,
Bugs and issues
I know I have reported alot of bugs and ideas on Github. It means that I fell in love with this way to work. It also think that it is already very stable to use at this state.
Thank you @bastianallgeier for your great work at this thing!
