Don’t initialise Javascript automagically

The problem with looping over behavioural HTML attributes

Adam Silver
Jan 5, 2017 · 5 min read

I used to write Javascript that initialises components automagically. Don’t worry I’ll explain what I mean. Take a look below:

var datepickers = document.getElementsByClassName(‘datepicker’);
for(var i = 0; i < datepickers.length; i++) {
new DatePicker(datepickers[i]);
}

The technique works by looping over every element with a particular behavioural class name. If the Document contains the class name several times, the script creates several instances. With no Javascript changes at all. That’s the automagical bit.

Developers commend this technique because there’s only four lines of code. Less if using a library. And it never needs updating. If you want another date picker, just add a class of date picker. Job done.

This approach is problematic for many reasons. Here’s why:

1. It’s harder to understand the codebase at a glance

The loop doesn’t tell you how many date pickers there are. There could be a thousand instances or there could be one (or none) — in which case the loop is misleading. Either way you don’t know.

2. You might apply behaviour by accident

3. It’s difficult to estimate stories

4. It’s difficult to QA

5. It’s harder to debug

6. It’s harder to delete

7. It’s hard to determine behaviour

<div class="datepicker otherComponent" data-datepicker-attr="etc" data-datapicker-event="listener" data-othercomponent-attr="blah">

8. It’s painful to customise

I’ll give you an example. Imagine you have a form with two date pickers: a start-date and end-date.

When the user chooses a start-date, the end-date values update. This is to ensure the end-date is always after the start-date.

This is hard to define in HTML. In Javascript it’s easy:

var startDate = new DatePicker();
var endDate = new DatePicker();
startDate.on('changed', function() { endDate.whatever(); });

9. It’s painful to infer behaviour from HTML

10. It’s painful to override behaviour

11. It’s hard to destroy instances

12. It increases the chance of performance issues

Touching the DOM is expensive, which increases the risk of performance issues. The risk increases further when you have many components and many instances of a component.

13. It’s harder to unit test

14. It’s harder to initalise at different times

15. It exposes a security hole

16. It increases the size of HTML

“But I don’t want to update Javascript every time I want a new instance?”

“Is this necessary—it feels like code bloat?”

“But the Javascript will have a lot more code.”

“But let’s at least use it for simple components.”

“It’s easier for backend developers to add behaviour in HTML.

Summary

Good code is not about how easy it is to write the first time.

Good code is easy to reason about.

Good code is easy to update.

Good code is consistent.

Good code is easy to unit test.

Good code is easy to delete.

Bad code is easy to write but hard to delete. Bad code is magical. Magic is entertaining. Code shouldn’t be entertaining.

Automagical loops obfuscate complexity. They make things appear simple when they’re not.

Help future-you by writing Javascript that doesn’t suffer from these problems. HTML isn’t good at defining behaviour. But Javascript is.

Please ♥ the article if you found value in it.

If you sign up for my newsletter I’ll send you other articles about designing and developing simple, human and inclusive experiences on the web.

Simple = Human

Design, Development and Leadership articles written and…

Thanks to Jonathan Perry

Adam Silver

Written by

Author of Form Design Patterns and interaction designer focused on design systems and inclusive design.

Simple = Human

Design, Development and Leadership articles written and curated by Adam Silver & Mark Jenkins

Adam Silver

Written by

Author of Form Design Patterns and interaction designer focused on design systems and inclusive design.

Simple = Human

Design, Development and Leadership articles written and curated by Adam Silver & Mark Jenkins

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store