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:

1. Assumed the same as Mithril at this stage of development
2. With approperate shim
3. Angular 1.2.x supports IE8 without IE8 issue support
4. Angular 1.3.x supports IE9+
5. Angular 2.x will support modern browsers that auto update (IE11+)
6. Un-available. TodoMVC Pref needed
7. 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

Potential Implementations:

1. Rework Riot compiler to generate Mithril
2. Sweet.js -> MSX -> Mithril

Feedback

Add an issue to let me know if you support this idea or have other thoughts :-)

Byrnie name

Pronounced: [bur-nee], a byrnie is a scottish variant for coat of mail armour or hauberk

Logo

Licensing labeled for reuse with modification by Google images on 2015-01-29

License: MIT