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: all about v2 to v3
Search
Tsutomu Kawamura
July 27, 2016
Programming
7
3.8k
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
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
Create A Small Studio in A Cafe
cognitom
2
920
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
640
Cooking Automation
cognitom
1
550
Other Decks in Programming
See All in Programming
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
630
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
4
1.3k
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
450
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
株式会社 Sun terras カンパニーデック
sunterras
0
230
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
Swift Concurrency - 状態監視の罠
objectiveaudio
2
460
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
960
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
780
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.2k
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
160
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Designing for Performance
lara
610
69k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Raft: Consensus for Rubyists
vanstee
139
7.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Side Projects
sachag
455
43k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Code Reviewing Like a Champion
maltzj
525
40k
A Tale of Four Properties
chriscoyier
160
23k
GraphQLとの向き合い方2022年版
quramy
49
14k
Done Done
chrislema
185
16k
Transcript
Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa RiotͷϥΨϫ:
ver 3ͱιʔείʔυղઆ
cognitom
None
$PEFS%PKP ϦϒϥΠζ
HJUIVCDPNDPHOJUPN
ࠓɺ͢͜ͱ
w 3JPUͷۙگ w 3JPUͷ։ൃମ੍ w ˠͰԿ͕มΘͬͨͷ w ιʔείʔυΛ͍ͯΈΑ͏ ͜ͷ͋ͨΓΛͦ͏͔ͱ
None
3JPUͷۙگ
ՆWFS ༧ఆ
͡Θ͡Θ͖ͯΔ
͏͙͢˒,
(JU)VCͷελʔ ˒ ίϯτϦϏϡʔλ ਓ ϓϧϦΫΤετͷ ݅ 2JJUBͷهࣄ ݅ 3JPUͷͻΖ͕Γ
W W ϑΝΠϧαΠζ ,# ,# ެࣜϦϙδτϦ ݸ ݸ ίΞίϛολʔ ਓ
ਓ एׯΆͬͪΌΓ
None
None
3JPUͷ։ൃମ੍
ίΞίϛολʔͷډॴ
݄W ϑΟϯϥϯυ
य़ εΠε͔Β ΞδΞͷ࠭യ
Ն ϝΩγί͔Β ձ৬తͳ ςΩαε͔Β ౦ژ͔Β
Ͳ͔͔͜Β ࣌ʑ߱ྟ
͕ɺ3JPUͰ͍ͬͯΔ͜ͱ
w ॳظͷςετେྔՃ w TUZMFλάରԠ w 4DPQFE$44ରԠ w υΩϡϝϯτͷࠃࡍԽ ͷίϯτϦϏϡʔγϣϯ w
SJPUFYBNQMF w SJPUSPVUF w LBSNBSJPU w SPMMVQQMVHJOSJPU ΄͔
None
ˠͰԿ͕มΘͬͨͷ
ͰՃ͞ΕΔػೳɺ ͱ͍͏ΑΓɺ ͔ΒมΘ͖ͬͯͨͱ͜Ζ
ςετ
None
4DPQFE$44 <p>WP-D Week</p> <style scoped> :scope { /* ίϯϙʔωϯτͦͷͷͷελΠϧ */
} p { /* ίϯϙʔωϯτͷpλάͷΈʹ༗ޮ */ } </style> Wʙ
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>
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>
SJPUSPVUF riot.route('/fruit', function(name) { console.log('The list of fruits') }) riot.route('/fruit/*',
function(name) { console.log('The detail of ' + name) }) Wʙ
SJPUDPNQJMFS UNQM Wʙ
SJPUDMJ PCTFSWBCMF Wʙ
EN ES FR JA RU ZH DE riotjs.com υΩϡϝϯτͷࠃࡍԽ
&YBNQMFT
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>
<div riot-tag="my-tag"></div> <div data-is=“my-tag"></div> <my-tag></my-tag> Wʙ EBUBJT
<dl> <virtual each={item in items}> <dt>{item.key}</dt> <dd>{item.value}</dd> </virtual> </dl> W
ʙ WJSUVBM
w $ISPNFͷ ϓϥάΠϯͰࠔΔ݅ w SJPUDTQKT Wʙ $POUFOU4FDVSJUZ1PMJDZ $41ରԠ
ߴԽ࠷దԽ ϧʔϓͷڍಈͷpY N @@ N
JGଐੑͷڍಈ Wʙ w JGଐੑΛ͚ͭͨ࣌ʹɺ USVFʹͳΔ·ͰϚϯτ͞Εͳ͍ w JGଐੑΛ͚ͭͨ࣌ʹɺ GBMTFͰϚϯτ͞Εͯ͠·͏ ॏཁ
όϯυϧํ๏ w ಠࣗ w TNBTI w SPMMVQ
None
ιʔείʔυΛ͍ͯΈΑ͏
·ͣΫϩʔϯ
ίʔσΟϯάελΠϧ w ߦͷηϛίϩϯͳ͠ w ͍ͷ͕ਖ਼ٛ w ڍಈΛཧղͯ͠͏ w JGจGPSจͰɺলུՄೳͰ͋Ε\^ΛΘͳ͍ w
ԋࢉࢠͷධՁॱΛਖ਼͘͠ߟྀɻͳ ΛΘͳ͍ w &4Ͱॻ͕͘ɺ ม࣌ʹ͘ͳΔ$MBTTͳͲΘͳ͍ ݱࡏͷͱ͜Ζ w ಠࣗͷؔΛ༏ઌతʹ͏ ໘͕͋Δ w 0CKFDUBTTJHO Ͱͳ͘ɺFYUFOE w <>GPS&BDI Ͱͳ͘ɺFBDI
όϯυϧํ๏ w ϏϧυͳͲͷλεΫ࣮ߦʹNBLFΛ͏ɻ w όϯυϥ3PMMVQ w &4ม#BCFM w PCTFSWBCMF UNQM
DPNQJMFS֎෦ϦϙδτϦ ˞͔ΒɺSJPUSPVUFؚ·Εͳ͍ w ༻్ผʹෳͷόʔδϣϯΛ༻ҙ
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 ϑΥϧμߏ
None
None
None
None
Ϛϯτ͢Δ·Ͱ w SJPUUBH ؔͰొࡁΈͷɺλάͷ࣮Λऔಘ w λάΛΠϯελϯεԽ w λάͷ࣮ )5.-ςϯϓϨʔτ ΛJOOFS)5.-ʹಥͬࠐΉ
w ύʔε͢Δɺͱ͍͏ΑΓ%0.Λτϥόʔεͯ͠ɺղੳ w ༩͑ΒΕͨσʔλͰɺλάͷ༰Λߋ৽ w ςϯϓϨʔτม FYQSFTTJPO Λߋ৽ w ϚϯτྃΠϕϯτ
<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>
None
None
None
͘ோΊͯΕɺେৎ
݄ ݄ ৄ͘͠2JJUB
13͓ͪͯ͠·͢ ϓϧϦΫΤετ
None
5IBOLZPV GCDPNHSPVQTUPLZPSJPU HJUUFSJNSJPUSJPU
ਫɾ༵ ԼͰ ళ൪ͯ͠·͢ ؾܰʹฉ͖ʹདྷͯ ͍ͩ͘͞