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
920
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
620
Other Decks in Programming
See All in Programming
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
250
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
240
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
構文解析器入門
ydah
7
1.9k
Reactの歴史を振り返る
tutinoko
1
150
Gemini CLI のはじめ方
ttnyt8701
1
110
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
170
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
680
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
150
AIのメモリー
watany
11
1.1k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
220
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
350
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
RailsConf 2023
tenderlove
30
1.2k
Adopting Sorbet at Scale
ufuk
77
9.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Fireside Chat
paigeccino
37
3.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Cult of Friendly URLs
andyhume
79
6.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Done Done
chrislema
184
16k
A better future with KSS
kneath
238
17k
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!