AxeumVisual Framework

AxeumVisual Framework solves the reconciliation (diff) algorithm performance issues that modern virtual-DOM javascript frameworks have by using a built-in templating language. The templating language is interpreted once during a component's initialization to provide instructions for how the component should update imperatively while allowing the code to be written declaratively. This allows changes in state to update the DOM without calling the render() function and running a reconciliation algorithm.

Example Todo List App

import AV from 'axeum-visual'


class TodoList extends AV.Component {
    constructor(props, context) {
        super(props, context)
        this._.class = "TodoList"
        this._.id = "EXAMPLE1"
        this.App = this.context.create('App')
        this.rootClass = [this._.class]
        this.App.set('todoListItems', [
            {
                'title': 'first thing'
            },
            {
                'title': 'second thing'
            },
            {
                'title': 'third thing'
            }
        ])
    }
    onMount() {
        this.button.on('click', this.addToList)
    }
    addToList() {
        this.App.add('todoListItems',
            {
                'title': this.input.val()
            }
        )
    }
    render($) {
        return (
            <div class={$`rootClass|joinSpace`}>
                <div class="tools">
                    <input type="text" placeholder="New item..." ref="input" />
                    <button ref="button">Add</button>
                </div>
                <div class="list">
                    {$`if App.todoListItems.length`}
                        <div class="hasItems">
                            {$`for index, item of App.todoListItems`}
                                <TodoListItem index={$`index`} data={$`item`} />
                            {$`endfor`}
                        </div>
                    {$`else`}
                        <div class="noItems">
                            No items.
                        </div>
                    {$`endif`}
                </div>
            </div>
        )
    }
}


class TodoListItem extends AV.Component {
    constructor(props, context) {
        super(props, context)
        this._.class = "TodoListItem"
        this._.id = "EXAMPLE2"
        this.App = this.context.use('App')
        this.rootClass = [this._.class]
    }
    onMount() {
        this.removeButton.on('click', this.removeItem)
    }
    removeItem() {
        this.App.todoListItems.splice(this.index, 1)
        this.App.set('todoListItems')
    }
    render($) {
        return (
            <div class={$`rootClass|joinSpace`}>
                <span>{$`data.title`}</span>
                <span ref="removeButton">(x)</span>
            </div>
        )
    }
}


AV.init(TodoList, '#root')

Notes

// there is a purpose for a full reconciliation algorithm for specific use cases; one can be implemented in this framework // todo - explain more about specific use cases

TODO

// TODO - explain separation of concerns // TODO - explain context api // TODO - explain templating language // TODO - explain styling and scoping

MIT License

Copyright (c) 2021 ed4553ddaf88858322df848ab6c4551a98b263dd4f32da6676c353cd86727cdb