Is the abstraction worth it?
I'm currently working on a project, building the initial components and pages in Fractal - a component library tool.
The templates are written in Twig (or twig.js, as Fractal is written in JavaScript), and my JavaScript is using Stimulus.
So far, I've been writing the data attributes Stimulus needs, such as data-controller="timeline and data-timeline-closed-by-default-value="true" by hand but, yesterday I decided to write some custom Stimulus functions for this - inspired by the ones in the Symfony UX bundle.
After a few hours, I had them working and, although they weren't feature comparable with Symfony's, they were good enough to use in my codebase and I migrated the Stimulus code I'd written so far.
Today, I removed them and reverted my code.
Causing obscurity through abstraction
Here's an example of some code with and without a helper function:
{# With the helper function. #}
<div {{ stimulus_controller("timeline", { closedByDefault: true, closeOtherItems: true }) }}>
{# Without the helper function. #}
<div
data-controller="timeline"
data-timeline-close-other-items-value="true"
data-timeline-closed-by-default-value="true"
>
Although it's less code, I prefer to be able to see and understand the generated code.
I don't have to remember the parameters of the helper function, so there's less mental overhead.
I can debug this easily as I can find the same code that's in the generated HTML.
If I need to find closed-by-default, it doesn't exist in the template if I'm using the helper function as keys are written in camel-case and converted to kebab-case. This would be likely to cause me an issue in the future if I forgot, and could cause confusion if I needed to explain it to other Developers.
Fewer dependencies
To convert keys from camel case in Twig for kebab case in HTML attributes, I installed a library that I no longer need. This means I can remove that dependency.
Less code to maintain
Now I've removed those functions, I no longer need to maintain them and I can focus on completing the code for my client and moving forward with the project.
The functions weren't feature comparable with Symfony's and would have needed more development and potential bug fixes in the future. By removing them, I'm no longer responsible for maintaining and extending it and the codebase is leaner.
Here's the thing
It was an interesting experiment, but, after thinking about it and trying it out, I decided not to keep the helper functions on this project.
The abstraction wasn't providing value and I prefer to keep the code as simple and easy to work on as possible.
- Oliver
