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.3k
Riot: changing on v3 and its companion tools
cognitom
0
130
LLoT Night - Riot.js
cognitom
1
970
Felt - a simple web server with the power of the future
cognitom
0
310
Riot: all about v2 to v3
cognitom
7
3.8k
Create A Small Studio in A Cafe
cognitom
2
910
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
600
Other Decks in Programming
See All in Programming
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
7
1.5k
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1.1k
Chrome Extension Techniques from Hell
moznion
1
160
Java 24まとめ / Java 24 summary
kishida
3
500
Building Scalable Mobile Projects: Fast Builds, High Reusability and Clear Ownership
cyrilmottier
2
300
スモールスタートで始めるためのLambda×モノリス(Lambdalith)
akihisaikeda
2
290
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
180
ComposeでWebアプリを作る技術
tbsten
0
120
Defying Front-End Inertia: Inertia.js on Rails
skryukov
0
490
Building a macOS screen saver with Kotlin (Android Makers 2025)
zsmb
1
160
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
1k
gen_statem - OTP's Unsung Hero
whatyouhide
1
210
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Visualization
eitanlees
146
16k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
Writing Fast Ruby
sferik
628
61k
It's Worth the Effort
3n
184
28k
Agile that works and the tools we love
rasmusluckow
328
21k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Statistics for Hackers
jakevdp
798
220k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Building Applications with DynamoDB
mza
94
6.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
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!