Riot and Components

Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa ͱ
ίϯϙʔωϯτ ΧελϜλά

HJUIVCDPNDPHOJUPN

3FBDU 1PMZNFS 7VF 3JPU "OHVMBS ʜ 6* 'MVY 3FEVY ΄͔֤छ
͋Γ͗͢ ʜ ϑϨʔϜϫʔΫϧʔλ $44 4BTT -&44 #&. 1PTU$44 ʜ $44 3PMMVQ #SPXTFSJGZ 8FC1BDL 4ZTUFN+4 ʜ .PEVMF#VOEMFS HVMQ OQN NBLF HSVOU ʜ λεΫϥϯφʔ &4 5ZQF4DSJQU 'MPX $P⒎FF4DSJQU &4 ʜ ݴޠ &YQSFTT -PPQCBDL 3FMBZ ,PB ʜ αʔόαΠυ LBSNB SFDUBOHVMBS OJHIUNBSF ʜ ςετɾMJOU FTMJOU BWB SJPUSPVUF

3FBDU 1PMZNFS 7VF 3JPU "OHVMBS ʜ 6* 'MVY 3FEVY ΄͔֤छ
͋Γ͗͢ ʜ ϑϨʔϜϫʔΫϧʔλ $44 4BTT -&44 #&. 1PTU$44 ʜ $44 3PMMVQ #SPXTFSJGZ 8FC1BDL 4ZTUFN+4 ʜ .PEVMF#VOEMFS HVMQ OQN NBLF HSVOU ʜ λεΫϥϯφʔ &4 5ZQF4DSJQU 'MPX $P⒎FF4DSJQU &4 ʜ ݴޠ &YQSFTT -PPQCBDL 3FMBZ ,PB ʜ αʔόαΠυ LBSNB SFDUBOHVMBS OJHIUNBSF ʜ ςετɾMJOU FTMJOU BWB SJPUSPVUF ٕज़ελοΫͷதͷɺίίɻ

3JPUKTͰग़དྷΔ͜ͱ ͷجຊ <div> <header>ఱؾ</header> <ul> <li>ۭ΋Α͏: ੖Ε</li> <li>ؾԹ: 10౓</li> <li>࣪౓:
30%</li> </ul> </div> <weather type=“clear” temperature=“10” humidity=“30%” />

3JPUKT͸ͲΜͳਓ޲͚

ʮઆ໌ॻಡ·ͳ͍ਓʯ޲͚ )5.-ɾ+4ɾ$44Λɺී௨ʹཧղ͍ͯͯ͠

SJPUKTDPNQMBZ ΍ͬͯΈΑ͏

3JPUKT͸ɺ طଘٕज़ͰʮίϯϙʔωϯτʯΛ ࣮ݱ͢ΔͨΊͷɺ࠷΋γϯϓϧͳ Ξϓϩʔνɻ

ίϯϙʔωϯτͬͯͳΜͳͷ ผ໊ʮΧελϜλάʯ ͔͋ͨ΋৽͍͠)5.-ཁૉΛɺ ࣗ෼Ͱ޷͖ͳΑ͏ʹఆٛͰ͖ͯ͠·͏ͳʹ͔ɻ

<nandemo-iindayo /> <div> </div>

ίϯϙʔωϯτWTςϯϓϨʔτ

ίϯϙʔωϯτ ςϯϓϨʔτ )5.-΁ͷม਺ຒΊࠐΈ :&4 :&4 ΧελϜλάͱͯ͠ৼΔ෣͏ :&4 /0 ϏϡʔϩδοΫ ϏϡʔͷϦΞϧλΠϜมߋ
:&4 /0 ϏδωεϩδοΫ /0 /0 ίϯϙʔωϯτWTςϯϓϨʔτ ॻ͍ͪΌμϝ

“Templates separate technologies, not concerns.” ʮςϯϓϨʔτ͕੾Γ෼͚͍ͯͨͷ͸ɺ ໰୊͡Όͳٕͯ͘ज़ͩʯ

ίϯϙʔωϯτWTK2VFSZ

ίϯϙʔωϯτWTK2VFSZ )5.-͕ඳը͞ΕΔ Πϕϯτ͕ى͖Δ )5.-͕ඳը͞ΕΔ K2VFSZͰॻ͖׵͑Δ Πϕϯτ͕ى͖Δ

ίϯϙʔωϯτ K2VFSZ )5.-ͷѻ͍ એݴత ॻ͍ͨ·Μ· ࠩ෼Λૢ࡞ σʔλͷྲྀΕ ετΞˠϏϡʔ جຊతʹ͸ ͪ͝Όͪ͝Ό
ίϯϙʔωϯτWTK2VFSZ

3JPUͰͷॻ͖ํ

<weather> <header>ఱؾ</header> <ul> <li>ۭ΋Α͏: { types[opts.type] }</li> <li>ؾԹ: { opts.temperature
}౓</li> <li>࣪౓: { opts.humidity }</li> </ul> <sctipt> this.types = { clear: ‘੖Ε’ } </script> <style scoped> :scope { display: block; } </style> </weather> HTML JS CSS

<html> <body> <weather></weather> <script src=“riot.js”></script> <script src=“weather.tag” type=“tag”></script> <script> riot.mount(‘weather’,
{ type: ‘clear’, temperature: 10, humidity: ’30%’ }) </script> <body> </body> ௚઀Ϛ΢ϯτ

<html> <body> <app></app> <script src=“riot.js”></script> <script src=“app.tag” type=“tag”></script> <script src=“weather.tag”
type=“tag”></script> <script> riot.mount(‘app’) </script> <body> </body> ؒ઀Ϛ΢ϯτ <app> <weather type=“clear” temperature=“10” humidity=“30%” /> </app>

ैདྷͷॻ͖ํ ਫฏ෼ۀ CSS HTML JS Template Template Template

3JPUͷॻ͖ํ ਨ௚౷߹ CSS HTML JS Template Template Template CSS JS
CSS JS CSS JS Tag A Tag B Tag C

w ෆඞཁʹόϥ͚͍ͯͨ΋ͷ͕ɺͻͱͭʹ w )5.-ɾ+4ɾ$44ͦΕͧΕཧղ͍ͯ͠Δඞཁ͋Γ ੹೚ൣғ͸ʮٕज़ʯͰ͸ͳ͘ ʮίϯϙʔωϯτʯʹ

͓ΘΓ

Riot and Components

Riot and Components

Tsutomu Kawamura

More Decks by Tsutomu Kawamura

Other Decks in Programming

Featured

Transcript

Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa ͱ

HJUIVCDPNDPHOJUPN

3FBDU 1PMZNFS 7VF 3JPU "OHVMBS ʜ 6* 'MVY 3FEVY ΄͔֤छ

3FBDU 1PMZNFS 7VF 3JPU "OHVMBS ʜ 6* 'MVY 3FEVY ΄͔֤छ

3JPUKTͰग़དྷΔ͜ͱ ͷجຊ <div> <header>ఱؾ</header> <ul> <li>ۭ΋Α͏: ੖Ε</li> <li>ؾԹ: 10౓</li> <li>࣪౓:

3JPUKT͸ͲΜͳਓ޲͚

ʮઆ໌ॻಡ·ͳ͍ਓʯ޲͚ )5.-ɾ+4ɾ$44Λɺී௨ʹཧղ͍ͯͯ͠

SJPUKTDPNQMBZ ΍ͬͯΈΑ͏

3JPUKT͸ɺ طଘٕज़ͰʮίϯϙʔωϯτʯΛ ࣮ݱ͢ΔͨΊͷɺ࠷΋γϯϓϧͳ Ξϓϩʔνɻ

ίϯϙʔωϯτͬͯͳΜͳͷ ผ໊ʮΧελϜλάʯ ͔͋ͨ΋৽͍͠)5.-ཁૉΛɺ ࣗ෼Ͱ޷͖ͳΑ͏ʹఆٛͰ͖ͯ͠·͏ͳʹ͔ɻ

<nandemo-iindayo /> <div> </div>

ίϯϙʔωϯτWTςϯϓϨʔτ

ίϯϙʔωϯτ ςϯϓϨʔτ )5.-΁ͷม਺ຒΊࠐΈ :&4 :&4 ΧελϜλάͱͯ͠ৼΔ෣͏ :&4 /0 ϏϡʔϩδοΫ ϏϡʔͷϦΞϧλΠϜมߋ

“Templates separate technologies, not concerns.” ʮςϯϓϨʔτ͕੾Γ෼͚͍ͯͨͷ͸ɺ ໰୊͡Όͳٕͯ͘ज़ͩʯ

ίϯϙʔωϯτWTK2VFSZ

ίϯϙʔωϯτWTK2VFSZ )5.-͕ඳը͞ΕΔ Πϕϯτ͕ى͖Δ )5.-͕ඳը͞ΕΔ K2VFSZͰॻ͖׵͑Δ Πϕϯτ͕ى͖Δ

ίϯϙʔωϯτ K2VFSZ )5.-ͷѻ͍ એݴత ॻ͍ͨ·Μ· ࠩ෼Λૢ࡞ σʔλͷྲྀΕ ετΞˠϏϡʔ جຊతʹ͸ ͪ͝Όͪ͝Ό

3JPUͰͷॻ͖ํ

<weather> <header>ఱؾ</header> <ul> <li>ۭ΋Α͏: { types[opts.type] }</li> <li>ؾԹ: { opts.temperature

<html> <body> <weather></weather> <script src=“riot.js”></script> <script src=“weather.tag” type=“tag”></script> <script> riot.mount(‘weather’,

<html> <body> <app></app> <script src=“riot.js”></script> <script src=“app.tag” type=“tag”></script> <script src=“weather.tag”

ैདྷͷॻ͖ํ ਫฏ෼ۀ CSS HTML JS Template Template Template

3JPUͷॻ͖ํ ਨ௚౷߹ CSS HTML JS Template Template Template CSS JS

w ෆඞཁʹόϥ͚͍ͯͨ΋ͷ͕ɺͻͱͭʹ w )5.-ɾ+4ɾ$44ͦΕͧΕཧղ͍ͯ͠Δඞཁ͋Γ ੹೚ൣғ͸ʮٕज़ʯͰ͸ͳ͘ ʮίϯϙʔωϯτʯʹ

͓ΘΓ