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
410
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
110
JTF2018
cognitom
5
1.2k
Riot: changing on v3 and its companion tools
cognitom
0
120
LLoT Night - Riot.js
cognitom
1
950
Felt - a simple web server with the power of the future
cognitom
0
310
Riot: all about v2 to v3
cognitom
7
3.7k
Create A Small Studio in A Cafe
cognitom
2
900
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
590
Other Decks in Programming
See All in Programming
『品質』という言葉が嫌いな理由
korimu
0
160
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
Rails アプリ地図考 Flush Cut
makicamel
1
110
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
GraphQLとの向き合い方2022年版
quramy
44
13k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Writing Fast Ruby
sferik
628
61k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
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!