Byrnie NPM | npm.io

Byrnie

Weaving Mithril into beautiful components

Weaving the safe, lightning speed and robust brillance of Mithril with the syntax sugar and integration freedom of Riot to help you journey beyond the mordor shadows of current web realities to the component hopes of the future.

Tool Overview

Area	Byrnie	Mithril	Riot	React	Polymer	Vue	Angular
Weight minified	16k*1	16k	5k	127k	120k	18k	49k
Virtual DOM	Yes	Yes	Yes	Yes	No	No	No
Compatibility	IE6+2	IE6+2	IE8+2	IE8+	IE10+	IE9+	IE83, IE94, IE11+5
Binding	choice	choice	choice	one-way	two-way	two-way	two-way
Load Speed	0.28ms1	0.28ms	n/a6	25ms	n/a6	n/a6	7.5ms
TodoMVC	127ms1	127ms	594ms	820ms	n/a6	259ms	1,742ms
Template Safety	Yes1	Yes	n/a7	n/a	n/a	n/a	No

A quick overview. Corrections and clarifications are welcome :-)

Notes:

Assumed the same as Mithril at this stage of development
With approperate shim
Angular 1.2.x supports IE8 without IE8 issue support
Angular 1.3.x supports IE9+
Angular 2.x will support modern browsers that auto update (IE11+)
Un-available. TodoMVC Pref needed
Dependent upon at least the

Syntax

Include Byrnie

<script src="byrnie.min.js"></script>

Include byrnie template

<script src="byrnie.min.js" type="text/x-byrnie"></script>

Basic template

<todo>
  <div>
    <input onchange={m.withAttr("value", app.vm.description)} value={app.vm.description()}/>
    <button onclick={app.vm.add}>Add</button>
  </div>
</todo>

Gets transpiled to MSX:

todo.view = function() {
    return <div>
        <input onchange={m.withAttr("value", app.vm.description)} value={app.vm.description()}/>
        <button onclick={app.vm.add}>Add</button>
    </div>
};

Then compiled to Mitril:

todo.view = function() {
    return m("div", [
      m("input"),
      m("button", "Add")
    ]);
};

Add View-Model

<todo>
  <template> // optional, but improves clarity. Maps to Mithril view
    <span>I'm <b>my-element</b>. This is my Shadow DOM.</span>
    <core-ajax url="http://example.com/json" auto response="{{resp}}"></core-ajax>
    <textarea value="{{resp}}"></textarea>
  </template> // optional, but improves clarity

  <script> // optional, but improves clarity. Maps to Mithril View-Model
    vm.list = new todo.TodoList();

    //a slot to store the name of a new todo before it is created
    vm.description = m.prop("");

    //adds a todo to the list, and clears the description field for user convenience
    vm.add = function(description) {
        if (description()) {
            vm.list.push(new todo.Todo({description: description()}));
            vm.description("");
        }
    };
  }
  </script> // optional, improves clarity
</todo>

Script gets wrapped in standard View-Model

todo.vm = (function() {
    var vm = {}
    vm.init = function() {
      // script code here
    }
    return vm
}())

Template to specific namespace

<script data-ns="myhome" src="byrnie.min.js"></script>

Mount to specific object

Var B = {}
Byrnie.scope('todo', B)

### One time render

```js
Byrnie.render(document, todo) // same as m.render(document, todo.view())
Byrnie.render('element-id', todo) // same as m.render(document.getElementById('element-id', todo.view()))

Auto refresh

Byrnie.module(document, {controller: todo.controller, view: todo.view}) // same as m.module(document, {controller: todo.controller, view: todo.view})Â
Byrnie.module(document, todo) // todo must have .controller and .viewÂ

Shadow DOM (-: not to be confused with Virtual DOM :-)

<todo>
  <style>
    .button { border: 1px }
  </style>

  <button class="button" onclick={app.vm.add}>Add</button>
</todo>

Gets emulated as Shadow DOM and gets transpiled to MSX until a living standard:

todo.view = function() {
    return <div>
      <style scoped> <!-- W3 compilance -->
        .todo-button { border: 1px }
      </style>
        <input onchange={m.withAttr("value", app.vm.description)} value={app.vm.description()}/>
        <button class="todo-button" onclick={app.vm.add}>Add</button>
    </div>
};

Etc