Tiny component structure for web applications

Thank you to all the sponsors for this project:

Lucas Motta

→ Sponsor my open source work

$ npm install data-components --save

^{Or you can simply copy and paste the minified standalone version that lives under dist/}

• No need for a module bundler, it works in all browsers
• Zero dependencies
• No magic under the hood, see it for yourself
• Small (1.2 KB minified)

There are plenty of options to architect a web application out there but most of them often assume that you're working on a SPA. That alone will add a lot of stuff that you might not want at all. Data binding, custom messaging system and virtual DOM to name a few.

Sometimes you just need something simple to kick things off without having to worry about naming conventions and programming paradigms. That's how this library was born.

Let's implement the simplest todo list app.

<!-- Create our todo list element passing some initial values -->
<ul data-component="todo" data-values="foo,bar"></ul>

<!-- Let's use a input field to read the user input -->
<input data-component="input" placeholder="What to do?">

Ok, now that we have our markup in place, let's implement the application.

// Todo component
class Todo {
  constructor(el, options) {
    this.el = el;
    // Read from initial values
    this.todos = options.values.split(',');
    this.render();
  }

  // Add items to the list
  add(todo) {
    this.todos.push(todo);
    this.render();
  }

  // Render the list to the DOM
  render() {
    this.el.innerHTML = this.todos.map(todo => `<li>${todo}</li>`).join('');
  }
}

// User input component
class Input {
  constructor(el, options, sandbox) {
    const todo = sandbox.get('todo');

    // Submit value to "todo" component when hitting the enter key
    el.addEventListener('keydown', e => {
      if (e.keyCode === 13) {
        todo.add(el.value);
        el.value = '';
        el.focus();
      }
    });
  }
}

// Bootstrap components (UMD build exposes `components()`)
components({
  todo: Todo,
  input: Input
});

It works with just a few lines of code 🎉

Check out the demo page for a slightly more complex example.

For more detailed instructions on how the project works and how to use it, please check the user guide.

MIT © Rafael Rinaldi

Buy me a ☕