Riot: all about v2 to v3

Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa Riotͷ΢ϥΨϫ:
ver 3ͱιʔείʔυղઆ

cognitom

$PEFS%PKP ϦϒϥΠζ

HJUIVCDPNDPHOJUPN

ࠓ೔ɺ࿩͢͜ͱ

w 3JPUͷۙگ w 3JPUͷ։ൃମ੍ w ˠͰԿ͕มΘͬͨͷ w ιʔείʔυΛ೷͍ͯΈΑ͏ ͜ͷ͋ͨΓΛ࿩ͦ͏͔ͱ

3JPUͷۙگ

೥ՆWFS ༧ఆ

͡Θ͡Θ͖ͯΔ

΋͏͙͢˒,

(JU)VCͷελʔ ˒ ίϯτϦϏϡʔλ ਓ ϓϧϦΫΤετͷ਺ ݅ 2JJUBͷهࣄ ݅ 3JPUͷͻΖ͕Γ

W W ϑΝΠϧαΠζ ,# ,# ެࣜϦϙδτϦ ݸ ݸ ίΞίϛολʔ ਓ
ਓ एׯΆͬͪΌΓ

3JPUͷ։ൃମ੍

ίΞίϛολʔͷډ৔ॴ

೥݄W ϑΟϯϥϯυ

೥य़ εΠε͔Β ΞδΞͷ࠭യ΁

೥Ն ϝΩγί͔Β ձ௕৬తͳ ςΩαε͔Β ౦ژ͔Β

೥ Ͳ͔͔͜Β ࣌ʑ߱ྟ

͕ɺ3JPUͰ΍͍ͬͯΔ͜ͱ

w ॳظͷςετେྔ௥Ճ w TUZMFλάରԠ w 4DPQFE$44ରԠ w υΩϡϝϯτͷࠃࡍԽ ͷίϯτϦϏϡʔγϣϯ w
SJPUFYBNQMF w SJPUSPVUF w LBSNBSJPU w SPMMVQQMVHJOSJPU ΄͔

ˠͰԿ͕มΘͬͨͷ

Ͱ௥Ճ͞ΕΔػೳɺ ͱ͍͏ΑΓ͸ɺ ͔ΒมΘ͖ͬͯͨͱ͜Ζ

ςετ

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

ιʔείʔυΛ೷͍ͯΈΑ͏

·ͣ͸Ϋϩʔϯ

ίʔσΟϯάελΠϧ 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 ϑΥϧμߏ੒

Ϛ΢ϯτ͢Δ·Ͱ 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>

࢑͘ோΊͯΕ͹ɺେৎ෉

೥݄ ೥݄ ৄ͘͠͸2JJUB΁

13͓଴ͪͯ͠·͢ ϓϧϦΫΤετ

5IBOLZPV GCDPNHSPVQTUPLZPSJPU HJUUFSJNSJPUSJPU

ਫɾ౔༵͸ Լ๺୔Ͱ ళ൪ͯ͠·͢ ؾܰʹฉ͖ʹདྷͯ ͍ͩ͘͞

Riot: all about v2 to v3

Riot: all about v2 to v3

More Decks by Tsutomu Kawamura

Other Decks in Programming

Featured

Transcript