Mithrilの紹介/Introduce of Mithril

Mithril の紹介 A Javascript Framework for Building Brilliant Applications esm_LT
2017-03-03 村上雅彦 @fossamagna

村上雅彦 a.k.a @fossamagna 株式会社永和システムマネジメント IT サービス事業部所属 2

Mithril を知ってますか? 3

Mithril SPA 向けのクライアントサイドのJavaScript フレームワーク 4

Mithril の特徴シンプルなAPI サイズが小さい(gzip で < 8kb) パフォーマンス高い VirtualDOM
ラウターもある依存ライブラリがない IE9 までサポート(poly ll は必要なし) 5

Mithril のバージョン最新は1.0.1 (2017-02-09) 0.2.5 (2016-05-27) 以前とは互換性がない部分があるので、そのままではまず動かない。
0.2.x からはマイグレーションガイドを見て1.0.x に移行しましょう。 6

Mithril のバージョン最新は1.0.1 (2017-02-09) 今日はここ。 0.2.5 (2016-05-27) 以前とは互換性がない部分があるので、
そのままではまず動かない。 0.2.x からはマイグレーションガイドを見て1.0.x に移行しましょう。 7

Hello World <body> <script src="//unpkg.com/mithril/mithril.js"></script> <script> var root = document.body;
// これでbody のテキストとして Hello world が描画される。 m.render(root, "Hello world"); </script> </body> m.render() で描画処理が実行されて画面に Hello world が表示される。 render() の第2 引数にはVDOM オブジェクトを指定する。 8

View の定義 m.render() に渡すVDOM(Mithril ではvnode) はm() 関数(Hyperscript) で定義する。シグネチャは m('
タグ名', ' 属性オブジェクト', '[ 子要素]') 。以下のような感じで書いていく。 m.render(root, m("main", [ m("h1", {class: "title"}, "My first app"), m("button", "A button"), ])); 9

JXS でも書ける JXS を利用してHTML のシンタックスでも書ける。 m.render(root, <main> <h1 class="title">My first
app</h1> <button>A button</button> </main>); 10

JXS の使い方 Babel のtransform-react-jsx のpragma オプションで m() 関数を利用するように指定。 .babelrc の例
{ "presets": ["es2015"], "plugins": [ ["transform-react-jsx", { "pragma": "m" // これ大事！ }] ] } 11

コンポーネントも作れる var count = 0; var Hello = {
view: function() { return m("main", [ m("h1", {class: "title"}, "esm_LT"), // changed the next line m("button", {onclick: function() {count++}}, count + " clicks"), ]); } }; // mount 関数を呼び出して自動描画システムを有効にする m.mount(root, Hello); 12

自動描画システム自動描画システムを有効にすると以下の条件の時に Mithril が描画処理を実行する。 UI イベント処理後(DOM イベントハンドラの呼び出し後) HTTP リクエストの完了後
ラウティングの後次のようにして自動描画システムを有効にできる m.mount(root, Hello); // or m.route(root, '/', {'/': Hello}); 13

HTTP リクエスト m.request({ method: "PUT", url: "/api/v1/users/:id", data: {id: fossamagna,
name: "MURAKAMI Masahiko"} }) .then(function(result) { console.log(result); }); Promise を返す。 Promise の処理が全て終わったら自動で描画が実行される( 自動描画システムが有効なら)。 14

ラウターの定義 var Hello = { view: function() { return
'Hello'; } }; var UserPage = { view: function(vnode) { // ラウティングパラメータが // vnode.attrs のプロパティにマッピングされる return 'Hi ' + vnode.attrs.id + '!'; } }; m.route(root, "/hello", { "/users/:id": UserPage, // :id の部分がパラメータ "/hello": Hello }); 15

ラウターの利用遷移 // fossamagna のページに遷移 m.route.set('/users/fossamagna'); // または
m.route.set('/users/:id', {id: 'fossamagna'}) 画面の描画 Hi fossamagna! 16

ラウターの利用現在のパスを取得 var path = m.route.get(); console.log(path); > /users/fossamagna
17

まとめ依存ライブラリなしで入れやすいシンプルなAPI で学習しやすい問題が起きても対処しやすいと思う( いざとなったらコードも読める分量) でも、必要な物は揃っている
18

ぜひ、 Mithril をお試しあれ！ 19

Mithrilの紹介/Introduce of Mithril

Mithrilの紹介/Introduce of Mithril

MURAKAMI Masahiko

More Decks by MURAKAMI Masahiko

Other Decks in Programming

Featured

Transcript

Mithril の紹介 A Javascript Framework for Building Brilliant Applications esm_LT

村上雅彦 a.k.a @fossamagna 株式会社永和システムマネジメント IT サービス事業部所属 2

Mithril を知ってますか? 3

Mithril SPA 向けのクライアントサイドのJavaScript フレームワーク 4

Mithril の特徴シンプルなAPI サイズが小さい(gzip で < 8kb) パフォーマンス高い VirtualDOM

Mithril のバージョン最新は1.0.1 (2017-02-09) 0.2.5 (2016-05-27) 以前とは互換性がない部分があるので、そのままではまず動かない。

Mithril のバージョン最新は1.0.1 (2017-02-09) 今日はここ。 0.2.5 (2016-05-27) 以前とは互換性がない部分があるので、

Hello World <body> <script src="//unpkg.com/mithril/mithril.js"></script> <script> var root = document.body;

View の定義 m.render() に渡すVDOM(Mithril ではvnode) はm() 関数(Hyperscript) で定義する。シグネチャは m('

JXS でも書ける JXS を利用してHTML のシンタックスでも書ける。 m.render(root, <main> <h1 class="title">My first

JXS の使い方 Babel のtransform-react-jsx のpragma オプションで m() 関数を利用するように指定。 .babelrc の例

コンポーネントも作れる var count = 0; var Hello = {

自動描画システム自動描画システムを有効にすると以下の条件の時に Mithril が描画処理を実行する。 UI イベント処理後(DOM イベントハンドラの呼び出し後) HTTP リクエストの完了後

HTTP リクエスト m.request({ method: "PUT", url: "/api/v1/users/:id", data: {id: fossamagna,

ラウターの定義 var Hello = { view: function() { return

ラウターの利用遷移 // fossamagna のページに遷移 m.route.set('/users/fossamagna'); // または

ラウターの利用現在のパスを取得 var path = m.route.get(); console.log(path); > /users/fossamagna

まとめ依存ライブラリなしで入れやすいシンプルなAPI で学習しやすい問題が起きても対処しやすいと思う( いざとなったらコードも読める分量) でも、必要な物は揃っている

ぜひ、 Mithril をお試しあれ！ 19