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
color-scheme: light dark; を完全に理解する
uhyo
7
480
Conform を推す - Advocating for Conform
mizoguchicoji
3
710
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
890
Formの複雑さに立ち向かう
bmthd
1
900
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
950
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
1
130
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.5k
DROBEの生成AI活用事例 with AWS
ippey
0
140
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
140
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
140
Rails アプリ地図考 Flush Cut
makicamel
1
130
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
870
Featured
See All Featured
It's Worth the Effort
3n
184
28k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Designing for humans not robots
tammielis
250
25k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Adopting Sorbet at Scale
ufuk
74
9.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Optimizing for Happiness
mojombo
376
70k
What's in a price? How to price your products and services
michaelherold
244
12k
Docker and Python
trallard
44
3.3k
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!