dom99

Cyril Walle

1 Short Overview, 2 design decisions, 3 future

What is dom99

• tiny JavaScript framework
• focus on DOM
• declarative data binding
• custom elements
• open source

General Flow

1. HTML is extended with data-* attributes
2. The browser reads HTML and constructs the DOM
3. dom99 reads data-* attributes, prepares variables, event listeners ...
4. Application code can use what is prepared

Feature: Data Binding

<input data-variable="text">

<p data-variable="text"></p>

<input data-variable="myVariable">

<p data-variable="myVariable"></p>

d.feed("myVariable", "Hello Luxembourg");

d.get("myVariable");

Feature: Event Listener

<button data-function="doSomething"></button>

d.functions.doSomething = (event) => {

};

Feature: Custom Elements

<template data-template="underlined-title">
        <h2>
           <u>
                Schueberfouer !
           </u>
        </h2>
</template>

<underlined-title></underlined-title>

document.createElement("underlined-title");

Combine data-template with data-variable

<template data-template="underlined-title">
        <h2>
           <u data-variable="label">
                Schueberfouer !
           </u>
        </h2>
</template>

Other data-* attributes

• data-element
• data-list
• data-scope

Other features

• plugins
• encapsulation
• components

Design

• Extends the web
• No compilation steps

What is difference ?

<p>Hello</p>

const p = document.createElement("p");
p.textContent = "Hello";
document.body.appendChild(p);

• HTML parser async
• JS code compilation is blocking
• tooling
• speed

Minimal logic in data-attributes

Less powerful, separation of concerns, learning new syntax

No compilation steps required

js modules, html includes

Switched from getters and setters to explicit function

Object.defineProperty, new Proxy

Runtime warnings in dev mode

Polyfills as optional dependency

Future

Micro front ends

By default import a singleton

Now can also import factory

Framework

More guidance, structure, patterns

create-dom99-app

Community

Tutorials, talks, ...

Browser support

• Chrome
• Samsung Internet
• Firefox
• Opera
• Safari
• Edge
• Internet Explorer 9+

Downloads

dom99 available on npm and github

Thanks, Questions

Github dom99