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
88
JTF2018
cognitom
5
1.2k
Riot: changing on v3 and its companion tools
cognitom
0
110
LLoT Night - Riot.js
cognitom
1
900
Felt - a simple web server with the power of the future
cognitom
0
290
Riot: all about v2 to v3
cognitom
7
3.7k
Create A Small Studio in A Cafe
cognitom
2
870
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
570
Other Decks in Programming
See All in Programming
英語
s_shimotori
1
220
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
データカタログ運用物語 〜令和6年夏の理想と現実〜
kuro_kurorrr
0
110
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
企業向け生成AIアプリの 開発から得られた知見
takaakikakei
0
310
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
Building Your Own Lightsaber
phodgson
101
5.9k
We Have a Design System, Now What?
morganepeng
46
7k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Statistics for Hackers
jakevdp
792
220k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
What's new in Ruby 2.0
geeforr
338
31k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Designing with Data
zakiwarfel
96
5k
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!