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 and Hands on
Search
Tsutomu Kawamura
December 14, 2015
Programming
0
150
Riot - Introduction and Hands on
#TKJS XMAS @TokyoSquareGarden
http://www.meetup.com/tokyojs/events/226903404/
Tsutomu Kawamura
December 14, 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
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.8k
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
PHPカンファレンス名古屋2025 タスク分解の試行錯誤〜レビュー負荷を下げるために〜
soichi
1
550
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
190
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
380
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
1
120
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.2k
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
ML.NETで始める機械学習
ymd65536
0
210
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.5k
『品質』という言葉が嫌いな理由
korimu
0
180
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
170
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
React 19アップデートのために必要なこと
uhyo
3
710
Featured
See All Featured
Designing Experiences People Love
moore
140
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Six Lessons from altMBA
skipperchong
27
3.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
We Have a Design System, Now What?
morganepeng
51
7.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Raft: Consensus for Rubyists
vanstee
137
6.8k
A Philosophy of Restraint
colly
203
16k
Thoughts on Productivity
jonyablonski
69
4.5k
Transcript
Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa
Riot.js?
User interface micro-library
React Angular Vue Polymer
OK, try it
bit.ly/riot-1
None
bit.ly/riot-2
None
• Custom tags = Component • Enjoyable syntax • Virtual
DOM • Tiny size: library, learning cost, your code Why Riot?
18KB riot.min.js Tiny size gzip 8KB
Ember 493KB Angular 145KB React 133KB Polymer with Polyfill 218KB
Riot 18KB Compare
3FBDU JS in HTML 3JPU
Scoped CSS • CSS with scope • independent • no
more BEM!
Mount a riot
TAG file JS Compile $ 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) {…} ) Compile
Pre-comp • gulp-riot • riotify • riotjs-loader
Test karma-riot
Build up <app> <part1> <part2> <btn> <fa> <date-picker> <dropdown> <photo>
views parts reusables
Build up <app> <part1> <part2> <btn> <fa> <date-picker> <dropdown> <photo>
views parts reusables route data store observable
Up to you Flux Redux Jade Page.js ES6 Less
Examples github.com/riot/examples
EN ES FR JA RU ZH DE Riot Docs riotjs.com
None
None
None
Ready to use
Thank you!