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. 4DPQFE$44 <p>WP-D Week</p> <style scoped> :scope { /* ίϯϙʔωϯτͦͷ΋ͷͷελΠϧ */

    } p { /* ίϯϙʔωϯτ಺ͷpλάͷΈʹ༗ޮ */ } </style> Wʙ
  2. 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> 
  3. 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>
  4. 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>
  5. ίʔσΟϯάελΠϧ w ߦ຤ͷηϛίϩϯͳ͠ w ୹͍ͷ͕ਖ਼ٛ w ΍͸ڍಈΛཧղͯ͠࢖͏ w JGจ΍GPSจͰɺলུՄೳͰ͋Ε͹\^Λ࢖Θͳ͍ w

    ԋࢉࢠͷධՁॱΛਖ਼͘͠ߟྀɻ৑௕ͳ Λ࢖Θͳ͍ w &4Ͱॻ͕͘ɺ
 ม׵࣌ʹ௕͘ͳΔ$MBTTͳͲ͸࢖Θͳ͍ ݱࡏͷͱ͜Ζ w ಠࣗͷؔ਺Λ༏ઌతʹ࢖͏ ৔໘͕͋Δ  w 0CKFDUBTTJHO Ͱ͸ͳ͘ɺFYUFOE  w <>GPS&BDI Ͱ͸ͳ͘ɺFBDI
  6. όϯυϧํ๏ w ϏϧυͳͲͷλεΫ࣮ߦʹ͸NBLFΛ࢖͏ɻ w όϯυϥ͸3PMMVQ w &4ม׵͸#BCFM w PCTFSWBCMF UNQM

    DPNQJMFS͸֎෦ϦϙδτϦ
 ˞͔ΒɺSJPUSPVUF͸ؚ·Εͳ͍ w ༻్ผʹෳ਺ͷόʔδϣϯΛ༻ҙ
  7. 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 ϑΥϧμߏ੒
  8. Ϛ΢ϯτ͢Δ·Ͱ w SJPUUBH ؔ਺Ͱొ࿥ࡁΈͷɺλάͷ࣮૷Λऔಘ w λάΛΠϯελϯεԽ w λάͷ࣮૷ )5.-ςϯϓϨʔτ ΛJOOFS)5.-ʹಥͬࠐΉ

    w ύʔε͢Δɺͱ͍͏ΑΓ%0.Λτϥόʔεͯ͠ɺղੳ w ༩͑ΒΕͨσʔλͰɺλάͷ಺༰Λߋ৽ w ςϯϓϨʔτม਺ FYQSFTTJPO Λߋ৽ w Ϛ΢ϯτ׬ྃΠϕϯτ
  9. <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>