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

syntagme.jsの紹介

E1dbe585427fa87cbfb0f4dbcebc3b2f?s=47 mizuki_r
June 03, 2016

 syntagme.jsの紹介

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

E1dbe585427fa87cbfb0f4dbcebc3b2f?s=128

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

  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. 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
  11. Viewと接続

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

     BQQMJTUFO  ^ VQEBUF4UBUF \ UIJTVQEBUF \TUBUFBQQHFU4UBUF ^  ^ UIJTPO NPVOU UIJTPO.PVOU  TDSJQU QSPWJEFS
  13. actionの発行

  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
  15. async actionの発行

  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
  17. カスタマイズ

  18. JNQPSU\4ZOUBHNF^GSPNTZOUBHNF DMBTT"QQFYUFOET4ZOUBHNF\ DPOOFDU \ DPOOFDUEJTQBUDIFSUPTUPSF ^ TVCTDSJCF TVCTDSJCFS \ TVCTDSJCFUPTUBUFDIBOHFGSPNTUPSF

    ^ EJTQBUDI QBZMPBE \ BEEEJTQBUDIIPPL ^ SFEVDFS SFEVDFS \ BEEBOZSFEVDFSIPPL ^ IBOEMF"DUJPO UZQF TUVGG \ IBOEMFDSFBUFBDUJPO ^ ^ FYQPSUEFGBVMUOFX"QQ
  19. conclusion まとめ!

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

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

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