A Unified Theory
of Web Development.

npx adom-js create my-app
cd my-app
npm install
npm run dev

What is A-DOM?

A-DOM is a radical re-imagining of the modern web development experience.

tag Counter [
  let count = 0
  button on:click='count++' [
    'count: {{count}}'
  ]
]

let name = 'seeker' | toupper

html [
  head [
    title 'Welcome to A-DOM'
  ]
  body [
    h1 'Hello, {{name}}'
    Counter []
  ]
]

A-DOM can be seen as both a compiler-oriented reactive framework, as well as a server side templating engine with reactive components.

A-DOM began life over four years ago as a meager attempt to create an alternative syntax for HTML, similar to Pug for Node.js or Haml for Ruby on Rails, except without the whitespace sensitivity. In templating engines like these, all data declaration, control flow expressions, and interpolations are written in the host language. In the case of Pug, that host language would be Javascript. This means that Pug files written for Node.js would be incompatible with, say, a Ruby-based Pug engine. These engines also have no client-side functionality whatsoever.

The problem with modern compiler-oriented reactive frameworks is that they don't generate HTML by default, requiring a complicated build process that is usually completely opaque and highly abstract. Modern frameworks universally rely on Javascript for generating HTML server side, which leads to a metastatic explosion of complexity. And while modern meta-frameworks are doing a good job of reigning in this complexity, the consequence is that fewer and fewer people are able to understand how their applications actually function.

A-DOM overcomes these issues by defining and implementing all semantics related to rendering, and directly generating HTML from an intermediate format. During this process A-DOM generates a declarative Javascript runtime that is included directly in the HTML, so you can write natural and clutter-free reactive components, that have minimal cognitive overhead.

export tag Todo [
  let item = ''
  let items = []
  ---
  function addItem() {
    items.push(item)
    item = ''
  }
  ---
  input bind:value={item} []
  button on:click='addItem()' 'add item'
  ul [
    each (i in items) [
      li '{{i}}'
    ]
  ]
]