Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Riot and Components
Search
Tsutomu Kawamura
February 24, 2016
Programming
4
640
Riot and Components
「Riotとコンポーネント」
Tokyo Riot #1
https://www.facebook.com/events/1547987355493585/
Tsutomu Kawamura
February 24, 2016
Tweet
Share
More Decks by Tsutomu Kawamura
See All by Tsutomu Kawamura
Connect your library to the world
cognitom
0
130
JTF2018
cognitom
5
1.3k
Riot: changing on v3 and its companion tools
cognitom
0
130
LLoT Night - Riot.js
cognitom
1
1k
Felt - a simple web server with the power of the future
cognitom
0
320
Riot: all about v2 to v3
cognitom
7
3.8k
Create A Small Studio in A Cafe
cognitom
2
920
Riot.js in WPD-Week
cognitom
19
11k
Cooking Automation
cognitom
1
550
Other Decks in Programming
See All in Programming
CSC509 Lecture 05
javiergs
PRO
0
310
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
XP, Testing and ninja testing ZOZ5
m_seki
3
810
Google Opalで使える37のライブラリ
mickey_kubo
3
130
NIKKEI Tech Talk#38
cipepser
0
160
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
890
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
870
CSC305 Lecture 08
javiergs
PRO
0
270
CSC305 Lecture 09
javiergs
PRO
0
310
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
230
チームの境界をブチ抜いていけ
tokai235
0
210
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
A designer walks into a library…
pauljervisheath
209
24k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
Navigating Team Friction
lara
190
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Mobile First: as difficult as doing things right
swwweet
225
10k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
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ͦΕͧΕཧղ͍ͯ͠Δඞཁ͋Γ ൣғʮٕज़ʯͰͳ͘ ʮίϯϙʔωϯτʯʹ
͓ΘΓ