Marko - eBayでも使われている軽量フロントエンドフレームワーク
仮想DOMの登場によって、フロントエンド開発時に状態(ステート)を管理する必要がなくなりました。変数を更新さえればすれば、後は仮想DOMの方で表示を更新してくれます。この画期的な考えにより、多くのフロントエンドフレームワークが仮想DOMを利用しています。 今回紹介するMarkoもそんなフレームワークの一つです。特徴は他と比べて軽量、かつ高速に動作することでしょう。
Markoの使い方
Markoのコードです。シンプルで分かりやすい印象です。
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>
Markoの特徴はまず軽量であることです。Gzip圧縮して10KB以下となっています。シンプルなHTMLとスタイル、JavaScriptの構成になっているのもよさそうです。アニメーションであっても60FPSでこなすくらい快適に動作します。Inferno/Preact/React/Vueと比べても高速です。eBayでも使われており、安定性も申し分なさそうです。
MarkoはJavaScript製のオープンソース・ソフトウェア(MIT License)です。
Marko marko-js/marko: A declarative, HTML-based language that makes building web apps fun