You don’t always have to use Javascript for User Interactions
Recently I read a StackOverflow question that I couldn’t answer.
That is to say, I had an answer that I wanted to write, but I couldn’t. The poster had a React question: given two components, with a button in one component and a text input in the other, how could you write an onClick event on the button that would put focus on the input? The one answer the question had rightly suggested useRef as the glue that would connect the two elements, with the reference created in the parent and passed in to the components.
This approach does work. Clicking on the button will put focus on the input as expected. But, it uses Javascript to create the functionality. Now, you may be thinking to yourself: “This is a React app and is already using Javascript to create its functionality; why not use an onClick event handler?” The reason is that each event, prop, etc adds to the surface area of your app, adds responsibilities to it, and introduces potential breaking points… even more so if you want to maintain full test coverage, since you’d need to add tests for the onClick event and also for the onFocus expectation.
So, if we boil down the problem, what we want is an input that when clicked on puts focus on another input. What if I told you that HTML supplies that natively, with no Javascript? It’s called the label element, and that’s actually exactly what it’s used for. If we use a label instead of a button, this is how we can rewrite our app:
This was a very simple application, and already you can see that the second example is a lot easier to read. Furthermore, we were able to remove a dependency, and reduce the complexity and scope of responsibilities in the system.
HTML has a lot of elements that provide interactivity with zero Javascript. For instance, there’s an anchor tag (<a>) that when clicked on relocates the user to a new page URL. That sounds sarcastic, but in more than one review I’ve seen developers use Javascript to achieve this. When HTML5 was first released back in 2014, it included a <summary> + <details> combination of tags, that when clicked on would toggle between showing or hiding the details section of its content. Back then only Chrome had an implementation which made it unusable without a polyfill, but support for it has greatly improved recently, so it may be worth giving another look. Client-side form validation also got a big boost with HTML5, with the addition of the maxlength attribute on textareas, the required attribute, and new input types like number and email.
CSS also makes it possible to achieve certain effects without needing Javascript. Most people are aware of the :hover state selector that lets you make style changes to elements on mouseover, but there’s also similar selectors for :focus, :active, and others.
Please don’t misunderstand me: I’m a huge fan of Javascript — it’s one of the things that drew me away from print media design to web development in the first place. But, I’m also a fan of keeping things simple, and using the right tool for the job. Just remember when you’re working on a new project, and you reach for your trusty hammer, that maybe a stapler would be more appropriate :)
