ES6過渡期のMithril入門 ④Polytheneでマテリアルデザイン (Polythene Examples編)

0) Mithrilの見た目を良くしたい。

ミニマリズムなクライアントサイドMVVMフレームワークMithril。
それゆえ、さまざまなデザイン系フレームワークと組み合わせることは容易なはず。
Bootstrapはもちろん、マテリアルデザインなPolymerとMithrilとの組み合わせなども、githubですぐに見つかる。

ただ、webコンポーネント周りはまだ仕様が流動的云々を耳にしているので、あまり深追いせずにまずはそこそこの見た目を確保したい。

といったところで、"Material Design for Mithril"というキャッチフレーズのPolytheneを発見。
https://github.com/ArthurClemens/Polythene

github上のスター数は少なめだが、ES6ベースのMithrilでもりもり開発されている模様。デモサイトの見た目にはあまり惹かれるものはなかったが、学習用途には最適と思い、導入してみる。

導入結果 (chrome上のスマフォエミュレータ上の画面例):

polytheneドキュメントサイト

コンポーネント別に実行例とコード例と共に学んでいける。
上のリストコンポーネントの実行例はこちら、コード例は以下:

es6

import list from 'polythene/list/list';

const myList = m.component(list, {
    header: {
        title: 'My header'
    },
    tiles: [
        m.component(listTile, {
            title: 'Ali Connors',
            info: 'Brunch this weekend?',
            icon: {
                type: 'large',
                src: 'app/list-tile/avatars/1.png'
            }
        })
    ]
});

Polythene-examples

1)Polythene Examplesを導入。

幸い、実行例は、Polythene Examplesとして、コードが公開されている:

指示にもとづきインストールし、ローカルで実行してみた:

git clone https://github.com/ArthurClemens/Polythene-examples
cd src
npm install
npm install fastclick --save #fastclickがないとエラーが出たため。
# http-serverが未インストールの場合 : npm install http-server -g
http-server . > server.log #参考のためにログをとっておく

localhost:8080でPolythene Examplesが立ち上がれば成功。

2) Polythene開発を支えるjspm

Polytheneのgithubでは、npmと並び、jspmでのインストールが推奨されている:

npm install -g jspm
jspm install github:ArthurClemens/Polythene
jspm install github:ArthurClemens/Polythene-theme

BabelがバンドルされES6ライフ向きと噂の、クライアント側のパッケージマネージャjspm。この機会に使ってみる価値ありと考え、jspmで始めるES6生活、を手始めに入門開始。とりあえず、jspmを使って管理していて、おもしろそうなソースコードをgithubから持ってくるが、ことごとく動かない。何か間違っているのか、あたりが悪いのか分からないが・・・いろいろと調べるうちに、JS界隈ではあまりメジャーになっていないjspmは、サーバ側の本番環境をJS以外で書きたい人にはけっこう向いているのではないかと思った。nodeのサーバ周りのJSが必要な時はnpmで、クライアント側のJSはjspmで、とりあえず頑張る、的な。

参考　Railsにjspmのっけて満足① 環境構築からとりあえずES6動かすまで

3) Polythene Examplesのコードで感じをつかむ。

以下のように、mithrilのmメソッド等を駆使し、コンポーネントの画面表示と振る舞い(動作)をまとめて、ひとつのファイルに書いていくのがPolytheneを使う流儀らしい。ソースコードはすべてES6。

引用元github.com/ArthurClemens/Polythene-examples/blob/master/src/app/list/list.es6.js

const sortByName = (a, b) => {
    if (a.name.toLowerCase() < b.name.toLowerCase()) {
        return -1;
    }
    if (a.name.toLowerCase() > b.name.toLowerCase()) {
        return 1;
    }
    return 0;
};
const sortByDate = (a, b) => {
    if (a.date < b.date) {
        return -1;
    }
    if (a.date > b.date) {
        return 1;
    }
    return 0;
};

（略）

    view: ctrl => {
        const sortList = () => ctrl.mode() === 'name' ? sortByName : sortByDate;
        const sortedList = ctrl.items.sort(sortList());
        return m('.demo-list.sortable-list',
            m('.controls-row',
                m('.controls.layout.horizontal',
                    m.component(button, {
                        tag: '.flex',
                        label: 'Sort by name',
                        selected: ctrl.mode() === 'name',
                        events: {
                            onclick: function() {
                                ctrl.mode('name');
                            }
                        }
                    }),
                    m.component(button, {
                        tag: '.flex',
                        label: 'Sort by date',
                        selected: ctrl.mode() === 'date',
                        events: {
                            onclick: function() {
                                ctrl.mode('date');
                            }
                        }
                    })
                )
            ),
（略）

4)感想

Polythene+mithrilは、業務系のツール作り等には使えそうな感じがした。
今後しばらく試してみたい。