Upgrade to Pro — share decks privately, control downloads, hide ads and more …

syntagme.jsの紹介

mizuki_r
June 03, 2016

 syntagme.jsの紹介

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

mizuki_r

June 03, 2016
Tweet

More Decks by mizuki_r

Other Decks in Technology

Transcript

  1. syntagme.js
    2016/06/03 Gotanda.js #4
    @miuzki_r

    View full-size slide

  2. @mizuki_r
    五反田M社
    某位置ゲー
    フロントエンドエンジニア
    JSer
    angular, vue, riot
    “HTMLは情報設計言語です!”

    View full-size slide

  3. what is syntagme.js
    なにそれ

    View full-size slide

  4. a flux like framework!
    • https://github.com/rymizuki/syntagmejs
    • fluxͳײ͡ͷϑϨʔϜϫʔΫ
    • Single State
    • Simple & Lite & Easy
    • Extendable class

    View full-size slide

  5. architecture

    View full-size slide

  6. very lightweight

    View full-size slide

  7. how to use
    つかいかた

    View full-size slide

  8. Lifecycle
    • reducer - reducerͷొ࿥
    • subscribe - viewͱstoreͷ઀ଓ
    • listen - ঢ়ଶมߋͷݕ஌։࢝
    • action - ACTIONͷൃߦ
    • disaptch - ACTIONΛStoreʹ഑෍͠ɺReducerΛ࣮ߦ

    View full-size slide

  9. reducerの登録

    View full-size slide

  10. 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

    View full-size slide

  11. Viewと接続

    View full-size slide

  12. JNQPSUBQQGSPNFYBNQMFBQQ
    JNQPSUSJPUGSPNSJPU
    JNQPSUFYBNQMFDPNQPOFOUTFYBNQMF
    QSPWJEFS
    FYBNQMFTUBUF\TUBUF^FYBNQMF
    TDSJQU
    PO.PVOU
    \
    BQQTVCTDSJCF UIJTVQEBUF4UBUF

    BQQMJTUFO

    ^
    VQEBUF4UBUF
    \
    UIJTVQEBUF \TUBUFBQQHFU4UBUF
    ^

    ^
    UIJTPO NPVOU UIJTPO.PVOU

    TDSJQU
    QSPWJEFS

    View full-size slide

  13. actionの発行

    View full-size slide

  14. 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

    View full-size slide

  15. async actionの発行

    View full-size slide

  16. 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

    View full-size slide

  17. カスタマイズ

    View full-size slide

  18. JNQPSU\4ZOUBHNF^GSPNTZOUBHNF
    DMBTT"QQFYUFOET4ZOUBHNF\
    DPOOFDU
    \
    DPOOFDUEJTQBUDIFSUPTUPSF
    ^
    TVCTDSJCF TVCTDSJCFS
    \
    TVCTDSJCFUPTUBUFDIBOHFGSPNTUPSF
    ^
    EJTQBUDI QBZMPBE
    \
    BEEEJTQBUDIIPPL
    ^
    SFEVDFS SFEVDFS
    \
    BEEBOZSFEVDFSIPPL
    ^
    IBOEMF"DUJPO UZQF TUVGG
    \
    IBOEMFDSFBUFBDUJPO
    ^
    ^
    FYQPSUEFGBVMUOFX"QQ

    View full-size slide

  19. conclusion
    まとめ!

    View full-size slide

  20. syntagme.jsとは
    • γϯϓϧͰ
    • ܰྔͰ
    • ؆୯ͳ
    • FluxϑϨʔϜϫʔΫ

    View full-size slide

  21. こんな人におすすめ
    • Redux, flux-utilsΛ࢖͑ͳ͍ɺ࢖͍ͨ͘ͳ͍
    • ͬ͞͞ͱಈ͔͍ͨ͠
    • ΊͪΌͪ͘ΌΧελϚΠζ͍ͨ͠

    View full-size slide

  22. ご意見お待ちしてます!
    ご清聴ありがとうございました

    View full-size slide