Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Riot: all about v2 to v3

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

More Decks by Tsutomu Kawamura

Other Decks in Programming

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/>

    View Slide

  31. ZJFME

    Hello
    this.text = 'world'



    { text }


    Hello world



    View Slide

  32. NJYJO
    var logMixin = {
    log: function(m) {
    console.log(m)
    }
    }


    { 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)
    })

    View Slide

  34. SJPUDPNQJMFS UNQM

    View Slide

  35. SJPUDMJ PCTFSWBCMF

    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)


    { opts.title }
    <br/>this.log(‘hey!’)<br/>

    View Slide






  39. EBUBJT

    View Slide



  40. {item.key}
    {item.value}


    W ʙ
    WJSUVBM

    View Slide

  41. w $ISPNFͷ

    ϓϥάΠϯͰࠔΔ݅
    w SJPUDTQKT

    $POUFOU4FDVSJUZ1PMJDZ
    $41ରԠ

    View Slide

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

    View Slide

  43. JGଐੑͷڍಈ

    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