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上のスマフォエミュレータ上の画面例)*: 
![mithril_polythene.jpg](https://qiita-image-store.s3.amazonaws.com/0/16455/b2c28b09-50d0-52d1-c6f3-75fe7a91224f.jpeg)

## polytheneドキュメントサイト

http://polythene.js.org

コンポーネント別に実行例とコード例と共に学んでいける。
上のリストコンポーネントの実行例は[こちら](http://arthurclemens.github.io/Polythene-examples/index.html#/list)、コード例は以下:

```js: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として、コードが公開されている:

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

```shell-session
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生活](http://qiita.com/ledmonster/items/6b4b44ccb72d5e48df9c)、を手始めに入門開始。とりあえず、jspmを使って管理していて、おもしろそうなソースコードをgithubから持ってくるが、ことごとく動かない。何か間違っているのか、あたりが悪いのか分からないが・・・いろいろと調べるうちに、JS界隈ではあまりメジャーになっていないjspmは、サーバ側の本番環境をJS以外で書きたい人にはけっこう向いているのではないかと思った。nodeのサーバ周りのJSが必要な時はnpmで、クライアント側のJSはjspmで、とりあえず頑張る、的な。

参考　[Railsにjspmのっけて満足① 環境構築からとりあえずES6動かすまで](http://qiita.com/junkjunctions/items/0b5fc028aa26e2bb3bbf)

#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は、業務系のツール作り等には使えそうな感じがした。
今後しばらく試してみたい。