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
990
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
GPUを計算資源として使おう!
primenumber
1
190
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
180
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
13
5k
Hack Claude Code with Claude Code
choplin
5
2.3k
ニーリーにおけるプロダクトエンジニア
nealle
0
880
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
150
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
140
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
800
ふつうの技術スタックでアート作品を作ってみる
akira888
1
930
What's new in AppKit on macOS 26
1024jp
0
130
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
460
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Pragmatic Product Professional
lauravandoore
35
6.7k
What's in a price? How to price your products and services
michaelherold
246
12k
GraphQLとの向き合い方2022年版
quramy
49
14k
Thoughts on Productivity
jonyablonski
69
4.7k
Unsuck your backbone
ammeep
671
58k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
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!