syntagme.jsの紹介

E1dbe585427fa87cbfb0f4dbcebc3b2f?s=47 mizuki_r
June 03, 2016
Technology
1
1.8k

 syntagme.jsの紹介

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

E1dbe585427fa87cbfb0f4dbcebc3b2f?s=128

mizuki_r

June 03, 2016
Tweet

Want more?

E1dbe585427fa87cbfb0f4dbcebc3b2f?s=48 rymizuki
0
57
E1dbe585427fa87cbfb0f4dbcebc3b2f?s=48 rymizuki
1
210
E1dbe585427fa87cbfb0f4dbcebc3b2f?s=48 rymizuki
0
200
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
10
540
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
2
270
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
180
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
6
350
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
6
220
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
310
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
580
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
170
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
250

Transcript

  1. 1.

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

  2. 2.

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

  3. 3.

    what is syntagme.js なにそれ

  4. 4.

    a flux like framework! • https://github.com/rymizuki/syntagmejs • fluxͳײ͡ͷϑϨʔϜϫʔΫ • Single

    State • Simple & Lite & Easy • Extendable class
  5. 5.

    architecture

  6. 6.

    very lightweight

  7. 7.

    how to use つかいかた

  8. 8.

    Lifecycle • reducer - reducerͷొ࿥ • subscribe - viewͱstoreͷ઀ଓ •

    listen - ঢ়ଶมߋͷݕ஌։࢝ • action - ACTIONͷൃߦ • disaptch - ACTIONΛStoreʹ഑෍͠ɺReducerΛ࣮ߦ
  9. 9.

    reducerの登録

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

    Viewと接続

  12. 12.

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

     BQQMJTUFO  ^ VQEBUF4UBUF \ UIJTVQEBUF \TUBUFBQQHFU4UBUF ^  ^ UIJTPO NPVOU UIJTPO.PVOU  TDSJQU QSPWJEFS
  13. 13.

    actionの発行

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

    async actionの発行

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

    カスタマイズ

  18. 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. 19.

    conclusion まとめ！

  20. 20.

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

  21. 21.

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

  22. 22.

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