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
250
Mithrilの紹介/Introduce of Mithril
MURAKAMI Masahiko
March 02, 2017
Tweet
Share
More Decks by MURAKAMI Masahiko
See All by MURAKAMI Masahiko
CDKアプリとしてのAmplify Gen2 - @aws-amplify/backendのアーキテクチャにみるCDKベストプラクティス -
fossamagna
1
2.2k
Amplify Gen2の 新機能と実践的な使用例 AWS Amplify Gen 2 Festival in Japan/New features and practical use cases in Amplify Gen2
fossamagna
0
420
Amplify Gen2を 拡張してみよう JAWS-UG北陸新幹線 ( 福井開催 ) 2024-04-06/Let's extend Amplify Gen2
fossamagna
0
660
みんな本当に AWS Amplify を知っている?/do-you-really-know-aws-amplify
fossamagna
0
130
Amplify OSSにコントリビュートしてAmplify Badgeを手に入れよう!/contribute-to-amplify-oss-and-get-an-amplify-badge
fossamagna
0
440
Using custom function template with AWS Amplify
fossamagna
1
420
Amplifyで始めるサーバレス開発/serverless-development-starting-with-amplify
fossamagna
0
1.4k
拡張して使うServerless&Amplify/use-with-extending-serverless-and-amplify
fossamagna
0
1.3k
JavaScript AST
fossamagna
0
1.8k
Other Decks in Programming
See All in Programming
プロダクトの品質に コミットする / Commit to Product Quality
pekepek
2
770
Haze - Real time background blurring
chrisbanes
1
500
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
180
これでLambdaが不要に?!Step FunctionsのJSONata対応について
iwatatomoya
2
3.6k
Discord Bot with AI -for English learners-
xin9le
1
120
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
170
RWC 2024 DICOM & ISO/IEC 2022
m_seki
0
200
menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~
yoshifumi_ishikura
0
110
KubeCon + CloudNativeCon NA 2024 Overviewat Kubernetes Meetup Tokyo #68 / amsy810_k8sjp68
masayaaoyama
0
250
快速入門可觀測性
blueswen
0
320
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
350
CSC305 Lecture 25
javiergs
PRO
0
130
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
KATA
mclloyd
29
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Embracing the Ebb and Flow
colly
84
4.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
94
Building Your Own Lightsaber
phodgson
103
6.1k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
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