はじめに

明けましておめでとうございます。
今年もよろしくお願いいたします。久しぶりの更新です。
表題の通り、mithril.js v1.0が遂にリリースされました。
もうワクワクが止まりません！
色々機能が増えたり、動作が変わっていたりしているので、変更点を紹介してみます。

変更点

ここを参照
Change log - Mithril.js

m.propが削除され、streamに変更へ
- ここはどうなるか心配していましたが、セッターゲッターのシンプルな動作はそのままで、より高性能になった。
- 例えば、エクセルのセル数式のように、文字列を繋げたり、A1 + B1 = C1のような数字の合計表示しA1が更新されるとC1の結果も変わるようなことなど、応用が利くようになったみたい。
m.componentの削除
- m()で出来るので、特に影響はない。
config機能拡張
- configは後処理のみだったが、domを生成する前、後、などのライフサイクルが出来、より細かく指定できるようになった。
- 合わせてコンポーネントのcontrollerではなく、ライフサイクルの同じ動作をするoninitを指定することになった。
- m.routeもconfigを使っていたが、oninitやoncreateと書き換える必要がある。
再描画システムの動作が変更
- 読み間違いでなければ、今までシステムが独自のタイミングで再描画を判定していたが、不具合も多かったため、原則常に再描画してくれるようになった。
- m.startComputation()とm.endComputation()もv1.0になるタイミングで機能削除。
- 再描画したくない場合は、イベントオブジェクトに対して、e.redraw = falseを記載すればいいとのこと。
コンポーネントの引数の変更
- 引数がvnodeというオブジェクトを統一になった。
- 引数(hoge)を渡した場合は、vnode.attrs.hogeと書くことで、参照することができる。書くのが少し面倒になった分、わかりやすくなったかもしれない。
viewの引数の渡し方の変更
- vnodeの統一のおかげで、今までcontrollerで宣言した変数はctrl.hogeのようにかけていたが、今回からvnode.state.hogeのように書くことになった。
- oninitやoncreateとライフサイクル毎に宣言したものが、vnode.stateになったという意味となる。
- つまり、外部からの引数は、vnode.attrs.hogeと書き、内部の変数は、vnode.state.fugaと書き分けることが出来るようになった。んー、わかりやすい！！！！
コンポーネントのラッピング
- m("div", component)と昔書けていたのを、書き方統一のために、m("div", m(component))と常に書くようになった。
- ここはm()で包まなくてもいいの？という疑問がなくなる分、良いと思う。
m.mount() と m.route()を実行する際の第二引数は、vnode経由になった
- 一件難しいように見えるが、要は、省略型コンポーネントで書かずにちゃんと、コンポーネントにviewやoninitと書いておけば良いということ。
m.route.mode
- ラウトモードが書きやすくなり、m.route.mode = "pathname"やm.route.mode = "search"がm.route.prefix("")、m.route.prefix("?")と書けるように。他にも機能があるみたい。
m.routeの読み書きの機能が分断
- m.route.get()とm.route.set("/other/route")と書き方が変わった。
ラウトパラメータの参照方法追加
- vnode経由でアクセスできるようになった。今まではm.route.param("attr")だったところをvnode.attrs.attrでも参照できるようになった。
アンマウント防止
- ここはあまり使ったことがないが、説明では、onunload時にe.preventDefault()を実行して、アンマウントを防止していたがそれが出来なくなったそうだ。
- 代わりにm.route.set(“/”)と明示的に記載すれば、今まで通りの動きになるという。
コンポーネット削除時の処理実行方法
- controllerにthis.onunloadと引っ掛けて処理をしていたが、ライフサイクルが出来たため、それがonremoveと簡単に書けるようになった。
m.requestの動作
- 描画タイミングでいくつかの動作がサポートされなくなった。その代わりpromise関数チェーンが動作完了すれば、常に再描画することになったようで、困ることはないみたい。
m.deferred削除
- promiseを使えば解決できるため、削除。
m.sync削除
- Promise.allと同等の動きであるため、削除。
xlinkの名前空間が必要になった
- 名前空間が完全サポートされるようになったため、m("image[xlink:href='image.gif']")などと明示的に書く必要がある
ネストされた配列
- 1.0からは構造を保持するようになった。
vnodeのチェック動作
- view外部でコンポーネットのインスタンスを作成してしまうと、vnodeがコンポーネントのチェックが出来なくなり、トリガーなどが動かなくなる場合がある。
- チェックの動作を正常に動かしたい場合は、コンポーネットはviewで呼び出すようにする必要がある。

まとめ

と、胡散臭い翻訳と個人的な意見を書いています。
間違いがあれば指摘していただけると幸いです。

翻訳してみて、やはり1.0だけあって、今までの機能がより一層洗練された印象があります。
今までの機能は姿形は変われど、動作は変わっていない部分があるため、追加機能よりも、
まずは動作は変えずに1.0用に書き換えてみたりするのが良いかと思います。
それだけでもソースコードが見やすくなると思います。
そこから、追加機能を試していくとよいかと。

最後に

最後に超簡単な簡単なサンプルを用意しました。
期待しないでください。簡単なhelloworldと入力ボックスがあるだけです。
https://github.com/xheimdal/mithriljs-sample-code
mithril-v1.0を使用すれば良いです。
electron+mithril.jsなので、electronのインストールを忘れずに、
過去の記事を参考にしてもらえば、すぐにできると思います。

heimdal.hatenablog.com

では、改めて今年もよろしくお願いいたします。

はじめに
mithril.jsについて
- モデル
まとめ
参考

はじめに

仕事や趣味で、web関連の技術を学びたい時、html + cssあたりを攻めていきますが、
より柔軟に動きを持たせたければ、html + css に加えて、javascriptを学習し始める必要が出てくる。
javascriptの入門サイトを見たりしりしていると、jqueryが気になり始めて、jqueryを触り始める。
web系を調べていくうちに、Angular.js、React.jsのフレームワークに行きつくような気がする。

web系を調べるたびに考えるが、web系の技術を学ぶには、大量の言語を組み合わせる必要があるから大変だ。。。orz
種類も日々増えて行くので、追いつけない。書き方も様々だ。フレームワークといえば、特定の型(書き方)にそってコードを書いていけば、
少ないコードで色々動いてくれるものだと思っている。
だから、フレームワークを一つ覚えておけば、良い気がする。最初は大変だが書き方を覚えてしまえば、型にはまった書き方ができるので、
スラスラ開発。。できるはず！！！

heimdalの技術ノート

IT全般、Linux、Windows、プログラミング開発など、何でもござれ

mithril.js v1.0が出たぞ！！！ついでに変更点を紹介してみた。

はじめに

変更点

まとめ

最後に

electronを使ってmithril.js 超入門 m.route編

はじめに

準備

electronを使ってmithril.js 超入門 m.prop m.withAttr編

はじめに

m.propとは

electronを使ってmithril.js　超入門

はじめに

mvcモデル初心者なのにmithril.jsが気になる

はじめに