最近、ReactやVueなどのビューエンジンに人気が集まっています。双方向更新が可能で、データをアップデートすれば自動的にUI側も更新されます。これにより、DOM周りのステータス管理から解放されるようになります。
今回紹介するMavoもビューエンジンですが、半分ロジックも加わったような作りになっています。

Mavoの使い方

基本はJavaScript/スタイルシートを読み込むだけです。

<script src="https://get.mavo.io/mavo.js"></script>  
<link rel="stylesheet" href="https://get.mavo.io/mavo.css">  

サンプルです。以下のようなコードを書きます。

<main mv-app="portfolio" mv-storage="https://github.com/mavoweb/data/portfolio"><br><header><br><h1><a href="http://julesmuck.com"><img src="http://julesmuck.com/wp-content/uploads/2016/04/mucklogoBLCK.png" alt="Jules Muck" class="logo"></a></h1>
<br></header><br><br><div>
<br><a property="painting" typeof="Painting" mv-multiple mv-attribute="none"><br><img property="image"><br><p property="name" mv-default="[readable(to(filename(image), '.'))]"></p>
<br></a><br>
</div>
<br><br><footer>All art belongs to the awesome <a href="http://julesmuck.com">Jules Muck</a>, used here with permission.</footer><br></main>  

そうすると以下のような表示になります。画像部分が繰り返し処理されています。

さらに別なサンプルです。若干長いです。

<main mv-storage="local" class="mv-autoedit" mv-app id="decisions"><br><article property="decision" mv-multiple><br><header class="answer-[answer]"><br><h1 property="decision">Should I go to the party?</h1>
<br><br><p><br> Answer: <span property="answer">[if(score &gt; 0, Yes, if(score !<br> (score: <span property="score">[sum(pro.weight) - sum(con.weight)]</span>)<br></span></p>
<br></header><br><br><section><br><h2>[count(pro)] pro(s)</h2>
<br><ul>
<br><li property="pro" class="weight-[weight]" mv-multiple mv-accepts="con">
<br><p property="argument">Fun with friends!</p>
<br><p><br> Weight:<br><meter property="weight" min="1" value="1" max="5"></meter><br> [weight]<br></p>
<br>
</li>
<br>
</ul>
<br></section><br><br><section><br><h2>[count(con)] con(s)</h2>
<br><ul>
<br><li property="con" class="weight-[weight]" mv-multiple mv-accepts="pro">
<br><p property="argument">I have tons of work to do.</p>
<br><p><br> Weight:<br><meter property="weight" min="1" value="1" max="5"></meter><br> [weight]<br></p>
<br>
</li>
<br>
</ul>
<br></section><br></article><br><br><footer>Total: [count(score &gt; 0)] “yes” decision(s) and [count(score <br></footer></main>  

こんな感じの投票ツールになります。もちろんボタンを押すと反応があります。

その他のサンプルです。カラーピッカー。

請求書。

スライダー連携。

Mavoの特徴としてはHTMLとスタイルシートだけでWebアプリケーションを作っているということでしょう。JavaScriptの記述はありません。Mavo特有の慣れは必要と思われますが、デザイナーの方でも使いこなせるビューライブラリになりえるのではないでしょうか。

MavoはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Mavo: A new, approachable way to create Web applications
mavoweb/mavo: Create web applications entirely by writing HTML and CSS!