ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近、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">
    <header>
        <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>
    </header>

    <div>
        <a property="painting" typeof="Painting" mv-multiple mv-attribute="none">
            <img property="image" />
            <p property="name" mv-default="[readable(to(filename(image), '.'))]"></p>
        </a>
    </div>

    <footer>All art belongs to the awesome <a href="http://julesmuck.com">Jules Muck</a>, used here with permission.</footer>
</main>

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

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

<main mv-storage="local" class="mv-autoedit" mv-app id="decisions">
    <article property="decision" mv-multiple>
        <header class="answer-[answer]">
            <h1 property="decision">Should I go to the party?</h1>

            <p>
                Answer: <span property="answer">[if(score > 0, Yes, if(score < 0, No, Maybe))]</span>!
                (score: <span property="score">[sum(pro.weight) - sum(con.weight)]</span>)
            </span></p>
        </header>

        <section>
            <h2>[count(pro)] pro(s)</h2>
            <ul>
                <li property="pro" class="weight-[weight]" mv-multiple mv-accepts="con">
                    <p property="argument">Fun with friends!</p>
                    <p>
                        Weight:
                        <meter property="weight" min="1" value="1" max="5"></meter>
                        [weight]
                    </p>
                </li>
            </ul>
        </section>

        <section>
            <h2>[count(con)] con(s)</h2>
            <ul>
                <li property="con" class="weight-[weight]" mv-multiple mv-accepts="pro">
                    <p property="argument">I have tons of work to do.</p>
                    <p>
                        Weight:
                        <meter property="weight" min="1" value="1" max="5"></meter>
                        [weight]
                    </p>
                </li>
            </ul>
        </section>
    </article>

    <footer>Total: [count(score > 0)] “yes” decision(s) and [count(score < 0)] “no” decision(s)</footer>
</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!

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2