Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
syntagme.jsの紹介
mizuki_r
June 03, 2016
Technology
1
2.7k
syntagme.jsの紹介
Gotanda.js #4の発表資料です
mizuki_r
June 03, 2016
Tweet
Share
More Decks by mizuki_r
See All by mizuki_r
税理士ドットコムの 技術的挑戦 #tapioca_lt
rymizuki
0
180
PHPを始めて1年、レガシーシステムにどう向き合っているか #phpstudy
rymizuki
1
380
モダンとレガシー #gotandaem
rymizuki
0
330
Vuexに型を付けるパターンを調べた #gotandajs
rymizuki
0
83
DockerでNodeの開発は厳しいのか? #gotandajs
rymizuki
3
260
マネージャー!きみは何者だ! #gotandaem
rymizuki
0
1.3k
物語を楽しむための物語論
rymizuki
0
390
失敗と向き合う
rymizuki
0
900
社内勉強会と組織の成長を考える
rymizuki
1
2k
Other Decks in Technology
See All in Technology
Implementing Kubernetes operators in Java with Micronaut - TechWeek Java Summit 2022
alvarosanchez
0
110
リファインメントは楽しいかね?
kitamu_mu
1
370
オンラインでのサーバー切替事例紹介/ColoplTech-05-01
colopl
0
160
Internet Explorer は Microsoft Edge へ - IE の歩みとこれから -
yuhara0928
1
3.5k
Persistence in Serverless Applications - ServerlessDays NYC
marcduiker
0
200
覗いてみよう!現場のスクラムチーム
tkredman
0
990
Modern Android dependency injection
hugovisser
1
120
マネージャーからみたスクラムと自己管理化
shibe23
0
990
インフラのCI/CDはGitHub Actionsに任せた
mihyon
0
110
The role of the data organization as a business progresses
line_developers
PRO
3
840
約6年間運用したシステムをKubernetesに完全移行するまで/Kubernetes Novice Tokyo
isaoshimizu
4
530
FoodTechにおける商流・金流・物流の進化/Evolution of Commercial, Financial, and Logistics in FoodTech
dskst
0
390
Featured
See All Featured
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Typedesign – Prime Four
hannesfritz
33
1.3k
Robots, Beer and Maslow
schacon
152
7.1k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
Six Lessons from altMBA
skipperchong
14
1.4k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
172
8.4k
Making Projects Easy
brettharned
98
4.3k
GitHub's CSS Performance
jonrohan
1020
420k
Building a Scalable Design System with Sketch
lauravandoore
448
30k
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.4k
What the flash - Photography Introduction
edds
61
10k
Documentation Writing (for coders)
carmenhchung
48
2.5k
Transcript
syntagme.js 2016/06/03 Gotanda.js #4 @miuzki_r
@mizuki_r 五反田M社 某位置ゲー フロントエンドエンジニア JSer angular, vue, riot “HTMLは情報設計言語です!”
what is syntagme.js なにそれ
a flux like framework! • https://github.com/rymizuki/syntagmejs • fluxͳײ͡ͷϑϨʔϜϫʔΫ • Single
State • Simple & Lite & Easy • Extendable class
architecture
very lightweight
how to use つかいかた
Lifecycle • reducer - reducerͷొ • subscribe - viewͱstoreͷଓ •
listen - ঢ়ଶมߋͷݕ։࢝ • action - ACTIONͷൃߦ • disaptch - ACTIONΛStoreʹ͠ɺReducerΛ࣮ߦ
reducerの登録
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と接続
JNQPSUBQQGSPNFYBNQMFBQQ JNQPSUSJPUGSPNSJPU JNQPSUFYBNQMFDPNQPOFOUTFYBNQMF QSPWJEFS FYBNQMFTUBUF\TUBUF^FYBNQMF TDSJQU PO.PVOU \ BQQTVCTDSJCF UIJTVQEBUF4UBUF
BQQMJTUFO ^ VQEBUF4UBUF \ UIJTVQEBUF \TUBUFBQQHFU4UBUF ^ ^ UIJTPO NPVOU UIJTPO.PVOU TDSJQU QSPWJEFS
actionの発行
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
async actionの発行
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
カスタマイズ
JNQPSU\4ZOUBHNF^GSPNTZOUBHNF DMBTT"QQFYUFOET4ZOUBHNF\ DPOOFDU \ DPOOFDUEJTQBUDIFSUPTUPSF ^ TVCTDSJCF TVCTDSJCFS \ TVCTDSJCFUPTUBUFDIBOHFGSPNTUPSF
^ EJTQBUDI QBZMPBE \ BEEEJTQBUDIIPPL ^ SFEVDFS SFEVDFS \ BEEBOZSFEVDFSIPPL ^ IBOEMF"DUJPO UZQF TUVGG \ IBOEMFDSFBUFBDUJPO ^ ^ FYQPSUEFGBVMUOFX"QQ
conclusion まとめ!
syntagme.jsとは • γϯϓϧͰ • ܰྔͰ • ؆୯ͳ • FluxϑϨʔϜϫʔΫ
こんな人におすすめ • Redux, flux-utilsΛ͑ͳ͍ɺ͍ͨ͘ͳ͍ • ͬ͞͞ͱಈ͔͍ͨ͠ • ΊͪΌͪ͘ΌΧελϚΠζ͍ͨ͠
ご意見お待ちしてます! ご清聴ありがとうございました