Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
今、我々は、 GUI の設計について 何を考えるべきか
Koutarou Chikuba
September 20, 2017
Programming
18
17k
今、我々は、 GUI の設計について 何を考えるべきか
フロントエンドの React Redux Rx などの設計パターンを元に GUI 設計について考えてみました
Koutarou Chikuba
September 20, 2017
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
Edge Side Frontend という新領域
mizchi
21
10k
バンドル最適化マニアクス at tfconf
mizchi
5
2.8k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
45
18k
Deno Node 両刀
mizchi
5
1.7k
「フロントエンド領域」を再定義する
mizchi
50
32k
光を超えるためのフロントエンドアーキテクチャ
mizchi
81
20k
ServiceWorkerSideReactServerSideRendering
mizchi
5
730
Development Tools for Next Generation
mizchi
16
1.3k
加速するフロントエンドとPWA
mizchi
56
14k
Other Decks in Programming
See All in Programming
WindowsコンテナDojo: 第4回 Red Hat OpenShift Localを使ってみよう
oniak3ibm
PRO
0
170
料理の注文メニューの3D化への挑戦
hideg
0
280
Lookerとdbtの共存
ttccddtoki
0
620
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
syumai
0
140
閱讀原始碼 - 再戰十年的 jQuery
eddie
1
280
SwiftUIで「意図」を伝える / swiftui_intention
uhooi
2
140
SRE NEXT 2022に学ぶこれからのSREキャリア
fukubaka0825
2
390
プロダクトの成長とSREと
takuyatezuka
0
120
SGGとは
inoue2002
0
430
Rust、何もわからない...#3
estie
0
150
ZOZOTOWNにおけるDatadogの活用と、それを支える全社管理者の取り組み / 2022-07-27
tippy
0
3k
Now in Android Overview
aosa4054
0
370
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
262
17k
4 Signs Your Business is Dying
shpigford
169
20k
Designing Experiences People Love
moore
130
22k
Facilitating Awesome Meetings
lara
29
4.1k
Fireside Chat
paigeccino
13
1.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Happy Clients
brianwarren
89
5.6k
Faster Mobile Websites
deanohume
294
28k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
213
11k
Git: the NoSQL Database
bkeepers
PRO
415
59k
The Invisible Customer
myddelton
110
11k
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 ઃܭٕ๏ͨͿΜࢮͳͳ͍
ΤϯδχΞͱͯ͠ ੜ͖Γ·͠ΐ͏
͓ΘΓ