Riot: all about v2 to v3

「Riotのウラガワ: ver3とソースコード解説」
Riot.js 勉強会 @Tokyo #1
http://riotjs-jp.connpass.com/event/35724/

Transcript

1. Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa Riotͷ΢ϥΨϫ: ver 3ͱιʔείʔυղઆ
2. cognitom
4. $PEFS%PKP ϦϒϥΠζ
5. HJUIVCDPNDPHOJUPN
6. ࠓ೔ɺ࿩͢͜ͱ
7. w 3JPU
   ͷۙگ
   w 3JPU
   ͷ։ൃମ੍
   w ˠ
   ͰԿ͕มΘͬͨͷ
   w ιʔείʔυΛ೷͍ͯΈΑ͏ ͜ͷ͋ͨΓΛ࿩ͦ͏͔ͱ
9. 3JPU
   ͷ
   ۙگ
10. ೥Ն
    
    WFS
    ༧ఆ
11. ͡Θ͡Θ͖ͯΔ
    
12. ΋͏͙͢
    ˒,
13. (JU)VCͷελʔ ˒ ίϯτϦϏϡʔλ ਓ ϓϧϦΫΤετͷ਺ ݅ 2JJUBͷهࣄ ݅ 3JPUͷͻΖ͕Γ
14. W W ϑΝΠϧαΠζ ,# ,# ެࣜϦϙδτϦ ݸ ݸ ίΞίϛολʔ ਓ ਓ एׯΆͬͪΌΓ
    
17. 3JPU
    ͷ
    ։ൃମ੍
18. ίΞίϛολʔͷډ৔ॴ
19. ೥݄
    W ϑΟϯϥϯυ
20. ೥य़ εΠε͔Β ΞδΞͷ࠭യ΁
21. ೥Ն ϝΩγί͔Β ձ௕৬తͳ ςΩαε͔Β ౦ژ͔Β
22. ೥ Ͳ͔͔͜Β ࣌ʑ߱ྟ
23. ͕ɺ3JPUͰ΍͍ͬͯΔ͜ͱ
24. w 
    ॳظͷςετେྔ௥Ճ
    w TUZMFλάରԠ
    w 4DPQFE
    $44
    ରԠ
    w υΩϡϝϯτͷࠃࡍԽ ͷίϯτϦϏϡʔγϣϯ w SJPUFYBNQMF
    w SJPUSPVUF
    w LBSNBSJPU
    w SPMMVQQMVHJOSJPU ΄͔
26. ˠ
    ͰԿ͕มΘͬͨͷ
27. Ͱ௥Ճ͞ΕΔػೳɺ
    ͱ͍͏ΑΓ͸ɺ
    ͔ΒมΘ͖ͬͯͨͱ͜Ζ
28. ςετ
30. 4DPQFE
    $44 <p>WP-D Week</p> <style scoped> :scope { /* ίϯϙʔωϯτͦͷ΋ͷͷελΠϧ */ } p { /* ίϯϙʔωϯτ಺ͷpλάͷΈʹ༗ޮ */ } </style> Wʙ
31. 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> 
32. 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>
33. SJPUSPVUF riot.route('/fruit', function(name) { console.log('The list of fruits') }) riot.route('/fruit/*', function(name) { console.log('The detail of ' + name) }) Wʙ
34. SJPUDPNQJMFS
    UNQM Wʙ
35. SJPUDMJ
    PCTFSWBCMF Wʙ
36. EN ES FR JA RU ZH DE riotjs.com υΩϡϝϯτͷࠃࡍԽ
37. &YBNQMFT
38. HMPCBM
    NJYJO 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>
39. <div riot-tag="my-tag"></div> <div data-is=“my-tag"></div> <my-tag></my-tag>  Wʙ EBUBJT
40. <dl> <virtual each={item in items}> <dt>{item.key}</dt> <dd>{item.value}</dd> </virtual> </dl> W ʙ WJSUVBM
41. w $ISPNFͷ
 ϓϥάΠϯͰࠔΔ݅
    w SJPUDTQKT Wʙ $POUFOU
    4FDVSJUZ
    1PMJDZ $41
    ରԠ
42. ߴ଎Խ
    
    ࠷దԽ
    ϧʔϓͷڍಈͷpY N @
    @ N
43. JGଐੑͷڍಈ Wʙ w JGଐੑΛ͚ͭͨ࣌ʹɺ
 USVFʹͳΔ·ͰϚ΢ϯτ͞Εͳ͍ w JGଐੑΛ͚ͭͨ࣌ʹɺ
 GBMTFͰ΋Ϛ΢ϯτ͞Εͯ͠·͏ ॏཁ
44. όϯυϧํ๏ w 
    ಠࣗ
    w 
    TNBTI
    w 
    SPMMVQ
46. ιʔείʔυΛ೷͍ͯΈΑ͏
47. ·ͣ͸Ϋϩʔϯ
48. ίʔσΟϯάελΠϧ w ߦ຤ͷηϛίϩϯͳ͠
    w ୹͍ͷ͕ਖ਼ٛ
    w ΍͸ڍಈΛཧղͯ͠࢖͏
    w JGจ΍GPSจͰɺলུՄೳͰ͋Ε͹\^Λ࢖Θͳ͍
    w ԋࢉࢠͷධՁॱΛਖ਼͘͠ߟྀɻ৑௕ͳ Λ࢖Θͳ͍
    w &4Ͱॻ͕͘ɺ
 ม׵࣌ʹ௕͘ͳΔ$MBTTͳͲ͸࢖Θͳ͍
    ݱࡏͷͱ͜Ζ w ಠࣗͷؔ਺Λ༏ઌతʹ࢖͏ ৔໘͕͋Δ
    w 0CKFDUBTTJHO Ͱ͸ͳ͘ɺFYUFOE
    w <>GPS&BDI Ͱ͸ͳ͘ɺFBDI
49. όϯυϧํ๏ w ϏϧυͳͲͷλεΫ࣮ߦʹ͸NBLFΛ࢖͏ɻ
    w όϯυϥ͸3PMMVQ
    w &4ม׵͸#BCFM
    w PCTFSWBCMF
    UNQM
    DPNQJMFS͸֎෦ϦϙδτϦ
 ˞͔ΒɺSJPUSPVUF͸ؚ·Εͳ͍
    w ༻్ผʹෳ਺ͷόʔδϣϯΛ༻ҙ
50. 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 ϑΥϧμߏ੒
55. Ϛ΢ϯτ͢Δ·Ͱ w SJPUUBH ؔ਺Ͱొ࿥ࡁΈͷɺλάͷ࣮૷Λऔಘ
    w λάΛΠϯελϯεԽ
    w λάͷ࣮૷ )5.-ςϯϓϨʔτ ΛJOOFS)5.-ʹಥͬࠐΉ
    w ύʔε͢Δɺͱ͍͏ΑΓ%0.Λτϥόʔεͯ͠ɺղੳ
    w ༩͑ΒΕͨσʔλͰɺλάͷ಺༰Λߋ৽
    w ςϯϓϨʔτม਺ FYQSFTTJPO Λߋ৽
    w Ϛ΢ϯτ׬ྃΠϕϯτ
56. <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>
60. ࢑͘ோΊͯΕ͹ɺେৎ෉
    
61. ೥݄ ೥݄ ৄ͘͠͸2JJUB΁
62. 13͓଴ͪͯ͠·͢ ϓϧϦΫΤετ
64. 5IBOL
    ZPV GCDPNHSPVQTUPLZPSJPU HJUUFSJNSJPUSJPU
65. ਫɾ౔༵͸
    Լ๺୔Ͱ
    ళ൪ͯ͠·͢ ؾܰʹฉ͖ʹདྷͯ
    ͍ͩ͘͞