Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
今、我々は、 GUI の設計について 何を考えるべきか
Search
Koutarou Chikuba
September 20, 2017
Programming
18
18k
今、我々は、 GUI の設計について 何を考えるべきか
フロントエンドの React Redux Rx などの設計パターンを元に GUI 設計について考えてみました
Koutarou Chikuba
September 20, 2017
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
CI/CD 改善の勘所
mizchi
0
130
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.6k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.4k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.5k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Other Decks in Programming
See All in Programming
The Flutter Journey of Building a Live Streaming App — With a Side of Performance Tuning
u503
1
110
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3.2k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
390
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
Advance Your Career with Open Source
ivargrimstad
0
460
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.2k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2k
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
270
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
660
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.7k
dynamic!
moro
10
7.2k
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.8k
Gamification - CAS2011
davidbonilla
81
5.5k
Producing Creativity
orderedlist
PRO
347
40k
Designing Experiences People Love
moore
142
24k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
4 Signs Your Business is Dying
shpigford
185
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building Applications with DynamoDB
mza
96
6.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
A Tale of Four Properties
chriscoyier
160
23k
Faster Mobile Websites
deanohume
310
31k
Transcript
ࠓɺզʑɺ GUI ͷઃܭʹ͍ͭͯ ԿΛߟ͑Δ͖͔ mizchi
લఏ w 41"(6*ઃܭͱେࠩͳ͍ w ؔܕ'31ͱ͍͏ݴ༿ΛͰ͖Δ͚ͩΘͳ͍ w ࢿྉ͖Ε͍ʹ࡞ΔͷΛ్தͰ͖ͨ
Event Stream Snapshot = State
4UBUF 7JFX
4FSWFS4UBUF )5.- Oldschool Web App 63-
4FSWFS $MJFOU HTML AJAX AJAX1 AJAX2
4FSWFS4UBUF $MJFOU$POUSPMMFS Client Side MVC )5.- 3FXSJUF
4FSWFS&WFOU &WFOU4USFBN 'MVY 7JFX 4OBQTIPU 6*&WFOU
4FSWFS&WFOU &WFOU4USFBN + PWA 7JFX 4OBQTIPU 6*&WFOU 8PSLFS&WFOU
Event Stream w ݱࡏͷΫϥΠΞϯτઃܭͷཧର w ଟछଟ༷ͳ&WFOU4USFBNΛΓग़͢ͱ4UBUF͕֬ఆ w &WFOU4USFBN͔Β4OBQTIPUΛΓग़͢खஈ৭ʑ
Reducer • (prev: State, action: Action) => State w ͨͩͷؔ
w ࠓͷঢ়ଶͱ"DUJPOΛҰͭͱͬͯ࣍ͷঢ়ଶΛ֬ఆ͢Δ w "DUJPOΛେྔʹྲྀ͠ଓ͚Εঢ়ଶมԽ͢Δ
Redux •predictable state manager (ࣗশ) •combineReducers Ͱ ෳͷ reducer ΛଋͶͯ৽͍͠
reducer Λ࡞Δ •Action ͕དྷΔʹશͯͷ reducer ʹྲྀ͢ •reducer ࣗʹڵຯ͕͋Δऀ͚ͩั·͑ͯߋ৽ॲཧΛ͢Δ
"DUJPO "DUJPO "DUJPO "DUJPO EventStream Reducer 4UBUF "DUJPO 4UBUF 4UBUF
"DUJPO 4UBUF 4UBUF "DUJPO 4UBUF 4UBUF Snapshot 4UBUF 4UBUF
"DUJPO "DUJPO "DUJPO "DUJPO 3FEVDFS 4UBUF "DUJPO 4UBUF 4UBUF "DUJPO
4UBUF 4UBUF "DUJPO 4UBUF "DUJPO "DUJPO 3FEVY.JEEMFXBSF4UBDL Redux middleware
Redux Middleware •͋Δ Event Stream Λผͷ EventStream ʹม͢Δ •Ұͭͷ Action
͕ෳͷ Action ʹม͞ΕͨΓɺMiddleware ෦Ͱঢ়ଶΛ࣋ͬͨΓ͢Δ •େૉ௨Γ •͜͜Λཧղ͢Δͷʹ͕͔͔࣌ؒͬͨʢ໊લ͕ѱ͍ʣ
Rx ͱ Redux •EventStream(Observable) ΛΦϖϨʔλʔͰSnapshotʹมܗ͢Δ •EventStreamΛͦͷ··ѻ͏(Observable) ͔ɺ reducer ͱ͍͏ ܗʹݶఆ͢Δ͔͕͓ͳҧ͍
•Redux ͱ,ͭ·Γ Rx ͷݶఆܥ •reducer = observable.reduce((state, action) => state) •Redux Middleware = Rx Operator
ରαʔόʔαΠυ ΞʔΩςΫνϟઓུ
ΫϥΠΞϯτઃܭ࣌ʹ ରαʔόʔαΠυͰߟ͑Δࣄ w ௨৴ຊͰΫϥΠΞϯτͷΫϥΠΞϯτͷࡉ͔͍࠷దԽ ਧ͖ඈͿ NTd w ϦΫΤετগͳ͚Εগͳ͍΄Ͳྑ͍ w
)551ʹͳΕ·ͨมΘͬͯ͘Δ͕ʜ
αʔόʔ ΫϥΠΞϯτ Responce Request Legacy Style
αʔόʔ ΫϥΠΞϯτ HTML AJAX AJAX1 AJAX2
ΫϥΠΞϯτ REST API JUFNT VTFST %#
w 3&45"1*ͷநΫϥΠΞϯτͷϢʔεέʔεͷෳࡶԽ w ϦΫΤετͷฒྻԽ w ΫϥΠΞϯτϩδοΫͰϦϨʔγϣϯ͕໌ͯ͠/ w %#ͷඇޮͳ͍߹Θͤ
w ઐ༻"1*͕ඞཁʁ
ΫϥΠΞϯτ View API Pattern 7JFX"1* %# 6TFS*OGP
View API Pattern w "1*&OEQPJOUͰϞσϧΛ߹͢Δ w $POTVNFS%SJWFO$POUSBDU w ࣮ࡍʹ3&45ͱซ༻͞ΕΔ͜ͱ͕ଟ͍ͷͰ w
ϞόΠϧΞϓϦͰଟ͍
ΫϥΠΞϯτ GraphQL (SBQI2-&OEQPJOU %# 2VFSZ$PNQPTJUJPO GraphQL Query .PEFM3FTPMWFS 'JMUFS2VFSZ
GraphQL w ΫϥΠΞϯτ͔ΒͷΫΤϦൃߦ ෳϦιʔεͷ߹ w ΫΤϦΛղͯ͠ෳͷ3FTPMWFSͷϦΫΤετ w ΫΤϦࣗʹΑͬͯඞཁͳύϥϝʔλΛࢦఆ͍ͯ͠Δͷ ͰɺͦΕ͚ͩฦ٫
'JMUFS2VFSZ
View API ͱ GraphQL w ߟ͑ͯΔ͜ͱಉ͡ w ΫϥΠΞϯτͰൃੜ͢ΔϦΫΤετΛຊʹ·ͱΊ͍ͨ w %#ͷϦΫΤεταʔόʔͰ߹͢Δ
w (SBQI2-σʔλΛߜΔػೳΛ࣋ͬͯΔ
#''ͷ #BDLFOE'PS'SPOUFOE
Real World : Multi Requests 6TFS*OGP *UFNT )FBEFS $POUFOU 4FSWFS
ૄͳίϯϙʔωϯτୡ w ͓ޓ͍ૄͳಠཱੑͷߴ͍ίϯϙʔωϯτ͕ෳͷϦΫΤ ετΛൃߦ w ϦΫΤετΛ·ͱΊΑ͏ʹɺΫϥΠΞϯτϩδοΫͱ αʔόʔΛڧௐͤ͞Δ͜ͱ͕Ͱ͖ͳ͍
* BFF Architecture &OEQPJOU &OEQPJOU $PNQPOFOU $PNQPOFOU *TPNPSQIJD-BZFS $PNQPOFOU $PNQPOFOU
3FOEFS*OJUJBM4UBUF SFR
#''ͷղܾ͢Δͷ w ͦͦڠௐ͠ͳ͍͕ɺڠௐ͢ΔॴΛαʔόʔʹ͢Δ w ॳճϦΫΤετ࣌ɺαʔόʔͰΫϥΠΞϯτϩδοΫΛ ൃߦ͠ɺඞཁͳϦΫΤετΛશ෦ऴ͔͑ͯΒॳظεςʔτ Λฦ٫ w ͦͷޙ$PNQPOFOUಠཱͯ͠Քಇ͢Δ w
ࣗવͱ443ʹͳΔ
#''ͷ w ࣮࣭/PEFKTݶఆͷΞʔΩςΫνϟ w ࣗવͱϚΠΫϩαʔϏεԽ͕ཁٻ͞ΕΔ w ಉ͡σʔληϯλʔͰ͋Δ͜ͱཁٻ͞ΕΔ w తʹରͯ͠खஈ͕ա w
ϑϨʔϜϫʔΫͱͯ͠ղܾͯ͠΄͍͠
BFF Framework • Next.js - React • Nuxt.js - Vue
• angular-universal
7JFXͷઃܭͰߟ͑Δ͜ͱ
7JFXͷઃܭͰߟ͑Δ͜ͱ w ઃܭޙʹ7JFXͷ࣮ͷ࣌ʹԿΛ͢Δ͔ߟ͑ͨΒෛ͚ w نͰࣗಈతʹܾ·ΔΑ͏ʹ͢Δ͖
7JFXͷ w 1SFTFOUBUJPO w &WFOUͷൃՐ UP&WFOU4USFBN
$PNQPOFOU w ଞͷ$PNQPOFOUϓϦϛςΟϒͳཁૉΛଋͶΔ୯Ґ w ೖྗ͞ΕΔܕΛܾΊΔ w ग़ྗ͠͏Δ&WFOUΛ$BMMCBDLͱඥ͚Δ w Ҏ্
$PNQPOFOUͷׂࢦ w ࠷ۙͬͯΑ͔ͬͨͷ"UPNJD%FTJHOͷ෦आ༻ w ॴଐͰͳ͘ɺׂՄೳͳཻͷΈͰׂ͍ͯ͘͠ w ΤϯδχΞ͔ΒݟΔͱཻϓϩάϥϚϒϧʹܾ·Δ w σβΠφ͔ΒݟΔͱ"UPNJD%FTJHOͱ͍͏ࢦΛԉ༻Ͱ͖Δ
Atomic Design w "UPNTͦΕҎ্ׂͰ͖ͳ͍$PNQPOFOU w .PMFDVMFTෳͷ"UPNT͔ΒͳΔ$PNQPOFOU w 0SHBOJTNTෳͷ.PMFDVMFT"UPN͔ΒͳΔ$PNQPOFOU
$PNQPOFOUͷ4OBQTIPUׂ w $PNQPOFOUͷϧʔτཁૉ͕ɺͲͷ4UBUF 4OBQTIPU Λ"TTJHO ͞ΕΔ͔ w ੲͳ͕Βͷݴ༿Ͱݴ͑$POUSPMMFS w 3FEVYͳΒDPOOFDU࠷ۙͩͱTFMFDUPS
w ͜͜ͷཻ͚ͩߟ͑ͳ͠ʹॻ͚ͳ͍ͷͰɺͪΌΜͱߟ͑Δ
4FMFDUPS w SFBDUKTSFTFMFDU w ؆୯ʹݴ͑ 3FBDUͷNBQ4UBUF5P1SPQT ͷෳࡶͰ࠷దԽ͞ Εͨͭ w
4OBQTIPU͔Βϧʔτͷ$PNQPOFOUׂΓͯΔॲཧ
4OBQTIPU 0SHBOJTN 0SHBOJTN .PMFDVMF "UPN "UPN "UPN "UPN .PMFDVMF 4FMFDUPS
͕࣌ؒͳ͔ͬͨ
ϑϩϯτΤϯυΤϯδχΞ ͷߟ͑Δࣄ
࣍ͷੈͷٕज़ w &WFOU4USFBNܕ͋Γ͖ͷઃܭ w 'VODUJPOBM1SPHSBNNJOH8BZ w *TPNPSQIJDPO8FC"TTFNCMZ
࣍ͷੈ͍ͭ w *&͕ࢮΜͩΒd w ͕͢͞ʹʹʜ w ϞόΠϧγΣΞͷ૿େͰ૬ରతʹࢮʹͦ͏ʢࢮͶͦ͏ʣ
ϑϩϯτΤϯυ ͜ͷઌੜ͖ͷ͜Δͷ͔ w ϞόΠϧͷོʹରԠͯ͠3FBDU/BUJWF͕ಀ͛ޱͰ͋Δ͕ʜ w ϞόΠϧ͍͔ͭࢮ͵ w +4ͨͿΜࢮͳͳ͍ ࢮͶͳ͍
w ઃܭٕ๏ͨͿΜࢮͳͳ͍
ΤϯδχΞͱͯ͠ ੜ͖Γ·͠ΐ͏
͓ΘΓ