syntagme.jsの紹介

Gotanda.js #4の発表資料です

Transcript

1. syntagme.js 2016/06/03 Gotanda.js #4 @miuzki_r
2. @mizuki_r 五反田M社 某位置ゲー フロントエンドエンジニア JSer angular, vue, riot “HTMLは情報設計言語です！”
3. what is syntagme.js なにそれ
4. a flux like framework! • https://github.com/rymizuki/syntagmejs • fluxͳײ͡ͷϑϨʔϜϫʔΫ • Single State • Simple & Lite & Easy • Extendable class
5. architecture
6. very lightweight
7. how to use つかいかた
8. Lifecycle • reducer - reducerͷొ࿥ • subscribe - viewͱstoreͷ઀ଓ • listen - ঢ়ଶมߋͷݕ஌։࢝ • action - ACTIONͷൃߦ • disaptch - ACTIONΛStoreʹ഑෍͠ɺReducerΛ࣮ߦ
9. reducerの登録
10. JNQPSU
    TZOUBHNF
    GSPN
    TZOUBHNF
    DPOTU
    BQQ
    
    TZOUBHNF
    BQQSFEVDFS GVODUJPO
    VTFS3FEVDFS
    QBZMPBE
    QSFWJPVT\^
    \
    
    
    TXJUDI
    QBZMPBEBDUJPOUZQF
    \
    
    
    
    
    DBTF
    
    
    */*5
    
    
    
    
    
    
    
    
    SFUVSO
    0CKFDUBTTJHO \^
    QSFWJPVT
    \VTFS
    OVMM^
    
    
    
    
    DBTF
    
    -0(*/@3&40-7&
    SFUVSO
    0CKFDUBTTJHO \^
    QSFWJPVT
    \VTFS
    BDUJPOVTFS^
    
    
    
    
    DBTF
    -0(065@3&40-7&
    SFUVSO
    0CKFDUBTTJHO \^
    QSFWJPVT
    \VTFS
    OVMM^
    
    
    ^
    ^
    BQQSFEVDFS GVODUJPO
    UBTL-JTU3FEVDFS
    \BDUJPO^
    QSFWJPVT\^
    \
    
    
    TXJUDI
    BDUJPOUZQF
    \
    
    
    
    
    DBTF
    
    */*5
    
    
    
    
    
    
    
    
    SFUVSO
    0CKFDUBTTJHO \^
    QSFWJPVT
    \UBTL@MJTU
    <>^
    
    
    
    
    DBTF
    '&5$)@3&40-7&
    SFUVSO
    0CKFDUBTTJHO \^
    QSFWJPVT
    \UBTL@MJTU
    BDUJPOMJTU^
    
    
    ^
    ^
    BQQSFEVDFS GVODUJPO
    UBTL3FEVDFS
    \BDUJPO^
    QSFWJPVT\
    \
    
    
    TXJUDI
    BDUJPOUZQF
    \
    
    
    
    
    DBTF
    
    
    */*5
    
    
    
    
    
    
    
    SFUVSO
    0CKFDUBTTJHO \^
    QSFWJPVT
    \UBTL
    OVMM^
    
    
    
    
    DBTF
    4&-&$5
    
    
    
    
    
    
    
    SFUVSO
    0CKFDUBTTJHO \^
    QSFWJPVT
    \
    
    
    
    
    
    
    UBTL
    @GJOE QSFWJPVTUBTL@MJTU
    UBTL
    
    \
    SFUVSO
    UBTLJE
    
    BDUJPOUBTL@JE
    ^
    
    
    
    
    ^
    
    
    
    
    DBTF
    
    '&5$)@340-7&
    SFUVSO
    0CKFDUBTTJHO \^
    QSFWJPVT
    \UBTL
    QSFWJPVTUBTL@MJTU<>^
    
    
    ^
    ^
    FYQPSUT
    EFGBVMU
    BQQ
11. Viewと接続
12. JNQPSU
    BQQ
    
    GSPN
    FYBNQMFBQQ
    JNQPSU
    SJPU
    GSPN
    SJPU
    JNQPSU
    FYBNQMFDPNQPOFOUTFYBNQMF
    QSPWJEFS
    
    
    FYBNQMF
    TUBUF\TUBUF^FYBNQMF
    
    
    TDSJQU
    
    
    
    
    PO.PVOU
    
    \
    
    
    
    
    
    
    BQQTVCTDSJCF UIJTVQEBUF4UBUF
    
    
    
    
    
    
    BQQMJTUFO
    
    
    
    
    ^
    
    
    
    
    VQEBUF4UBUF
    
    \
    
    
    
    
    
    
    UIJTVQEBUF \TUBUF
    BQQHFU4UBUF ^
    
    
    
    
    ^
    
    
    
    
    UIJTPO NPVOU
    UIJTPO.PVOU
    
    
    TDSJQU
    QSPWJEFS
    
13. actionの発行
14. JNQPSU
    SJPU
    GSPN
    SJPU
    JNQPSU
    BQQ
    
    GSPN
    FYBNQMFBQQ
    FYBNQMF
    
    
    JOQVU
    UZQFUFYU
    OBNFUBTL@OBNF
    
    
    CVUUPO
    PODMJDL\
    SFHJTUFS
    ^BEE
    UBTLCVUUPO
    
    
    TDSJQU
    
    
    
    
    UIJTSFHJTUFS
    
    \
    
    
    
    
    
    
    MFU
    UBTL@OBNF
    
    UIJTUBTL@OBNFWBMVF
    
    
    
    
    
    
    BQQBD 3&(*45&3
    \UBTL@OBNF
    UBTL@OBNF^
    
    
    
    
    
    
    
    TZOUBHNFEJTQBUDIFSEJTQBUDI \
    
    
    
    
    
    
    
    
    
    UZQF
    3&(*45&3
    
    
    
    
    
    
    
    
    
    UBTL@OBNF
    
    
    
    
    
    
    
    ^
    
    
    
    
    ^
    
    
    TDSJQU
    FYBNQMF
    
15. async actionの発行
16. JNQPSU
    SJPU
    GSPN
    SJPU
    JNQPSU
    BQQ
    
    GSPN
    FYBNQMFBQQ
    JNQPSU
    UBTL@SFQPTJUPSZ
    GSPN
    FYBNQMFSFQPTJUPSJFTUBTL
    FYBNQMF
    
    
    JOQVU
    UZQFUFYU
    OBNFUBTL@OBNF
    
    
    CVUUPO
    PODMJDL\
    SFHJTUFS
    ^BEE
    UBTLCVUUPO
    
    
    TDSJQU
    
    
    
    
    UIJTSFHJTUFS
    
    \
    
    
    
    
    
    
    MFU
    UBTL@OBNF
    
    UIJTUBTL@OBNFWBMVF
    
    
    
    
    
    
    BQQBD 3&(*45&3
    
    
    \
    
    EJTQBUDI
    3&(*45&3
    
    
    
    
    
    
    
    
    SFUVSO
    UBTL@SFQPTJUPSZBEE \
    UBTL@OBNF
    ^
    
    
    
    
    
    
    
    
    
    
    UIFO UBTL
    
    \
    
    
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    \
    UBTL
    ^
    
    
    
    
    
    
    EJTQBUDI
    3&(*45&3@3&40-7&
    
    
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    
    
    
    
    
    
    DBUDI SFKFDUJPO
    
    \
    
    
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    \
    SFKFDUJPO
    ^
    
    EJTQBUDI
    3&(*45&3@3&+&$5
    
    
    
    
    
    
    
    
    
    
    ^
    
    
    
    
    
    
    ^
    
    
    
    
    ^
    
    
    TDSJQU
    FYBNQMF
    
17. カスタマイズ
18. JNQPSU
    \
    4ZOUBHNF
    ^
    GSPN
    TZOUBHNF
    DMBTT
    "QQ
    FYUFOET
    4ZOUBHNF
    \
    
    
    DPOOFDU
    
    \
    
    
    
    
    
    DPOOFDU
    EJTQBUDIFS
    UP
    TUPSF
    
    
    ^
    
    
    TVCTDSJCF
    TVCTDSJCFS
    \
    
    
    
    
    
    TVCTDSJCF
    UP
    TUBUF
    DIBOHF
    GSPN
    TUPSF
    
    
    ^
    
    
    EJTQBUDI
    QBZMPBE
    \
    
    
    
    
    
    BEE
    EJTQBUDI
    IPPL
    
    
    ^
    
    
    SFEVDFS
    SFEVDFS
    \
    
    
    
    
    
    BEE
    BOZ
    SFEVDFS
    IPPL
    
    
    ^
    
    
    IBOEMF"DUJPO
    UZQF
    TUVGG
    \
    
    
    
    
    
    IBOEMF
    DSFBUF
    BDUJPO
    
    
    ^
    ^
    FYQPSU
    EFGBVMU
    OFX
    "QQ
    
19. conclusion まとめ！
20. syntagme.jsとは • γϯϓϧͰ • ܰྔͰ • ؆୯ͳ • FluxϑϨʔϜϫʔΫ
21. こんな人におすすめ • Redux, flux-utilsΛ࢖͑ͳ͍ɺ࢖͍ͨ͘ͳ͍ • ͬ͞͞ͱಈ͔͍ͨ͠ • ΊͪΌͪ͘ΌΧελϚΠζ͍ͨ͠
22. ご意見お待ちしてます！ ご清聴ありがとうございました