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ͱιʔείʔυղઆ
   

   View Slide

2. cognitom
   

   View Slide

3. View Slide

4. $PEFS%PKP
   ϦϒϥΠζ
   

   View Slide

5. HJUIVCDPNDPHOJUPN
   

   View Slide

6. ࠓ೔ɺ࿩͢͜ͱ
   

   View Slide

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

   View Slide

8. View Slide

9. 3JPUͷۙگ
   

   View Slide

10. ೥ՆWFS ༧ఆ
    
    

    View Slide

11. ͡Θ͡Θ͖ͯΔ
    

    View Slide

12. ΋͏͙͢˒,
    

    View Slide

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

    View Slide

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

    View Slide

15. View Slide

16. View Slide

17. 3JPUͷ։ൃମ੍
    

    View Slide

18. ίΞίϛολʔͷډ৔ॴ
    

    View Slide

19. ೥݄W
    ϑΟϯϥϯυ
    

    View Slide

20. ೥य़
    εΠε͔Β
    ΞδΞͷ࠭യ΁
    

    View Slide

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

    View Slide

22. ೥
    Ͳ͔͔͜Β
    ࣌ʑ߱ྟ
    

    View Slide

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

    View Slide

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

    View Slide

25. View Slide

26. ˠͰԿ͕มΘͬͨͷ
    

    View Slide

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

    View Slide

28. ςετ
    

    View Slide

29. View Slide

30. 4DPQFE$44
    WP-D Week
    <br/>:scope { /* ίϯϙʔωϯτͦͷ΋ͷͷελΠϧ */ }<br/>p { /* ίϯϙʔωϯτ಺ͷpλάͷΈʹ༗ޮ */ }<br/>
    Wʙ
    

    View Slide

31. ZJFME
    
    Hello
    this.text = 'world'
    
    Wʙ
    
    { text }
    
    
    Hello world
    
    
    
    

    View Slide

32. NJYJO
    var logMixin = {
    log: function(m) {
    console.log(m)
    }
    }
    Wʙ
    
    { opts.title }
    <br/>this.mixin(logMixin)<br/>this.log(‘hey!’)<br/>
    
    

    View Slide

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ʙ
    

    View Slide

34. SJPUDPNQJMFS UNQM
    Wʙ
    

    View Slide

35. SJPUDMJ PCTFSWBCMF
    Wʙ
    

    View Slide

36. EN
    ES FR JA
    RU ZH DE
    riotjs.com
    υΩϡϝϯτͷࠃࡍԽ
    

    View Slide

37. &YBNQMFT
    

    View Slide

38. HMPCBMNJYJO
    var logMixin = {
    log: function(m) {
    console.log(m)
    }
    }
    riot.mixin(logMixin)
    Wʙ
    
    { opts.title }
    <br/>this.log(‘hey!’)<br/>
    
    

    View Slide

39. 
    
    
    
    Wʙ
    EBUBJT
    

    View Slide

40. 
    
    {item.key}
    {item.value}
    
    
    W ʙ
    WJSUVBM
    

    View Slide

41. w $ISPNFͷ

    ϓϥάΠϯͰࠔΔ݅
    w SJPUDTQKT
    Wʙ
    $POUFOU4FDVSJUZ1PMJDZ
    $41ରԠ
    

    View Slide

42. ߴ଎Խ࠷దԽ
    ϧʔϓͷڍಈͷpY
    N @@
    N
    

    View Slide

43. JGଐੑͷڍಈ
    Wʙ
    w JGଐੑΛ͚ͭͨ࣌ʹɺ

    USVFʹͳΔ·ͰϚ΢ϯτ͞Εͳ͍
    w JGଐੑΛ͚ͭͨ࣌ʹɺ

    GBMTFͰ΋Ϛ΢ϯτ͞Εͯ͠·͏
    ॏཁ
    

    View Slide

44. όϯυϧํ๏
    w ಠࣗ
    w TNBTI
    w SPMMVQ
    

    View Slide

45. View Slide

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

    View Slide

47. ·ͣ͸Ϋϩʔϯ
    

    View Slide

48. ίʔσΟϯάελΠϧ
    w ߦ຤ͷηϛίϩϯͳ͠
    w ୹͍ͷ͕ਖ਼ٛ
    w ΍͸ڍಈΛཧղͯ͠࢖͏
    w JGจ΍GPSจͰɺলུՄೳͰ͋Ε͹\^Λ࢖Θͳ͍
    w ԋࢉࢠͷධՁॱΛਖ਼͘͠ߟྀɻ৑௕ͳ
    Λ࢖Θͳ͍
    w &4Ͱॻ͕͘ɺ

    ม׵࣌ʹ௕͘ͳΔ$MBTTͳͲ͸࢖Θͳ͍ ݱࡏͷͱ͜Ζ
    
    w ಠࣗͷؔ਺Λ༏ઌతʹ࢖͏ ৔໘͕͋Δ
    
    w 0CKFDUBTTJHO
    Ͱ͸ͳ͘ɺFYUFOE
    
    w <>GPS&BDI
    Ͱ͸ͳ͘ɺFBDI
    
    

    View Slide

49. όϯυϧํ๏
    w ϏϧυͳͲͷλεΫ࣮ߦʹ͸NBLFΛ࢖͏ɻ
    w όϯυϥ͸3PMMVQ
    w &4ม׵͸#BCFM
    w PCTFSWBCMF UNQM DPNQJMFS͸֎෦ϦϙδτϦ

    ˞͔ΒɺSJPUSPVUF͸ؚ·Εͳ͍
    w ༻్ผʹෳ਺ͷόʔδϣϯΛ༻ҙ
    

    View Slide

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
    ϑΥϧμߏ੒
    

    View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. Ϛ΢ϯτ͢Δ·Ͱ
    w SJPUUBH
    ؔ਺Ͱొ࿥ࡁΈͷɺλάͷ࣮૷Λऔಘ
    w λάΛΠϯελϯεԽ
    w λάͷ࣮૷ )5.-ςϯϓϨʔτ
    ΛJOOFS)5.-ʹಥͬࠐΉ
    w ύʔε͢Δɺͱ͍͏ΑΓ%0.Λτϥόʔεͯ͠ɺղੳ
    w ༩͑ΒΕͨσʔλͰɺλάͷ಺༰Λߋ৽
    w ςϯϓϨʔτม਺ FYQSFTTJPO
    Λߋ৽
    w Ϛ΢ϯτ׬ྃΠϕϯτ
    

    View Slide

56. 
    { message }
    <br/>this.message = "Hello!"<br/>
    
    riot.tag2(‘my-tag’,
    '{ message }’,
    ‘', '',
    function(opts) { this.message = "Hello!" }
    )
    riot.mount(‘#main’, ‘my-tag’)
    #main
    DOM
    flag flag
    
    { message }
    
    
    Hello!
    
    ⁞
      ⁠
    
    Hello!
    
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

63. View Slide

64. 5IBOLZPV
    GCDPNHSPVQTUPLZPSJPU HJUUFSJNSJPUSJPU
    

    View Slide

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

    View Slide