duil = data + ui + loop

Latest Release - Documentation - Issues

duil (/ˈduəl/, like duel) is a simple JavaScript library for creating single page apps that react to changes in their underlying data. duil leverages the technologies you already know, like JavaScript and HTML, instead of making you learn a brand new syntax. With duil, you can create dynamic web pages with less code and cleaner abstractions.

Why?

You already know HTML and JavaScript, why should you learn a new syntax just to render templates and make components? You just need a something that updates when its data changes.

Getting Started

Download the latest release or include the following code on your page:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/duil.min.js"></script>

For NodeJS:

yarn add duil

Example

Here is a simple Hello World widget, taken from the React documentation:

var HelloMessage = new duil.Widget({
  $dom: $('<div>'),
  name: '',

  //@override
  render: function () {
    this.$dom.text('Hello ' + this.name);
    return this;
  }
});

HelloMessage.set({name: 'John'});
HelloMessage.set({name: 'John'}); // nothing new; no re-render

Let's walk through this example.

1. First, we construct a duil.Widget passing it the properties we want it to have.
2. Next, we add two properties: $dom which holds a <div> we'll be rendering to and name to hold the name to display.
3. We also add a method called .render() which will be called when any of the properties of the widget are changed using .set(). The actual rendering simply changes the text of the <div> to say "Hello" followed the name.
4. Last, we set the name of the widget to "John" which triggers a .render(). Note that if we had set name to the same thing it was already set to, it would not call .render() again.

Goals & Non-Goals

1. The goal of duil is to make it easy to write simple single page web apps.
2. Ease of use by the developer writing an app is a higher priority than insanely fast performance.
3. Use of well-established syntax beats newfangled shiny thing.
4. It is a non-goal to support very complicated web apps like Gmail and Google Docs.

Influenced By

• 2006: jQuery standardized DOM manipulation across browsers. This made controlling the DOM much more accessible and less fragile.

• 2008: PURE was one of the earliest examples I saw of using normal HTML for templating. It hooked into jQuery, but using the directives didn't feel quite right because I always ended up using jQuery to move around the DOM and set the data myself.

• 2011: D3 was my first exposure to data-driven visualizations and the idea that changes in data correspond to changes in what you see. Although you could use D3 for manipulating DOM nodes, it felt a little harder than jQuery.

• 2013: React popularized the idea of components that change when their underlying data changes. duil stems from this fundamental insight, but ditches the weird syntax.

License

Licensed under the MIT License.