Slide 1
Slide 1 text
syntagme.js
2016/06/03 Gotanda.js #4
@miuzki_r
Slide 2
Slide 2 text
@mizuki_r
五反田M社
某位置ゲー
フロントエンドエンジニア
JSer
angular, vue, riot
“HTMLは情報設計言語です！”
Slide 3
Slide 3 text
what is syntagme.js
なにそれ
Slide 4
Slide 4 text
a flux like framework!
• https://github.com/rymizuki/syntagmejs
• fluxͳײ͡ͷϑϨʔϜϫʔΫ
• Single State
• Simple & Lite & Easy
• Extendable class
Slide 5
Slide 5 text
architecture
Slide 6
Slide 6 text
very lightweight
Slide 7
Slide 7 text
how to use
つかいかた
Slide 8
Slide 8 text
Lifecycle
• reducer - reducerͷొ
• subscribe - viewͱstoreͷଓ
• listen - ঢ়ଶมߋͷݕ։࢝
• action - ACTIONͷൃߦ
• disaptch - ACTIONΛStoreʹ͠ɺReducerΛ࣮ߦ
Slide 9
Slide 9 text
reducerの登録
Slide 10
Slide 10 text
JNQPSUTZOUBHNFGSPNTZOUBHNF
DPOTUBQQTZOUBHNF
BQQSFEVDFS GVODUJPOVTFS3FEVDFS QBZMPBE
QSFWJPVT\^
\
TXJUDI QBZMPBEBDUJPOUZQF
\
DBTF*/*5SFUVSO0CKFDUBTTJHO \^
QSFWJPVT
\VTFSOVMM^
DBTF-0(*/@3&40-7&SFUVSO0CKFDUBTTJHO \^
QSFWJPVT
\VTFSBDUJPOVTFS^
DBTF-0(065@3&40-7&SFUVSO0CKFDUBTTJHO \^
QSFWJPVT
\VTFSOVMM^
^
^
BQQSFEVDFS GVODUJPOUBTL-JTU3FEVDFS \BDUJPO^
QSFWJPVT\^
\
TXJUDI BDUJPOUZQF
\
DBTF*/*5SFUVSO0CKFDUBTTJHO \^
QSFWJPVT
\UBTL@MJTU<>^
DBTF'&5$)@3&40-7&SFUVSO0CKFDUBTTJHO \^
QSFWJPVT
\UBTL@MJTUBDUJPOMJTU^
^
^
BQQSFEVDFS GVODUJPOUBTL3FEVDFS \BDUJPO^
QSFWJPVT\
\
TXJUDI BDUJPOUZQF
\
DBTF*/*5SFUVSO0CKFDUBTTJHO \^
QSFWJPVT
\UBTLOVMM^
DBTF4&-&$5SFUVSO0CKFDUBTTJHO \^
QSFWJPVT
\
UBTL@GJOE QSFWJPVTUBTL@MJTU
UBTL
\SFUVSOUBTLJEBDUJPOUBTL@JE^
^
DBTF'&5$)@340-7&SFUVSO0CKFDUBTTJHO \^
QSFWJPVT
\UBTLQSFWJPVTUBTL@MJTU<>^
^
^
FYQPSUTEFGBVMUBQQ
Slide 11
Slide 11 text
Viewと接続
Slide 12
Slide 12 text
JNQPSUBQQGSPNFYBNQMFBQQ
JNQPSUSJPUGSPNSJPU
JNQPSUFYBNQMFDPNQPOFOUTFYBNQMF
QSPWJEFS
FYBNQMFTUBUF\TUBUF^FYBNQMF
TDSJQU
PO.PVOU
\
BQQTVCTDSJCF UIJTVQEBUF4UBUF
BQQMJTUFO
^
VQEBUF4UBUF
\
UIJTVQEBUF \TUBUFBQQHFU4UBUF
^
^
UIJTPO NPVOU
UIJTPO.PVOU
TDSJQU
QSPWJEFS
Slide 13
Slide 13 text
actionの発行
Slide 14
Slide 14 text
JNQPSUSJPUGSPNSJPU
JNQPSUBQQGSPNFYBNQMFBQQ
FYBNQMF
JOQVUUZQFUFYUOBNFUBTL@OBNF
CVUUPOPODMJDL\SFHJTUFS^BEEUBTLCVUUPO
TDSJQU
UIJTSFHJTUFS
\
MFUUBTL@OBNFUIJTUBTL@OBNFWBMVF
BQQBD 3&(*45&3
\UBTL@OBNFUBTL@OBNF^
TZOUBHNFEJTQBUDIFSEJTQBUDI \
UZQF3&(*45&3
UBTL@OBNF
^
^
TDSJQU
FYBNQMF
Slide 15
Slide 15 text
async actionの発行
Slide 16
Slide 16 text
JNQPSUSJPUGSPNSJPU
JNQPSUBQQGSPNFYBNQMFBQQ
JNQPSUUBTL@SFQPTJUPSZGSPNFYBNQMFSFQPTJUPSJFTUBTL
FYBNQMF
JOQVUUZQFUFYUOBNFUBTL@OBNF
CVUUPOPODMJDL\SFHJTUFS^BEEUBTLCVUUPO
TDSJQU
UIJTSFHJTUFS
\
MFUUBTL@OBNFUIJTUBTL@OBNFWBMVF
BQQBD 3&(*45&3
\EJTQBUDI3&(*45&3
SFUVSOUBTL@SFQPTJUPSZBEE \UBTL@OBNF^
UIFO UBTL
\
SFUVSO\UBTL^EJTQBUDI3&(*45&3@3&40-7&
^
DBUDI SFKFDUJPO
\
SFUVSO\SFKFDUJPO^EJTQBUDI3&(*45&3@3&+&$5
^
^
^
TDSJQU
FYBNQMF
Slide 17
Slide 17 text
カスタマイズ
Slide 18
Slide 18 text
JNQPSU\4ZOUBHNF^GSPNTZOUBHNF
DMBTT"QQFYUFOET4ZOUBHNF\
DPOOFDU
\
DPOOFDUEJTQBUDIFSUPTUPSF
^
TVCTDSJCF TVCTDSJCFS
\
TVCTDSJCFUPTUBUFDIBOHFGSPNTUPSF
^
EJTQBUDI QBZMPBE
\
BEEEJTQBUDIIPPL
^
SFEVDFS SFEVDFS
\
BEEBOZSFEVDFSIPPL
^
IBOEMF"DUJPO UZQF
TUVGG
\
IBOEMFDSFBUFBDUJPO
^
^
FYQPSUEFGBVMUOFX"QQ
Slide 19
Slide 19 text
conclusion
まとめ！
Slide 20
Slide 20 text
syntagme.jsとは
• γϯϓϧͰ
• ܰྔͰ
• ؆୯ͳ
• FluxϑϨʔϜϫʔΫ
Slide 21
Slide 21 text
こんな人におすすめ
• Redux, flux-utilsΛ͑ͳ͍ɺ͍ͨ͘ͳ͍
• ͬ͞͞ͱಈ͔͍ͨ͠
• ΊͪΌͪ͘ΌΧελϚΠζ͍ͨ͠
Slide 22
Slide 22 text
ご意見お待ちしてます！
ご清聴ありがとうございました