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
96
JTF2018
cognitom
5
1.2k
Riot: changing on v3 and its companion tools
cognitom
0
120
LLoT Night - Riot.js
cognitom
1
920
Felt - a simple web server with the power of the future
cognitom
0
300
Riot: all about v2 to v3
cognitom
7
3.7k
Create A Small Studio in A Cafe
cognitom
2
890
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
580
Other Decks in Programming
See All in Programming
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
200
cmp.Or に感動した
otakakot
3
200
RubyLSPのマルチバイト文字対応
notfounds
0
120
Click-free releases & the making of a CLI app
oheyadam
2
120
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
Jakarta EE meets AI
ivargrimstad
0
120
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
ヤプリ新卒SREの オンボーディング
masaki12
0
130
Jakarta EE meets AI
ivargrimstad
0
210
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
97
11k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
How to train your dragon (web standard)
notwaldorf
88
5.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Automating Front-end Workflow
addyosmani
1366
200k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
We Have a Design System, Now What?
morganepeng
50
7.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
100
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
420
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
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!