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
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
Grafana Cloudとソラカメ
devoc
0
140
技術を根付かせる / How to make technology take root
kubode
1
240
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
WebDriver BiDiとは何なのか
yotahada3
1
140
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
Formの複雑さに立ち向かう
bmthd
1
720
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Making Projects Easy
brettharned
116
6k
A Philosophy of Restraint
colly
203
16k
Optimizing for Happiness
mojombo
376
70k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Code Reviewing Like a Champion
maltzj
521
39k
Into the Great Unknown - MozCon
thekraken
35
1.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
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!