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
430
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
130
JTF2018
cognitom
5
1.3k
Riot: changing on v3 and its companion tools
cognitom
0
130
LLoT Night - Riot.js
cognitom
1
1k
Felt - a simple web server with the power of the future
cognitom
0
320
Riot: all about v2 to v3
cognitom
7
3.8k
Create A Small Studio in A Cafe
cognitom
2
920
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
640
Other Decks in Programming
See All in Programming
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
140
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.6k
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
460
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
690
Catch Up: Go Style Guide Update
andpad
0
200
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
1
610
CSC305 Lecture 05
javiergs
PRO
0
210
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
130
開発生産性を上げるための生成AI活用術
starfish719
1
200
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
110
The Flutter Journey of Building a Live Streaming App — With a Side of Performance Tuning
u503
1
100
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
kinocoboy2
4
680
Featured
See All Featured
Fireside Chat
paigeccino
40
3.7k
A designer walks into a library…
pauljervisheath
209
24k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Automating Front-end Workflow
addyosmani
1371
200k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Producing Creativity
orderedlist
PRO
347
40k
Code Review Best Practice
trishagee
72
19k
Facilitating Awesome Meetings
lara
56
6.6k
GitHub's CSS Performance
jonrohan
1032
460k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Thoughts on Productivity
jonyablonski
70
4.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
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!