Reactが導入したVirtualDOMという概念はあっという間に他のフレームワークにも影響を及ぼしていきました。最近では Webコンポーネントにも関連して、小さなパッケージを組み合わせる方法が主流になっています。 今回紹介するMarkoもそんなフレームワークの一つです。特に高速な動作がポイントになっています。

Markoの使い方

Markoの例です。クラスとスタイル、そしてHTMLの3つを組み合わせます。

class {
    onCreate() {
        this.state = { count:0 };
    }
    increment() {
        this.state.count++;
    }
}
 
style {
    .count {
        color:#09c;
        font-size:3em;
    }
    .example-button {
        font-size:1em;
        padding:0.5em;
    }
}
 
<div .count>
    ${state.count}
</div>
<button .example-button on-click('increment')>
    Click me!
</button>

これでできあがるのはクリックでカウントがアップしていくWebアプリケーションです。

クリックすると数字がインクリメントされていきます。

HTMLと、Hamlに似た記述のどちらかが選択できます。

Markoはパフォーマンスを重視しており、React/Angular/Vue/Infernoと比べて一番パフォーマンスが高くなっています。サーバサイド、クライアントサイドのどちらでも使えるのが利点となっています。

eBayが開発しているので、開発継続性は問題なさそうです。Reactは便利な反面、速度が気になるのでMarkoで解決できるかも知れません。

Markoはnode/JavaScripts製のオープンソース・ソフトウェア（MIT License）です。

Marko marko-js/isomorphic-ui-benchmarks: Client/server benchmarks for various UI libraries