uuid:
  - value: b51b7b96-fe84-43ed-9181-3c590a4015ef
langcode:
  - value: en
type:
  - target_id: daily_email
    target_type: node_type
    target_uuid: 8bde1f2f-eef9-4f2d-ae9c-96921f8193d7
revision_timestamp:
  - value: '2025-05-11T09:00:12+00:00'
revision_uid:
  - target_type: user
    target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
revision_log: {  }
status:
  - value: true
uid:
  - target_type: user
    target_uuid: b8966985-d4b2-42a7-a319-2e94ccfbb849
title:
  - value: 'Is the abstraction worth it?'
created:
  - value: '2024-06-04T00:00:00+00:00'
changed:
  - value: '2025-05-11T09:00:12+00:00'
promote:
  - value: false
sticky:
  - value: false
default_langcode:
  - value: true
revision_translation_affected:
  - value: true
path:
  - alias: /daily/2024/06/04/is-the-abstraction-worth-it
    langcode: en
body:
  - value: |
      <p>I'm currently working on a project, building the initial components and pages in Fractal - a component library tool.</p>

      <p>The templates are written in Twig (or twig.js, as Fractal is written in JavaScript), and my JavaScript is using Stimulus.</p>

      <p>So far, I've been writing the data attributes Stimulus needs, such as <code>data-controller="timeline</code> and <code>data-timeline-closed-by-default-value="true"</code> by hand but, yesterday I decided to write some custom Stimulus functions for this - inspired by the ones in the Symfony UX bundle.</p>

      <p>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.</p>

      <p>Today, I removed them and reverted my code.</p>

      <h2 id="causing-obscurity-through-abstraction">Causing obscurity through abstraction</h2>

      <p>Here's an example of some code with and without a helper function:</p>

      <pre><code class="html">
      {# With the helper function. #}
      &lt;div {{ stimulus_controller("timeline", { closedByDefault: true, closeOtherItems: true }) }}&gt;

      {# Without the helper function. #}
      &lt;div
        data-controller="timeline"
        data-timeline-close-other-items-value="true"
        data-timeline-closed-by-default-value="true"
      &gt;

      </code></pre>

      <p>Although it's less code, I prefer to be able to see and understand the generated code.</p>

      <p>I don't have to remember the parameters of the helper function, so there's less mental overhead.</p>

      <p>I can debug this easily as I can find the same code that's in the generated HTML.</p>

      <p>If I need to find <code>closed-by-default</code>, 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.</p>

      <h2 id="fewer-dependencies">Fewer dependencies</h2>

      <p>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.</p>

      <h2 id="less-code-to-maintain">Less code to maintain</h2>

      <p>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.</p>

      <p>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.</p>

      <h2 id="here%27s-the-thing">Here's the thing</h2>

      <p>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.</p>

      <p>The abstraction wasn't providing value and I prefer to keep the code as simple and easy to work on as possible.</p>

              
    format: full_html
    processed: |
      <p>I'm currently working on a project, building the initial components and pages in Fractal - a component library tool.</p>

      <p>The templates are written in Twig (or twig.js, as Fractal is written in JavaScript), and my JavaScript is using Stimulus.</p>

      <p>So far, I've been writing the data attributes Stimulus needs, such as <code>data-controller="timeline</code> and <code>data-timeline-closed-by-default-value="true"</code> by hand but, yesterday I decided to write some custom Stimulus functions for this - inspired by the ones in the Symfony UX bundle.</p>

      <p>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.</p>

      <p>Today, I removed them and reverted my code.</p>

      <h2 id="causing-obscurity-through-abstraction">Causing obscurity through abstraction</h2>

      <p>Here's an example of some code with and without a helper function:</p>

      <pre><code class="html">
      {# With the helper function. #}
      &lt;div {{ stimulus_controller("timeline", { closedByDefault: true, closeOtherItems: true }) }}&gt;

      {# Without the helper function. #}
      &lt;div
        data-controller="timeline"
        data-timeline-close-other-items-value="true"
        data-timeline-closed-by-default-value="true"
      &gt;

      </code></pre>

      <p>Although it's less code, I prefer to be able to see and understand the generated code.</p>

      <p>I don't have to remember the parameters of the helper function, so there's less mental overhead.</p>

      <p>I can debug this easily as I can find the same code that's in the generated HTML.</p>

      <p>If I need to find <code>closed-by-default</code>, 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.</p>

      <h2 id="fewer-dependencies">Fewer dependencies</h2>

      <p>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.</p>

      <h2 id="less-code-to-maintain">Less code to maintain</h2>

      <p>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.</p>

      <p>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.</p>

      <h2 id="here%27s-the-thing">Here's the thing</h2>

      <p>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.</p>

      <p>The abstraction wasn't providing value and I prefer to keep the code as simple and easy to work on as possible.</p>

              
    summary: null
field_daily_email_cta: {  }