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
420
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
120
JTF2018
cognitom
5
1.3k
Riot: changing on v3 and its companion tools
cognitom
0
130
LLoT Night - Riot.js
cognitom
1
980
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
910
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
610
Other Decks in Programming
See All in Programming
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
140
バリデーションライブラリ徹底比較
nayuta999999
1
420
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
1
260
ts-morph実践:型を利用するcodemodのテクニック
ypresto
1
540
CRUD から CQRS へ ~ 分離が可能にする柔軟性
tkawae
0
220
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
370
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
110
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
230
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
370
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
7
1.6k
iOSアプリ開発もLLMで自動運転する
hiragram
6
2.1k
PT AI без купюр
v0lka
0
190
Featured
See All Featured
Site-Speed That Sticks
csswizardry
7
590
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Fireside Chat
paigeccino
37
3.5k
How to train your dragon (web standard)
notwaldorf
92
6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Adopting Sorbet at Scale
ufuk
76
9.4k
Building Adaptive Systems
keathley
41
2.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Automating Front-end Workflow
addyosmani
1370
200k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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!