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
160
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
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
鯛変だったRubyKaigi 2025 ── それでも楽しかった!
pndcat
0
130
Doma で目指す ORM 最適解
nakamura_to
1
160
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
4
470
Efficiency and Rock 'n’ Roll (Really!)
hollycummins
0
590
AI Coding Agent Enablement in TypeScript
yukukotani
17
7.1k
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
800
がんばりすぎないコーディングルール運用術
tsukakei
1
180
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
370
ts-morph実践:型を利用するcodemodのテクニック
ypresto
1
540
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
140
PT AI без купюр
v0lka
0
190
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
140
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Thoughts on Productivity
jonyablonski
69
4.7k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Writing Fast Ruby
sferik
628
61k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing for humans not robots
tammielis
253
25k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.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!