Riot: all about v2 to v3

Transcript

1. Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa Riotͷ΢ϥΨϫ:

   ver 3ͱιʔείʔυղઆ

2. cognitom

3. None

4. $PEFS%PKP ϦϒϥΠζ

5. HJUIVCDPNDPHOJUPN

6. ࠓ೔ɺ࿩͢͜ͱ

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

8. None

9. 3JPU
   ͷ
   ۙگ

10. ೥Ն
    
    WFS
    ༧ఆ

11. ͡Θ͡Θ͖ͯΔ
    

12. ΋͏͙͢
    ˒,

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

14. W W ϑΝΠϧαΠζ ,# ,# ެࣜϦϙδτϦ ݸ ݸ ίΞίϛολʔ ਓ

    ਓ एׯΆͬͪΌΓ
    
15. None
16. None

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 ΄͔
25. None

26. ˠ
    ͰԿ͕มΘͬͨͷ

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

28. ςετ

29. None

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

45. None

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 ϑΥϧμߏ੒
51. None
52. None
53. None
54. None

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>
57. None
58. None
59. None

60. ࢑͘ோΊͯΕ͹ɺେৎ෉
    

61. ೥݄ ೥݄ ৄ͘͠͸2JJUB΁

62. 13͓଴ͪͯ͠·͢ ϓϧϦΫΤετ

63. None

64. 5IBOL
    ZPV GCDPNHSPVQTUPLZPSJPU HJUUFSJNSJPUSJPU

65. ਫɾ౔༵͸
    Լ๺୔Ͱ
    ళ൪ͯ͠·͢ ؾܰʹฉ͖ʹདྷͯ
    ͍ͩ͘͞