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.2k
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.7k
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
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
sappoRo.R #12 初心者セッション
kosugitti
0
230
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
180
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
技術を根付かせる / How to make technology take root
kubode
1
240
SwiftUI Viewの責務分離
elmetal
PRO
0
150
ARA Ansible for the teams
kksat
0
150
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
KATA
mclloyd
29
14k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Practical Orchestrator
shlominoach
186
10k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
How STYLIGHT went responsive
nonsquared
98
5.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Code Reviewing Like a Champion
maltzj
521
39k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
What's in a price? How to price your products and services
michaelherold
244
12k
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!