今、我々は、 GUI の設計について 何を考えるべきか

フロントエンドの React Redux Rx などの設計パターンを元に GUI 設計について考えてみました

1. ࠓɺզʑ͸ɺ GUI ͷઃܭʹ͍ͭͯ
   ԿΛߟ͑Δ΂͖͔ mizchi
2. લఏ w 41"͸΋͸΍(6*ઃܭͱେࠩͳ͍
   w ؔ਺ܕ'31ͱ͍͏ݴ༿ΛͰ͖Δ͚ͩ࢖Θͳ͍
   w ࢿྉ͖Ε͍ʹ࡞ΔͷΛ్தͰ๞͖ͨ
3. Event Stream Snapshot = State
4. 4UBUF 7JFX
5. 4FSWFS
   4UBUF )5.- Oldschool Web App 63-
6. 4FSWFS $MJFOU HTML AJAX AJAX1 AJAX2
7. 4FSWFS
   4UBUF $MJFOU
   $POUSPMMFS Client Side MVC )5.- 3FXSJUF
8. 4FSWFS
   &WFOU &WFOU
   4USFBN 'MVY 7JFX 4OBQTIPU 6*
   &WFOU
9. 4FSWFS
   &WFOU &WFOU
   4USFBN + PWA 7JFX 4OBQTIPU 6*
   &WFOU 8PSLFS
   &WFOU
10. Event Stream w ݱࡏͷΫϥΠΞϯτઃܭͷ؅ཧର৅
    w ଟछଟ༷ͳ&WFOU
    4USFBN
    Λ੾Γग़͢ͱ
    4UBUF
    ͕֬ఆ
    w &WFOU
    4USFBN
    ͔Β
    4OBQTIPU
    Λ੾Γग़͢खஈ͸৭ʑ
11. Reducer • (prev: State, action: Action) => State w ͨͩͷؔ਺
    w ࠓͷঢ়ଶͱ"DUJPOΛҰͭͱͬͯ࣍ͷঢ়ଶΛ֬ఆ͢Δ
    w "DUJPO
    Λେྔʹྲྀ͠ଓ͚Ε͹ঢ়ଶ͸มԽ͢Δ
12. Redux •predictable state manager (ࣗশ) •combineReducers Ͱ ෳ਺ͷ reducer ΛଋͶͯ৽͍͠ reducer Λ࡞Δ •Action ͕དྷΔ౓ʹશͯͷ reducer ʹྲྀ͢ •reducer ͸ࣗ෼ʹڵຯ͕͋Δऀ͚ͩั·͑ͯߋ৽ॲཧΛ͢Δ
13. "DUJPO
    "DUJPO
    "DUJPO
    "DUJPO
    EventStream Reducer 4UBUF
    "DUJPO
    
    4UBUF 4UBUF
    "DUJPO
    
    4UBUF 4UBUF
    "DUJPO
    
    4UBUF  4UBUF Snapshot 4UBUF 4UBUF 
14. "DUJPO
    "DUJPO
    "DUJPO
    "DUJPO
    3FEVDFS 4UBUF
    "DUJPO
    
    4UBUF 4UBUF
    "DUJPO
    
    4UBUF 4UBUF
    "DUJPO
    
    4UBUF  "DUJPO
    "DUJPO
    3FEVY
    .JEEMFXBSF
    4UBDL Redux middleware
15. Redux Middleware •͋Δ Event Stream Λผͷ EventStream ʹม׵͢Δ૚ •Ұͭͷ Action ͕ෳ਺ͷ Action ʹม׵͞ΕͨΓɺMiddleware ಺෦Ͱঢ়ଶΛ࣋ͬͨΓ͢Δ •େ఍͸ૉ௨Γ •͜͜Λཧղ͢Δͷʹ͕͔͔࣌ؒͬͨʢ໊લ͕ѱ͍ʣ
16. Rx ͱ Redux •EventStream(Observable) ΛΦϖϨʔλʔͰSnapshotʹมܗ͢Δ •EventStreamΛͦͷ··ѻ͏(Observable) ͔ɺ reducer ͱ͍͏ ܗʹݶఆ͢Δ͔͕͓΋ͳҧ͍ •Redux ͱ͸,ͭ·Γ Rx ͷݶఆܥ •reducer = observable.reduce((state, action) => state) •Redux Middleware = Rx Operator
17. ରαʔόʔαΠυ
    ΞʔΩςΫνϟઓུ
18. ΫϥΠΞϯτઃܭ࣌ʹ
    ରαʔόʔαΠυͰߟ͑Δࣄ w ௨৴ຊͰΫϥΠΞϯτͷΫϥΠΞϯτͷࡉ͔͍࠷దԽ͸ ਧ͖ඈͿ
    NTd
    w ϦΫΤετ͸গͳ͚Ε͹গͳ͍΄Ͳྑ͍
    w )551
    ʹͳΕ͹·ͨมΘͬͯ͘Δ͕ʜ
19. αʔόʔ ΫϥΠΞϯτ Responce Request Legacy Style
20. αʔόʔ ΫϥΠΞϯτ HTML AJAX AJAX1 AJAX2
21. ΫϥΠΞϯτ REST API JUFNT VTFST %#
22. ໰୊ w 3&45
    "1*
    ͷந৅͸ΫϥΠΞϯτͷϢʔεέʔεͷෳࡶԽ
    w ϦΫΤετͷฒྻԽ
    w ΫϥΠΞϯτϩδοΫͰϦϨʔγϣϯ͕൑໌ͯ͠/ 
    w %#΁ͷඇޮ཰ͳ໰͍߹Θͤ
    w ઐ༻"1*͕ඞཁʁ
23. ΫϥΠΞϯτ View API Pattern 7JFX
    "1*
    %# 6TFS*OGP
24. View API Pattern w "1*
    &OEQPJOUͰϞσϧΛ߹੒͢Δ
    w $POTVNFS
    %SJWFO
    $POUSBDU
    w ࣮ࡍʹ͸3&45ͱซ༻͞ΕΔ͜ͱ͕ଟ͍ͷͰ͸
    w ϞόΠϧΞϓϦ
    Ͱଟ͍
25. ΫϥΠΞϯτ GraphQL (SBQI2-
    &OEQPJOU
    %# 2VFSZ
    $PNQPTJUJPO GraphQL Query .PEFM
    3FTPMWFS 'JMUFS2VFSZ
26. GraphQL w ΫϥΠΞϯτ͔ΒͷΫΤϦൃߦ
    ෳ਺Ϧιʔεͷ߹੒
    w ΫΤϦΛ෼ղͯ͠ෳ਺ͷ3FTPMWFS΁ͷϦΫΤετ
    w ΫΤϦ͸ࣗ෼ʹΑͬͯඞཁͳύϥϝʔλΛࢦఆ͍ͯ͠Δͷ ͰɺͦΕ͚ͩฦ٫ 'JMUFS
    2VFSZ
27. View API ͱ GraphQL w ߟ͑ͯΔ͜ͱ͸ಉ͡
    w ΫϥΠΞϯτͰൃੜ͢ΔϦΫΤετΛຊʹ·ͱΊ͍ͨ
    w %#΁ͷϦΫΤετ͸αʔόʔͰ߹੒͢Δ
    w
    (SBQI2-͸σʔλΛߜΔػೳΛ࣋ͬͯΔ
28. #''ͷ࿩
    #BDLFOE
    'PS
    'SPOUFOE
29. Real World : Multi Requests 6TFS*OGP *UFNT )FBEFS $POUFOU 4FSWFS
30. ૄͳίϯϙʔωϯτୡ w ͓ޓ͍ૄͳಠཱੑͷߴ͍ίϯϙʔωϯτ͕ෳ਺ͷϦΫΤ ετΛൃߦ
    w ϦΫΤετΛ·ͱΊΑ͏ʹ΋ɺΫϥΠΞϯτϩδοΫͱ αʔόʔΛڧௐͤ͞Δ͜ͱ͕Ͱ͖ͳ͍
31. * BFF Architecture &OEQPJOU &OEQPJOU $PNQPOFOU $PNQPOFOU *TPNPSQIJD
    -BZFS $PNQPOFOU $PNQPOFOU 3FOEFS
    *OJUJBM
    4UBUF SFR
32. #''ͷղܾ͢Δ΋ͷ w ͦ΋ͦ΋ڠௐ͠ͳ͍͕ɺڠௐ͢Δ৔ॴΛαʔόʔʹ͢Δ
    w ॳճϦΫΤετ࣌ɺαʔόʔͰΫϥΠΞϯτϩδοΫΛ ൃߦ͠ɺඞཁͳϦΫΤετΛશ෦ऴ͔͑ͯΒॳظεςʔτ Λฦ٫
    w ͦͷޙ͸$PNQPOFOU͸ಠཱͯ͠Քಇ͢Δ
    w ࣗવͱ443ʹͳΔ
33. #''ͷ໰୊ w ࣮࣭/PEFKTݶఆͷΞʔΩςΫνϟ
    w ࣗવͱϚΠΫϩαʔϏεԽ͕ཁٻ͞ΕΔ
    w ಉ͡σʔληϯλʔ಺Ͱ͋Δ͜ͱ΋ཁٻ͞ΕΔ
    w ໨తʹରͯ͠खஈ͕ա৒
    w ϑϨʔϜϫʔΫͱͯ͠ղܾͯ͠΄͍͠
34. BFF Framework • Next.js - React • Nuxt.js - Vue • angular-universal
35. 7JFXͷઃܭͰߟ͑Δ͜ͱ
36. 7JFX
    ͷઃܭͰߟ͑Δ͜ͱ w ઃܭޙʹ
    7JFX
    ͷ࣮૷ͷ࣌ʹԿΛ͢Δ͔ߟ͑ͨΒෛ͚
    w ن໿Ͱࣗಈతʹܾ·ΔΑ͏ʹ͢Δ΂͖
37. 7JFX
    ͷ੹຿ w 1SFTFOUBUJPO
    w &WFOUͷൃՐ
    UP
    &WFOU
    4USFBN
38. $PNQPOFOU w ଞͷ$PNQPOFOU
    
    ϓϦϛςΟϒͳཁૉΛଋͶΔ୯Ґ
    w ೖྗ͞ΕΔܕΛܾΊΔ
    w ग़ྗ͠͏Δ
    &WFOU
    Λ
    $BMMCBDL
    ͱඥ෇͚Δ
    w Ҏ্
39. $PNQPOFOU
    ͷ෼ׂࢦ਑ w ࠷ۙ΍ͬͯΑ͔ͬͨͷ͸
    "UPNJD
    %FTJHO
    ͷ෦෼आ༻
    w ॴଐͰ͸ͳ͘ɺ෼ׂՄೳͳཻ౓ͷΈͰ෼ׂ͍ͯ͘͠
    w ΤϯδχΞ͔ΒݟΔͱཻ౓͸ϓϩάϥϚϒϧʹܾ·Δ
    w σβΠφ͔ΒݟΔͱ
    "UPNJD
    %FTJHO
    ͱ͍͏ࢦ਑Λԉ༻Ͱ͖Δ
40. Atomic Design w "UPNT
    ͦΕҎ্෼ׂͰ͖ͳ͍
    $PNQPOFOU
    w .PMFDVMFT
    ෳ਺ͷ"UPNT͔ΒͳΔ
    $PNQPOFOU
    w 0SHBOJTNT
    ෳ਺ͷ
    .PMFDVMFT"UPN
    ͔ΒͳΔ
    $PNQPOFOU
41. $PNQPOFOU
    ͷ
    4OBQTIPU
    ׂ౰ w $PNQPOFOU
    ͷϧʔτཁૉ͕ɺͲͷ
    4UBUF 4OBQTIPU
    Λ
    "TTJHO
    ͞ΕΔ͔
    w ੲͳ͕Βͷݴ༿Ͱݴ͑͹
    $POUSPMMFS
    w 3FEVY
    ͳΒ
    DPOOFDU
    
    ࠷ۙͩͱ
    TFMFDUPS
    w ͜͜ͷཻ౓͚ͩ͸ߟ͑ͳ͠ʹॻ͚ͳ͍ͷͰɺͪΌΜͱߟ͑Δ
42. 4FMFDUPS w SFBDUKTSFTFMFDU
    w ؆୯ʹݴ͑͹
    3FBDU
    ͷ
    NBQ4UBUF5P1SPQT
    ͷෳࡶͰ࠷దԽ͞ Εͨ΍ͭ
    w 4OBQTIPU
    ͔Βϧʔτͷ
    $PNQPOFOU
    ΁ׂΓ౰ͯΔॲཧ
43. 4OBQTIPU 0SHBOJTN 0SHBOJTN .PMFDVMF "UPN "UPN "UPN "UPN .PMFDVMF 4FMFDUPS ͕࣌ؒͳ͔ͬͨ
44. ϑϩϯτΤϯυΤϯδχΞ
    ͷߟ͑Δࣄ
45. ࣍ͷੈ୅ͷٕज़ w &WFOU4USFBN
    ͸ܕ͋Γ͖ͷઃܭ
    w 'VODUJPOBM
    1SPHSBNNJOH
    8BZ
    w *TPNPSQIJD
    PO
    8FC"TTFNCMZ
46. ࣍ͷੈ୅
    ͍ͭ w *&͕ࢮΜͩΒ
    d
    w ͕͢͞ʹ
    
    ʹ͸ʜ
    w ϞόΠϧγΣΞͷ૿େͰ૬ରతʹࢮʹͦ͏ʢࢮͶͦ͏ʣ
47. ϑϩϯτΤϯυ͸
    ͜ͷઌੜ͖ͷ͜Δͷ͔ w ϞόΠϧͷོ੝ʹରԠͯ͠
    3FBDU/BUJWF
    ͕ಀ͛ޱͰ͸͋Δ͕ʜ
    w ϞόΠϧ΋͍͔ͭࢮ͵
    w +4͸ͨͿΜࢮͳͳ͍ ࢮͶͳ͍
    w ઃܭٕ๏΋ͨͿΜࢮͳͳ͍
48. ΤϯδχΞͱͯ͠
    ੜ͖࢒Γ·͠ΐ͏
49. ͓ΘΓ