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
130
JTF2018
cognitom
5
1.3k
Riot: changing on v3 and its companion tools
cognitom
0
130
LLoT Night - Riot.js
cognitom
1
1k
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
640
Other Decks in Programming
See All in Programming
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
190
dynamic!
moro
9
6.5k
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
CSC509 Lecture 02
javiergs
PRO
0
410
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
780
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
920
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
380
Advance Your Career with Open Source
ivargrimstad
0
340
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
180
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
4 Signs Your Business is Dying
shpigford
185
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Designing for humans not robots
tammielis
254
25k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.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!