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
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
Create A Small Studio in A Cafe
cognitom
2
920
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
640
Cooking Automation
cognitom
1
550
Other Decks in Programming
See All in Programming
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
940
Le côté obscur des IA génératives
pascallemerrer
0
150
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
240
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
480
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
150
CSC305 Lecture 03
javiergs
PRO
0
240
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
480
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
870
Cursorハンズオン実践!
eltociear
2
1.1k
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
1
370
Featured
See All Featured
A better future with KSS
kneath
239
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building Adaptive Systems
keathley
44
2.8k
It's Worth the Effort
3n
187
28k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Site-Speed That Sticks
csswizardry
12
900
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
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
ਫɾ༵ ԼͰ ళ൪ͯ͠·͢ ؾܰʹฉ͖ʹདྷͯ ͍ͩ͘͞