CoreCMP

CoreCMP is a framework to create web apps based on HTML and CSS

How it works

The idea behind CoreCMP is to create a tree construct that describes a web app. A tree does not represent the final page, it is more like a blueprint of a page structure.

Lets start with a simple example.

We want to render a todo list as follows

<div class="todo">
  <div class="editor">
    <form class="create-form">
      <input class="create-input" type="text" size="200">
      <button class="submit-button">Add item</button>
    </form>
  </div>
  <div class="listing">
    <ul class="todo-list">
      <li class="todo-item">
        <span class="item-id">001</span>
        <span class="item-title">First todo item</span>
        <span class="item-status">open</span>
      </li>
      <li class="todo-item">
        <span class="item-id">002</span>
        <span class="item-title">Second todo item</span>
        <span class="item-status">progress</span>
      </li>
      <li class="todo-item">
        <span class="item-id">003</span>
        <span class="item-title">Third todo item</span>
        <span class="item-status">done</span>
      </li>
    </ul>
  </div>
</div>

In CoreCMP topic, this means we create a class for each Node. Don't worry, it sounds lots of work, but it isn't. First lets break the structure down to a simple tree.

Todo
  Editor
    CreateForm
      CreateInput
      SubmitButton

  Listing
    TodoList
      ItemId
      ItemTitle
      ItemStatus

This would be our tree structure. Each html node has become a tree item. It is not necessary to repeat a list of nodes in the tree structure. This will be done during the rendering process.

Next, we create a class of each of the tree's node and connect them so that we get a tree like in the example above.

A CoreCMP class is a javascript class which describes one node of the structure tree.

Lets take the last node first.

class ItemStatus extends Node {
  create () {
    this.tag = 'span'
  }

  render (data) {
    return this.createNode(data.status)
  }
}

Here we go, the first node class is done. Lets go through the class. The class name is identical with the tag's css class. ItemStatus <=> item-status CoreCMP uses the class name to generate a snake cased css class name. (There is an option to define an additional class name.) The class has two methods. create() creates a tree node and describes the node itself and render() renders the node and returns it as html. The call to createNode() is important, it creates the html node and introduces it into the tree.

If we call the node it renders a html tag.

const node = new ItemStatus()
const html = node.render({
  status: 'open'
})

// html == <span class="item-status">open</span>

Next, add ItemID and ItemTitle node.

class ItemId extends Node {
  create () {
    this.tag = 'span'
  }

  render (data) {
    return this.createNode(data.id)
  }
}

class ItemTitle extends Node {
  create () {
    this.tag = 'span'
  }

  render (data) {
    return this.createNode(data.title)
  }
}

Lets go one level up, the TodoList node, which contains the three node we already created. The TodoList node extends the internal List class which renders a <ul> <li> list.

class TodoList extends List {
  create () {
    this.childNodes(ItemId, ItemTitle, ItemStatus)
  }
}

The method childNodes() defines a node's child node(s). It adds 1 or more node classes (Not instances!). If we call render() we get the node's html.

The class TodoList has its own render() method, we do not overwrite it here. A list's render() method expects an array of objects as its argument. It walks through the array and creates one instance of the child node(s) for each array element wrapped by <li class="list-item"></li>

const node = new TodoList()
const html = node.render([{
  id: '001',
  title: 'First todo item',
  status: 'open'
}, {
  id: '002',
  title: 'Second todo item',
  status: 'progress'
}, {
  id: '003',
  title: 'Third todo item',
  status: 'done'
}])

The rendered html:

<ul class="todo-list">
  <li class="list-item">
    <span class="item-id">001</span>
    <span class="item-title">First todo item</span>
    <span class="item-status">open</span>
  </li>
  <li class="list-item">
    <span class="item-id">002</span>
    <span class="item-title">Second todo item</span>
    <span class="item-status">progress</span>
  </li>
  <li class="list-item">
    <span class="item-id">003</span>
    <span class="item-title">Third todo item</span>
    <span class="item-status">done</span>
  </li>
</ul>

The Listing class is a container for the TodoList.

class Listing extends Node
  create () {
    this.childNodes(TodoList)
  }

The tag property and render() method is not necessary here. It is defined in the Node core class.

Default tag: div

Render method default:

render (data) {
  return this.createNode(data)
}

The Editor element, a html form to add new items. Lets do it all at once, we go through the tree from the end up to Editor.

Editor
  CreateForm
    CreateInput
    SubmitButton

class CreateInput extends Node {
  create () {
    this.tag = 'input'
    this.isVoidTag = true // Avoid rendering a closing tag
  }
}

class SubmitButton extends Node {
  create () {
    this.tag = 'button'
  }

  render (data) {
    return this.createElement('Add item') // Use a string as data
  }
}

class CreateForm extends Node {
  create () {
    this.tag = 'form'
    this.childNodes(CreateInput, SubmitButton)
  }
}

class Editor extends Node {
  create () {
    this.tag = 'form'
    this.childNodes(CreateForm)
  }
}

Last node! The Todo node, our root node.

class Todo extends Node {
  create () {
    this.childNodes(Editor, Listing)
  }
}

Lets test it.

const node = new Todo()
const html = node.render([{
  id: '001'
  title: 'First todo item'
  status: 'open'
},{
  id: '002'
  title: 'Second todo item'
  status: 'progress'
}, {
  id: '003'
  title: 'Third todo item'
  status: 'done'
}])

The rendered html is the same as the first example above.