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.7k
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
94
JTF2018
cognitom
5
1.2k
Riot: changing on v3 and its companion tools
cognitom
0
110
LLoT Night - Riot.js
cognitom
1
920
Felt - a simple web server with the power of the future
cognitom
0
300
Create A Small Studio in A Cafe
cognitom
2
880
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
580
Cooking Automation
cognitom
1
530
Other Decks in Programming
See All in Programming
モジュラモノリス、その前に / Modular monolith, before that
euglena1215
6
590
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
120
ECS向けのドリフト検知機構を実装してみた
tkikuc
0
270
M5Stack に色々な M5ユニットをつないで扱う為の新たなアプローチ
gob
0
200
Cohesion in Modeling and Design
mploed
3
180
Beyond the RuboCop Defaults
koic
2
480
Subclassing, Composition, Python, and You
hynek
3
110
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
140
データサイエンスのフルサイクル開発を実現する機械学習パイプライン
xcnkx
2
460
クラウドサービスの 利用コストを削減する技術 - 円安の真南風を感じて -
pyama86
3
240
推しの夫に恋のGPS「ときメーター」#M5Stack #IoT #M5JPTour2024
riyu
0
220
複数プロダクトの技術改善・クラウド移行に向き合うチームのフレキシブルなペア・モブプログラミングの実践 / Flexible Pair Programming And Mob Programming
honyanya
0
150
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Rails Girls Zürich Keynote
gr2m
93
13k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Into the Great Unknown - MozCon
thekraken
30
1.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
42
6.5k
How to name files
jennybc
77
98k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
279
13k
Documentation Writing (for coders)
carmenintech
65
4.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
30
2.6k
Agile that works and the tools we love
rasmusluckow
327
21k
YesSQL, Process and Tooling at Scale
rocio
167
14k
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
ਫɾ༵ ԼͰ ళ൪ͯ͠·͢ ؾܰʹฉ͖ʹདྷͯ ͍ͩ͘͞