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: all about v2 to v3
Search
Tsutomu Kawamura
July 27, 2016
Programming
7
3.8k
Riot: all about v2 to v3
「Riotのウラガワ: ver3とソースコード解説」
Riot.js 勉強会 @Tokyo #1
http://riotjs-jp.connpass.com/event/35724/
Tsutomu Kawamura
July 27, 2016
Tweet
Share
More Decks by Tsutomu Kawamura
See All by Tsutomu Kawamura
Connect your library to the world
cognitom
0
120
JTF2018
cognitom
5
1.3k
Riot: changing on v3 and its companion tools
cognitom
0
130
LLoT Night - Riot.js
cognitom
1
990
Felt - a simple web server with the power of the future
cognitom
0
320
Create A Small Studio in A Cafe
cognitom
2
920
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
620
Cooking Automation
cognitom
1
550
Other Decks in Programming
See All in Programming
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
200
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
530
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
190
Langfuseと歩む生成AI活用推進
licux
3
270
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
8
3k
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.8k
兎に角、コードレビュー
mitohato14
0
140
生成AI、実際どう? - ニーリーの場合
nealle
0
140
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
1
200
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
1
310
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
350
Go製CLIツールをnpmで配布するには
syumai
2
1.2k
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
The Invisible Side of Design
smashingmag
301
51k
Adopting Sorbet at Scale
ufuk
77
9.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
BBQ
matthewcrist
89
9.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Producing Creativity
orderedlist
PRO
347
40k
Designing for humans not robots
tammielis
253
25k
Optimizing for Happiness
mojombo
379
70k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Music & Morning Musume
bryan
46
6.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Transcript
Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa RiotͷϥΨϫ:
ver 3ͱιʔείʔυղઆ
cognitom
None
$PEFS%PKP ϦϒϥΠζ
HJUIVCDPNDPHOJUPN
ࠓɺ͢͜ͱ
w 3JPUͷۙگ w 3JPUͷ։ൃମ੍ w ˠͰԿ͕มΘͬͨͷ w ιʔείʔυΛ͍ͯΈΑ͏ ͜ͷ͋ͨΓΛͦ͏͔ͱ
None
3JPUͷۙگ
ՆWFS ༧ఆ
͡Θ͡Θ͖ͯΔ
͏͙͢˒,
(JU)VCͷελʔ ˒ ίϯτϦϏϡʔλ ਓ ϓϧϦΫΤετͷ ݅ 2JJUBͷهࣄ ݅ 3JPUͷͻΖ͕Γ
W W ϑΝΠϧαΠζ ,# ,# ެࣜϦϙδτϦ ݸ ݸ ίΞίϛολʔ ਓ
ਓ एׯΆͬͪΌΓ
None
None
3JPUͷ։ൃମ੍
ίΞίϛολʔͷډॴ
݄W ϑΟϯϥϯυ
य़ εΠε͔Β ΞδΞͷ࠭യ
Ն ϝΩγί͔Β ձ৬తͳ ςΩαε͔Β ౦ژ͔Β
Ͳ͔͔͜Β ࣌ʑ߱ྟ
͕ɺ3JPUͰ͍ͬͯΔ͜ͱ
w ॳظͷςετେྔՃ w TUZMFλάରԠ w 4DPQFE$44ରԠ w υΩϡϝϯτͷࠃࡍԽ ͷίϯτϦϏϡʔγϣϯ w
SJPUFYBNQMF w SJPUSPVUF w LBSNBSJPU w SPMMVQQMVHJOSJPU ΄͔
None
ˠͰԿ͕มΘͬͨͷ
ͰՃ͞ΕΔػೳɺ ͱ͍͏ΑΓɺ ͔ΒมΘ͖ͬͯͨͱ͜Ζ
ςετ
None
4DPQFE$44 <p>WP-D Week</p> <style scoped> :scope { /* ίϯϙʔωϯτͦͷͷͷελΠϧ */
} p { /* ίϯϙʔωϯτͷpλάͷΈʹ༗ޮ */ } </style> Wʙ
ZJFME <my-tag> <p>Hello <yield/></p> this.text = 'world' </my-tag> Wʙ <my-tag>
<b>{ text }</b> </my-tag> <my-tag> <p>Hello <b>world</b><p> </my-tag>
NJYJO var logMixin = { log: function(m) { console.log(m) }
} Wʙ <my-tag> <h1>{ opts.title }</h1> <script> this.mixin(logMixin) this.log(‘hey!’) </script> </my-tag>
SJPUSPVUF riot.route('/fruit', function(name) { console.log('The list of fruits') }) riot.route('/fruit/*',
function(name) { console.log('The detail of ' + name) }) Wʙ
SJPUDPNQJMFS UNQM Wʙ
SJPUDMJ PCTFSWBCMF Wʙ
EN ES FR JA RU ZH DE riotjs.com υΩϡϝϯτͷࠃࡍԽ
&YBNQMFT
HMPCBMNJYJO var logMixin = { log: function(m) { console.log(m) }
} riot.mixin(logMixin) Wʙ <my-tag> <h1>{ opts.title }</h1> <script> this.log(‘hey!’) </script> </my-tag>
<div riot-tag="my-tag"></div> <div data-is=“my-tag"></div> <my-tag></my-tag> Wʙ EBUBJT
<dl> <virtual each={item in items}> <dt>{item.key}</dt> <dd>{item.value}</dd> </virtual> </dl> W
ʙ WJSUVBM
w $ISPNFͷ ϓϥάΠϯͰࠔΔ݅ w SJPUDTQKT Wʙ $POUFOU4FDVSJUZ1PMJDZ $41ରԠ
ߴԽ࠷దԽ ϧʔϓͷڍಈͷpY N @@ N
JGଐੑͷڍಈ Wʙ w JGଐੑΛ͚ͭͨ࣌ʹɺ USVFʹͳΔ·ͰϚϯτ͞Εͳ͍ w JGଐੑΛ͚ͭͨ࣌ʹɺ GBMTFͰϚϯτ͞Εͯ͠·͏ ॏཁ
όϯυϧํ๏ w ಠࣗ w TNBTI w SPMMVQ
None
ιʔείʔυΛ͍ͯΈΑ͏
·ͣΫϩʔϯ
ίʔσΟϯάελΠϧ w ߦͷηϛίϩϯͳ͠ w ͍ͷ͕ਖ਼ٛ w ڍಈΛཧղͯ͠͏ w JGจGPSจͰɺলུՄೳͰ͋Ε\^ΛΘͳ͍ w
ԋࢉࢠͷධՁॱΛਖ਼͘͠ߟྀɻͳ ΛΘͳ͍ w &4Ͱॻ͕͘ɺ ม࣌ʹ͘ͳΔ$MBTTͳͲΘͳ͍ ݱࡏͷͱ͜Ζ w ಠࣗͷؔΛ༏ઌతʹ͏ ໘͕͋Δ w 0CKFDUBTTJHO Ͱͳ͘ɺFYUFOE w <>GPS&BDI Ͱͳ͘ɺFBDI
όϯυϧํ๏ w ϏϧυͳͲͷλεΫ࣮ߦʹNBLFΛ͏ɻ w όϯυϥ3PMMVQ w &4ม#BCFM w PCTFSWBCMF UNQM
DPNQJMFS֎෦ϦϙδτϦ ˞͔ΒɺSJPUSPVUFؚ·Εͳ͍ w ༻్ผʹෳͷόʔδϣϯΛ༻ҙ
w ެ։"1*MJCSJPUKT w 3JPUͷίΞ෦MJCCSPXTFSUBHDPSFKT w λά%0.ૢ࡞ͷଟ͘ϢʔςΟϦςΟؔͰ w λάʹؔ͢ΔͷUBHIFMQFSKT w %0.ʹؔ͢ΔͷEPNIFMQFSKT
w ͦͷଞNJTDKT w λάͦͷͷMJCCSPXTFSUBHUBHKT w %0.ͷύʔε ͱ͍͏ΑΓUSBWFSTF QBSTFKT w දݱ FYQSFTTJPO JGKT FBDIKT OBNFEKTͳͲ w ߋ৽VQEBUFKT w ఆHMPCBMWBSJBCMFTKT ϑΥϧμߏ
None
None
None
None
Ϛϯτ͢Δ·Ͱ w SJPUUBH ؔͰొࡁΈͷɺλάͷ࣮Λऔಘ w λάΛΠϯελϯεԽ w λάͷ࣮ )5.-ςϯϓϨʔτ ΛJOOFS)5.-ʹಥͬࠐΉ
w ύʔε͢Δɺͱ͍͏ΑΓ%0.Λτϥόʔεͯ͠ɺղੳ w ༩͑ΒΕͨσʔλͰɺλάͷ༰Λߋ৽ w ςϯϓϨʔτม FYQSFTTJPO Λߋ৽ w ϚϯτྃΠϕϯτ
<my-tag> <p>{ message }</p> <script> this.message = "Hello!" </script> </my-tag>
riot.tag2(‘my-tag’, '<p>{ message }</p>’, ‘', '', function(opts) { this.message = "Hello!" } ) riot.mount(‘#main’, ‘my-tag’) #main DOM flag flag <p> { message } </p> <p> Hello! </p> ⁞ <p> Hello! </p>
None
None
None
͘ோΊͯΕɺେৎ
݄ ݄ ৄ͘͠2JJUB
13͓ͪͯ͠·͢ ϓϧϦΫΤετ
None
5IBOLZPV GCDPNHSPVQTUPLZPSJPU HJUUFSJNSJPUSJPU
ਫɾ༵ ԼͰ ళ൪ͯ͠·͢ ؾܰʹฉ͖ʹདྷͯ ͍ͩ͘͞