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 (Japanese)
Search
Tsutomu Kawamura
December 19, 2015
Programming
1
400
Riot - Introduction (Japanese)
「Riot入門と冬休みの宿題」CMU35
http://cmu.connpass.com/event/23769/
Tsutomu Kawamura
December 19, 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
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
유연한 Composable 설계
l2hyunwoo
0
380
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
Google's Recipe for Scaling (Web) Security – LocoMocoSec 2024
lweichselbaum
0
170
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
CSC307 Lecture 05
javiergs
PRO
0
210
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
AHC035解説
terryu16
0
730
Featured
See All Featured
Facilitating Awesome Meetings
lara
46
5.8k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
How GitHub (no longer) Works
holman
305
140k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Unsuck your backbone
ammeep
666
57k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Designing Experiences People Love
moore
136
23k
Designing for humans not robots
tammielis
247
25k
In The Pink: A Labor of Love
frogandcode
139
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
What the flash - Photography Introduction
edds
65
11k
Transcript
Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa ೖͱౙٳΈͷ॓
Riot.js?
ϢʔβʔΠϯλʔϑΣʔε ϚΠΫϩϥΠϒϥϦʔ UI
K2VFSZ
มԽΛఆٛ K2VFSZ ݟͨΛఆٛ
React Angular Vue Polymer
React Angular Vue Polymer +BWB4DSJQUϋʔυίΞ )5.-ϋʔυίΞ ະདྷ ΏͱΓੈ ωΠςΟϒΏͱΓੈ
͢Β͔ʹɺK2VFSZ
ࢼͯ͠ΈΑ͏ɻ
None
bit.ly/riot-1
• Custom tags = Component • Enjoyable syntax • Virtual
DOM • Tiny size: library, learning cost, your code ͳΜͰ3JPU
18KB riot.min.js gzip 8KB ͪͬͪΌ͍
Ember 493KB Angular 145KB React 133KB Polymer with Polyfill 218KB
Riot 18KB ൺͯΈΔ
3FBDU 3JPU +4JO)5.-
• CSS with scope • independent • no more BEM!
4DPQFE$44
%0.ʹϚϯτ
TAG file JS $ 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) {…} ) ίϯύΠϧ
• gulp-riot • riotify • riotjs-loader ϓϦίϯύΠϧ
karma-riot ςετ
<app> <part1> <part2> <btn> <fa> <date-picker> <dropdown> <photo> views parts
reusables Έཱͯ
<app> <part1> <part2> <btn> <fa> <date-picker> <dropdown> <photo> views parts
reusables route data store observable Έཱͯ
Flux Redux Jade Page.js ES6 Less ͋ͳ͍ͨͩ͠
github.com/riot/examples ެࣜ༻ྫू
EN ES FR JA RU ZH DE riotjs.com υΩϡϝϯτ
None
None
None
ࠓ͔Β͑Δ
ౙٳΈͷ॓3JPU
Thank you!