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
Benchmark
sysong
0
230
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
130
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
250
複数アプリケーションを育てていくための共通化戦略
irof
10
4k
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
3
280
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
190
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
610
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
280
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
190
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
GoのWebAssembly活用パターン紹介
syumai
3
10k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Invisible Side of Design
smashingmag
299
51k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Rails Girls Zürich Keynote
gr2m
94
14k
Unsuck your backbone
ammeep
671
58k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
YesSQL, Process and Tooling at Scale
rocio
173
14k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
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!