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
Riot - Introduction (Japanese)
Search
Tsutomu Kawamura
December 19, 2015
Programming
1
430
Riot - Introduction (Japanese)
「Riot入門と冬休みの宿題」CMU35
http://cmu.connpass.com/event/23769/
Tsutomu Kawamura
December 19, 2015
Tweet
Share
More Decks by Tsutomu Kawamura
See All by Tsutomu Kawamura
Connect your library to the world
cognitom
0
130
JTF2018
cognitom
5
1.3k
Riot: changing on v3 and its companion tools
cognitom
0
130
LLoT Night - Riot.js
cognitom
1
1k
Felt - a simple web server with the power of the future
cognitom
0
320
Riot: all about v2 to v3
cognitom
7
3.8k
Create A Small Studio in A Cafe
cognitom
2
920
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
640
Other Decks in Programming
See All in Programming
Google Opalで使える37のライブラリ
mickey_kubo
3
130
Introduce Hono CLI
yusukebe
6
3k
CSC305 Lecture 10
javiergs
PRO
0
220
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
320
ALL CODE BASE ARE BELONG TO STUDY
uzulla
27
6.6k
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
240
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
200
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
6
1k
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Typedesign – Prime Four
hannesfritz
42
2.8k
Designing for humans not robots
tammielis
254
26k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Become a Pro
speakerdeck
PRO
29
5.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Transcript
Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa ೖͱౙٳΈͷ॓
Riot.js?
ϢʔβʔΠϯλʔϑΣʔε ϚΠΫϩϥΠϒϥϦʔ UI
K2VFSZ
มԽΛఆٛ K2VFSZ ݟͨΛఆٛ
React Angular Vue Polymer
React Angular Vue Polymer +BWB4DSJQUϋʔυίΞ )5.-ϋʔυίΞ ະདྷ ΏͱΓੈ ωΠςΟϒΏͱΓੈ
͢Β͔ʹɺK2VFSZ
ࢼͯ͠ΈΑ͏ɻ
None
bit.ly/riot-1
• Custom tags = Component • Enjoyable syntax • Virtual
DOM • Tiny size: library, learning cost, your code ͳΜͰ3JPU
18KB riot.min.js gzip 8KB ͪͬͪΌ͍
Ember 493KB Angular 145KB React 133KB Polymer with Polyfill 218KB
Riot 18KB ൺͯΈΔ
3FBDU 3JPU +4JO)5.-
• CSS with scope • independent • no more BEM!
4DPQFE$44
%0.ʹϚϯτ
TAG file JS $ npm install -g riot $ riot
filename.tag ίϯύΠϧ
<my-tag> <p>{ message }</p> <style>p { color:white }</style> <script>…</script> </my-tag>
riot.tag(‘my-tag’, ‘<p>{ message }</p>’, ‘p { color:white }’, function(opts) {…} ) ίϯύΠϧ
• gulp-riot • riotify • riotjs-loader ϓϦίϯύΠϧ
karma-riot ςετ
<app> <part1> <part2> <btn> <fa> <date-picker> <dropdown> <photo> views parts
reusables Έཱͯ
<app> <part1> <part2> <btn> <fa> <date-picker> <dropdown> <photo> views parts
reusables route data store observable Έཱͯ
Flux Redux Jade Page.js ES6 Less ͋ͳ͍ͨͩ͠
github.com/riot/examples ެࣜ༻ྫू
EN ES FR JA RU ZH DE riotjs.com υΩϡϝϯτ
None
None
None
ࠓ͔Β͑Δ
ౙٳΈͷ॓3JPU
Thank you!