Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mithrilの紹介/Introduce of Mithril
Search
MURAKAMI Masahiko
March 02, 2017
Programming
0
300
Mithrilの紹介/Introduce of Mithril
MURAKAMI Masahiko
March 02, 2017
Tweet
Share
More Decks by MURAKAMI Masahiko
See All by MURAKAMI Masahiko
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
560
AWS Amplify Gen2向けのVSCode拡張を作って公開してみた話/lts-techday-2024
fossamagna
0
7
CDKアプリとしてのAmplify Gen2 - @aws-amplify/backendのアーキテクチャにみるCDKベストプラクティス -
fossamagna
3
3.1k
Amplify Gen2の 新機能と実践的な使用例 AWS Amplify Gen 2 Festival in Japan/New features and practical use cases in Amplify Gen2
fossamagna
0
680
Amplify Gen2を 拡張してみよう JAWS-UG北陸新幹線 ( 福井開催 ) 2024-04-06/Let's extend Amplify Gen2
fossamagna
0
840
みんな本当に AWS Amplify を知っている?/do-you-really-know-aws-amplify
fossamagna
0
160
Amplify OSSにコントリビュートしてAmplify Badgeを手に入れよう!/contribute-to-amplify-oss-and-get-an-amplify-badge
fossamagna
0
540
Using custom function template with AWS Amplify
fossamagna
1
500
Amplifyで始めるサーバレス開発/serverless-development-starting-with-amplify
fossamagna
0
1.5k
Other Decks in Programming
See All in Programming
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
900
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
470
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
15
8.7k
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
1k
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
panda_program
1
110
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
920
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
280
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
250
Updates on MLS on Ruby (and maybe more)
sylph01
1
120
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
Introduction to Git & GitHub
latte72
0
120
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
930
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
4 Signs Your Business is Dying
shpigford
184
22k
Faster Mobile Websites
deanohume
309
31k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Optimizing for Happiness
mojombo
379
70k
Agile that works and the tools we love
rasmusluckow
329
21k
KATA
mclloyd
32
14k
Fireside Chat
paigeccino
39
3.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Writing Fast Ruby
sferik
628
62k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
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