Streamlining DOM Manipulation: The Power of bind in Svelte

Introduction

Prior to the introduction of modern web frameworks, developers would use query selectors to manipluate the DOM. While this approach certainly works, it can result in code that unwiedly and difficult to maintain. Modern frameworks have made working with the DOM simpler. Having said, that not all frameworks are equal when it comes to the ease of use for manipulating the DOM.

Svelte’s bind Feature: A Revolution in Data Binding

Svelte’s bind feature is a native part of the framework, offering a seamless and concise way to connect data and the DOM. This eliminates the need for explicit DOM manipulation, resulting in more readable and efficient code.

Here’s a simple example in Svelte:

<script>
  let name = 'world';
</script>

<input type="text" bind:value={name}>
Hello {name}!

In Svelte you can simply bind to any valid HTML attribute. In this example, we create a variable name and bind it to the value attribute of the input element. As the user updates the value, using the text input, that value is automatically synchorized with the name variable.

Here’s the equivalent example in React:

import { useState } from 'react';

export default () => {
  const [name, setName] = useState('world');

  function handleChange (event, setValue) {
    const { value } = event.target;
    setValue(value);
  };

  return (
    <div>
      <input type="text" value={name} onChange={(e) => handleChange(e, setName)} />
      <p>Hellow = { name } </p>
    </div>
  );
}

While the React example isn’t too bad, it certainly contains more code than the Svelte example. As you can see, you have to listen to the onChange event, and then set the state using the useState hook.

Here’s another example, this time setting the focus for a text element, based on a user action.

First the Svelte example:

<script>
  let input;

  function focusInput() {
    input.focus();
  }
</script>

<div>
  <h2>Focus Input Field</h2>
  <input bind:this={input} type="text" placeholder="Enter text" />
  <button on:click={focusInput}>Focus Input</button>
</div>

Here we use bind:this which binds the variable named input with the text input element. As you can see this is quite simple. We can use bind:this with any valid HTML element.

Now for the React example:

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <h2>Focus Input Field</h2>
      <input ref={inputRef} type="text" placeholder="Enter text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

export default FocusInput;

Again, while the React example isn’t overly complex, it requires more code. In particular, we must use the useRef hook in order for React to interact with the DOM.

If we combine the two examples together, you’ll see all of the extra code adds up. Not only is it more to type, but there’s more to reason with as well.

import React, { useRef, useState } from 'react';

function NameAndFocusInput() {
  const inputRef = useRef(null);
  const [name, setName] = useState('world');

  const handleFocus = () => {
    inputRef.current.focus();
  };

  const handleChange = (event) => {
    const { value } = event.target;
    setName(value);
  };

  return (
    <div>
      <h2>Name and Focus Input</h2>
      <input
        ref={inputRef}
        type="text"
        value={name}
        onChange={handleChange}
        placeholder="Enter text"
      />
      <button onClick={handleFocus}>Focus Input</button>
      <p>Hello = {name}</p>
    </div>
  );
}

export default NameAndFocusInput;

And now in Svelte:

<script>
  let name = 'world';
  let input;

  function focusInput() {
    input.focus();
  }

  function handleChange(event) {
    name = event.target.value;
  }
</script>

<div>
  <h2>Name and Focus Input</h2>
  <input bind:this={input} type="text" value={name} placeholder="Enter text" on:input={handleChange} />
  <button on:click={focusInput}>Focus Input</button>
  <p>Hello = {name}</p>
</div>

Conclusion

Svelte’s bind feature makes working with DOM elements easy. It’s rather intuitive and straight forward, and requires both less code and cognitive load than other frameworks, such as React. That doesn’t mean other frameworks are bad, but Svelte is, in my opinion, unquestionably better in this regard. It allows you to focus on what is important, which in this case is creating great features.