実践、BFF ~ BFFはFiNCのアプリで何を解決したのか ~

mobile appの新機能にBFFを導入し、解決した具体的な課題を紹介しています

Transcript

1. ࣮ફɺBFF ~ BFF͸FiNCͷΞϓϦͰԿΛղܾͨ͠ͷ͔ ~ FiNC Technologies Inc. / Engineer Development Kensuke Izumi
2. 2 ࣗݾ঺հ Kensuke Izumi Android Engineer @FiNC Kotlin / javascript / ruby Twitter: @izmeal2000
3. 3 ΞδΣϯμ 1. FiNCʹ͓͚ΔBFFͷ໾ׂ ɹɾBFFͷҰൠతͳఆٛ ɹɾFiNC appͷ๊͑Δ՝୊ ɹɾBFF͕ղܾ͢Δ՝୊ 2. BFFಋೖ࣮ફ ɹɾػೳ঺հ ɹɾ՝୊ͱBFFΛ༻͍ͨղܾ ɹɹ- ύϑΥʔϚϯε ɹɹ- ू໿ϩδοΫͷڞ༗ ɹɹ- ϨεϙϯεʹΑΔදࣔ੾Γସ͑ 3. ࠓޙͷల๬
4. 4 ΞδΣϯμ 1. FiNCʹ͓͚ΔBFFͷ໾ׂ ɹɾBFFͷҰൠతͳఆٛ ɹɾFiNC appͷ๊͑Δ՝୊ ɹɾBFF͕ղܾ͢Δ՝୊ 2. BFFಋೖ࣮ફ ɹɾػೳ঺հ ɹɾ՝୊ͱBFFΛ༻͍ͨղܾ ɹɹ- ύϑΥʔϚϯε ɹɹ- ू໿ϩδοΫͷڞ༗ ɹɹ- ϨεϙϯεʹΑΔදࣔ੾Γସ͑ 3. ࠓޙͷల๬
5. FiNCʹ͓͚ΔBFFͷ໾ׂ 1
6. 6 ҰൠతͳBFFͷఆٛ Microserviceͷఏڙ͢Δෳ਺ͷAPI܈ͱ ͋Δಛఆͷclientͷ஥հϨΠϠʔ
7. 7 ҰൠతͳBFFͷ໾ׂ service C service B service A client A client B
8. 8 ҰൠతͳBFFͷ໾ׂ service C service B service A client A client B BFF ಋೖ؀ڥʹΑͬͯͦͷ໾ׂ͸ҟͳΔ ྫ͑͹ɺ ɾAPIͷू໿ ɾAPIΩϟογϡ ɾServer Side Rendering etc…
9. FiNC APPʹ͓͚ΔBFF͸ͲΜͳ՝୊Λղܾ͍ͯ͠Δͷ͔
10. 10 FiNC Appͷ๊͑Δ՝୊ user tag Service life-log Service point Service Android iOS ɾ ɾ ɾ ɾ௨৴ύϑΥʔϚϯε ɾू໿ϩδοΫͷ෼ࢄ ɾࠣࡉͳڍಈมߋʹ΋ਃ੥͕ඞཁ ू໿ ϩδοΫ ू໿ ϩδοΫ ϞόΠϧ௨৴
11. 11 BFF͕ղܾ͢Δ՝୊ user tag Service life-log Service point Service Android iOS ɾ ɾ ɾ ௨৴ύϑΥʔϚϯε ϞόΠϧ௨৴
12. 12 BFF͕ղܾ͢Δ՝୊ user tag Service life-log Service point Service Android iOS ɾ ɾ ɾ ௨৴ύϑΥʔϚϯε ϞόΠϧ௨৴ ɾෳ਺ͷAPI requestʹΑΔoverhead ɾσʔλ௨৴ྔͷѹഭ ɾ஗͍ճઢͰͷෳ਺request
13. 13 User tag service Life-log service Point service Android iOS BFF ௨৴ͷू໿ BFF͕ղܾ͢Δ՝୊ ϞόΠϧ௨৴ αʔόؒ௨৴ ϞόΠϧճઢ΁ͷෛՙܰݮ ɹɾrequestճ਺ͷ࡟ݮ ɹɾ௨৴σʔλྔͷ࡟ݮ
14. 14 user tag Service life-log Service point Service Android iOS ɾ ɾ ɾ ू໿ ϩδοΫ ू໿ ϩδοΫ ू໿ϩδοΫͷ෼ࢄ BFF͕ղܾ͢Δ՝୊ ɾແବͳ࣮૷ίετ ɾڍಈͷࠩ෼͕ൃੜ͠΍͍͢
15. 15 user tag Service life-log Service point Service Android iOS ɾ ɾ ɾ ू໿ϩδοΫͷڞ༗ BFF͕ղܾ͢Δ՝୊ BFF ू໿ ϩδοΫ ɾҰՕॴ΁ͷ࣮૷ ɾڍಈʹࠩ෼͕ൃੜ͠ͳ͍
16. 16 ࠣࡉͳڍಈมߋʹ΋ϦϦʔεਃ੥͕ඞཁ BFF͕ղܾ͢Δ՝୊ ɾΞϓϦͷϦϦʔεʹ͸͕͔͔࣌ؒΔ
    ɹJ04
    ਃ੥ظؒɺ"OESPJE
    ਁಁظؒ
    ɾٸͳ࢓༷มߋʹରԠ͠ʹ͍͘
17. 17 ࠣࡉͳڍಈมߋʹ΋ϦϦʔεਃ੥͕ඞཁ BFF͕ղܾ͢Δ՝୊ ू໿ϩδοΫΛ#''ଆͰอ࣋
    
    ϦϦʔεਃ੥ͳ͠Ͱڍಈมߋ͕Մೳ
18. 18 ΞδΣϯμ 1. FiNCʹ͓͚ΔBFFͷ໾ׂ ɹɾBFFͷҰൠతͳఆٛ ɹɾFiNC Appͷ๊͑Δ՝୊ ɹɾBFF͕ղܾ͢Δ՝୊ 2. BFFಋೖ࣮ફ ɹɾػೳ঺հ ɹɾ՝୊ͱBFFΛ༻͍ͨղܾ ɹɹ- ύϑΥʔϚϯε ɹɹ- ू໿ϩδοΫͷڞ༗ ɹɹ- ϨεϙϯεʹΑΔදࣔ੾Γସ͑ 3. ࠓޙͷల๬
19. BFFಋೖ࣮ફ 2
20. 20 ػೳ঺հ ϙΠϯτΛͨΊΔ(࢖͏)खஈΛఏڙ͢Δը໘ ϙΠϯτΛͨΊΔखஈ͸ෳ਺ଘࡏ͢Δ ɹɾา͘ʂ ɹɾ৯ࣄΛه࿥͢Δ ɹɾࣸਅΛ౤ߘ͢Δ ɹɹetc… ϙΠϯτΛஷΊ͍ͨ/࢖͍͍ͨϢʔβ͸ ͜͜ʹ͘Ε͹େৎ෉ʂ
21. 21 ػೳ঺հ: ϥΠϑϩά ϥΠϑϩάɿ ɾҎԼͷه࿥ͰϙΠϯτΛ֫ಘ ɹɾ৯ࣄ ɹɾਭ຾ ɹɾମॏ ɾઃఆͨ͠໨ඪΛୡ੒ͯ͠ϙΠϯτΛ֫ಘ
22. 22 ػೳ঺հ: ϛογϣϯ ϛογϣϯɿ ༷ʑͳΞΫγϣϯΛୡ੒ͯ͠ϙΠϯτΛ֫ಘ ɾهࣄΛಡΉ ɾࣸਅΛ౤ߘ͢Δ ɾಈըΛݟΔ etc…
23. 23 ػೳ঺հ ϙΠϯτͷ֬ೝը໘ ϓϨθϯτͷ֬ೝը໘ ϙΠϯτ͕ͨ·ΔΩϟϯϖʔϯͷը໘ ϙΠϯτ͕ͨ·ΔϥΠϑϩάͷը໘ ϙΠϯτ͕ͨ·Δϛογϣϯͷը໘
24. ϙΠϯτʹؔ࿈͢Δ͍ΖΜͳػೳ͕ू·ͬͯग़དྷ͍ͯΔ
25. 1ষͰ͓࿩ͨ͠͠BFFͷ໾ׂͷ۩ମྫΛ͓࿩͠͠·͢ ௨৴ύϑΥʔϚϯε ू໿ϩδοΫͷڞ௨Խ ϨεϙϯεʹΑΔදࣔ੾Γସ͑
26. ௨৴ύϑΥʔϚϯε ू໿ϩδοΫͷڞ༗ ϨεϙϯεʹΑΔදࣔ੾Γସ͑
27. Premium Service 27 ՝୊ͱBFFͰͷղܾ user tag Service life-log Service point Service ௨৴ύϑΥʔϚϯε Mission Service EC Service ଟ͗ͯ͢ॻ͚ͳ͍… ܭ15ຊͷrequest
 (on mobileճઢ)
28. Premium Service 28 ՝୊ͱBFFͰͷղܾ user tag Service life-log Service point Service ௨৴ύϑΥʔϚϯε Mission Service EC Service BFF ܭ6ຊͷrequest
 (on mobileճઢ)
29. Ұຊʹू໿͢Ε͹ྑ͍ͷͰ͸ʁ
30. 30 ՝୊ͱBFFͰͷղܾ 1ຊʹू໿ͨ࣌͠ͷ໰୊఺ ɾ஗͍APIʹҾ͖ͣΒΕΔ ɾݸผretry͕ग़དྷͳ͍
31. 31 ՝୊ͱBFFͰͷղܾ ஗͍APIʹҾ͖ͣΒΕΔ Premium Service user tag Service life-log Service point Service Mission Service EC Service BFF ͳΜ͔஗͍… ͳΜ͔஗͍…
32. 32 ػೳ঺հ ݸผretry͕ग़དྷͳ͍ ͜ͷ෦෼ͷ௨৴͕ࣦഊͨ࣌͠ɺ΋͏Ұ౓શͯୟ͖௚͢ͷ͔
33. Premium Service 33 ՝୊ͱBFFͰͷղܾ user tag Service life-log Service point Service ௨৴ύϑΥʔϚϯε Mission Service EC Service BFF
34. × ͱΓ͋͑ͣը໘ͷ৘ใશ෦·ͱΊͪΌ͑ʂ ̋ ద੾ͳཻ౓ͰͷAPIͷू໿
35. ௨৴ύϑΥʔϚϯε ू໿ϩδοΫͷڞ༗ ϨεϙϯεʹΑΔදࣔ੾Γସ͑
36. 36 ՝୊ͱBFFͰͷղܾ ू໿ϩδοΫͷڞ༗ ؔ࿈͢Δෳ਺ͷυϝΠϯ ɾϙΠϯτ֫ಘ৚݅ ɾϢʔβͷར༻ϓϥϯ ɾਭ຾ͷه࿥ ɾਭ຾ͷσʔλιʔε etc…
37. 37 ՝୊ͱBFFͰͷղܾ ू໿ϩδοΫͷڞ༗ ؔ࿈͢Δෳ਺ͷυϝΠϯ ɾϙΠϯτ֫ಘ৚݅ ɾϢʔβͷར༻ϓϥϯ ɾਭ຾ͷه࿥ ɾਭ຾ͷσʔλιʔε etc… LifeLogPointAction ୡ੒͢ΔͱϙΠϯτ͕΋Β͑ΔϥΠϑϩά ू໿
38. 38 ՝୊ͱBFFͰͷղܾ ू໿ϩδοΫͷڞ༗ `Ϣʔβͷਭ຾ه࿥Λऔಘ͢Δendpoint` { id, started_at, ended_at, feeling } `Ϣʔβͷ৯ࣄه࿥Λऔಘ͢Δendpoint` { [ eat_date: meals: [] ] } dataܗࣜͷҟͳΔϥΠϑϩά
39. 39 ՝୊ͱBFFͰͷղܾ ू໿ϩδοΫͷڞ༗ ٖࣅίʔυ const sleepDataSource =dataSourceBackendService.getSleepDataSource() // ϙΠϯτ෇༩ର৅ͷσʔλιʔε͔Ͳ͏͔ const sleepRecord = isPointGiven(sleepDataSource) ? lifelogBackendService.getSleep() : null const userTag = userTagBackendService.getUserTag() if (userTag == ‘premium’) { // ϙΠϯτxഒͷର৅͔ } const isAchieved = sleepRecord != null
40. 40 ՝୊ͱBFFͰͷղܾ ू໿ϩδοΫͷڞ༗ ٖࣅίʔυ // ࠓ೔ͷา਺Λऔಘ const currentStep = lifelogBackendService.getStep() // ࣍ͷϙΠϯτ෇༩ର৅໨ඪΛࢉग़ const nextGoal = pointService.getNextStepGoal(curren tStep)
41. ཁ͢ΔʹϩδοΫ͕ෳࡶ
42. 42 user tag Service life-log Service point Service Android iOS ɾ ɾ ɾ ू໿ϩδοΫͷڞ༗ BFF͕ղܾ͢Δ՝୊ BFF ू໿ ϩδοΫ ෳࡶͳϩδοΫΛҰՕॴʹ ɾ࣮૷ίετͷ࡟ݮ ɾࠩ෼͕ੜ·Εͳ͍
44. ͪΐͬͱ଴ͬͨ
45. 45 ՝୊ͱBFFͰͷղܾ ؔ࿈͢Δෳ਺ͷυϝΠϯ ɾϙΠϯτ֫ಘ৚݅ ɾϢʔβͷར༻ϓϥϯ ɾਭ຾ͷه࿥ ɾਭ຾ͷσʔλιʔε etc… LifeLogPointAction ୡ੒͢ΔͱϙΠϯτ͕΋Β͑ΔϥΠϑϩά ू໿
46. 46 ՝୊ͱBFFͰͷղܾ ؔ࿈͢Δෳ਺ͷυϝΠϯ ɾϙΠϯτ֫ಘ৚݅ ɾϢʔβͷར༻ϓϥϯ ɾਭ຾ͷه࿥ ɾਭ຾ͷσʔλιʔε etc… LifeLogPointAction ୡ੒͢ΔͱϙΠϯτ͕΋Β͑ΔϥΠϑϩά શ͘ҟͳΔσʔλߏ଄ BackendͷυϝΠϯ frontendͷυϝΠϯ
47. BFFͰσʔλߏ଄Λม׵͢Δͷ͸͋Γ͔
48. 48 ՝୊ͱBFFͰͷղܾ Կ͕ࠔΔͷ͔ ɹViewଆͰͷมߋ͕൓ө͞Εͳ͍ ɹex) า਺͕ߋ৽͞Εͨ࣌Ͳ͏ͳΔʁ LifelogPointActionͱ͍͏ந৅తͳ΋ͷ Ϣʔβͷา਺ΛϦΞϧλΠϜͰ൓өͰ͖ͳ͍ (ग़དྷΔ͚Ͳෳࡶ)
49. 49 ՝୊ͱBFFͰͷղܾ ϩδοΫΛͲͪΒʹدͤΔ͔ BFF ɹ࢓༷มߋΛॊೈʹ൓ө frontend ɹϢʔβͱͷΠϯλϥΫγϣϯΛ ɹ ॊೈʹ൓ө user tag Service life-log Service point Service Android iOS ɾ ɾ ɾ BFF ू໿ ϩδοΫ ू໿ ϩδοΫ ू໿ ϩδοΫ
50. BFFͰσʔλߏ଄Λม׵͢Δͷ͸͋Γ͔
51. ݁࿦ɺ࣌ͱ৔߹ʹΑΔ
52. ࢓༷ͷมߋΛଈ࠲ʹ൓ө͍ͨ͠ ϢʔβͱͷΠϯλϥΫγϣϯΛଈ࠲ʹ൓ө͍ͨ͠ …
53. ࢓༷ͷมߋΛଈ࠲ʹ൓ө͍ͨ͠ ϢʔβͱͷΠϯλϥΫγϣϯΛଈ࠲ʹ൓ө͍ͨ͠ … ࠓճ͸
54. ௨৴ύϑΥʔϚϯε ू໿ϩδοΫͷڞ௨Խ ϨεϙϯεʹΑΔදࣔ੾Γସ͑
55. 55 ՝୊ͱBFFͰͷղܾ ϨεϙϯεʹΑΔදࣔ੾Γସ͑ ϥΠϑϩάɿ ɾҎԼͷه࿥ͰϙΠϯτΛ֫ಘ ɹɾ৯ࣄ ɹɾਭ຾ ɹɾମॏ ɾઃఆͨ͠໨ඪΛୡ੒ͯ͠ϙΠϯτΛ֫ಘ
56. 56 ՝୊ͱBFFͰͷղܾ ։ൃ౰ॳͷ࢓༷ ମॏΛه࿥͢Δͱ…
57. Α͘ߟ͑ͨ݁Ռ
58. 58 ՝୊ͱBFFͰͷղܾ ࢓༷ͷ໰୊఺ ɾ͋Δػೳ͔͠࢖Θͳ͍Ϣʔβ΋͍Δ
    ɹ৯ࣄ͔͠ه࿥͠ͳ͍ɺͱ͔
    ɾফ͑Δͱࠞཚ͢Δਓɺઈର͍Δ
    ɹɾ͋ΕɺͳΜ͔ফ͑ͪΌͬͨΜ͚ͩͲ
59. 59 ՝୊ͱBFFͰͷղܾ ࢓༷ͷ໰୊఺ ɾ͋Δػೳ͔͠࢖Θͳ͍Ϣʔβ΋͍Δ
    ɹ৯ࣄ͔͠ه࿥͠ͳ͍ɺͱ͔
    ɾফ͑Δͱࠞཚ͢Δਓɺઈର͍Δ
    ɹɾ͋ΕɺͳΜ͔ফ͑ͪΌͬͨΜ͚ͩͲ ΍ͬͺΓୡ੒ͨ͠΋ͷ΋දࣔͤ͞Α͏ʂ
60. 60 ՝୊ͱBFFͰͷղܾ มߋલ มߋޙ
61. Done!
62. 62 ՝୊ͱBFFͰͷղܾ ϨεϙϯεʹΑΔදࣔ੾Γସ͑ user tag Service life-log Service point Service Android iOS BFF ू໿ ϩδοΫ BFFଆͷू໿ϩδοΫ => ΞϓϦͷਃ੥ͳ͠Ͱमਖ਼͕Մೳ
63. 63 ΞδΣϯμ 1. FiNCʹ͓͚ΔBFFͷ໾ׂ ɹɾBFFͷҰൠతͳఆٛ ɹɾFiNC Appͷ๊͑Δ՝୊ ɹɾBFF͕ղܾ͢Δ՝୊ 2. BFFಋೖ࣮ફ ɹɾػೳ঺հ ɹɾ՝୊ͱBFFΛ༻͍ͨղܾ ɹɹ- ύϑΥʔϚϯε ɹɹ- ϩδοΫͷڞ༗ ɹɹ- ϨεϙϯεʹΑΔදࣔ੾Γସ͑ 3. ࠓޙͷల๬
64. ࠓޙͷల๬ 3
65. ࠓޙͷల๬ 65 ͜͜ͰࠂനͰ͢
66. 66 ࣗݾ঺հ Kensuke Izumi Android Engineer @FiNC Kotlin / javascript / ruby Twitter: @izmeal2000
67. ࠓޙͷల๬ 67 ࣮͸͜ͷBFFͷ࣮૷ऀɺ๻͡Όͳ͍ΜͰ͢
68. ࠓޙͷల๬ 68 Ϗδωε Mobile engineer (๻) Backend engineer ࢓༷ͷ֬ೝ ௐ੔ ࣮૷ͷґཔ
69. ࠓޙͷల๬ 69 Ϗδωε Mobile engineer (๻) Backend engineer ࢓༷ͷ֬ೝ ௐ੔ ࣮૷ͷґཔ ίϛϡχέʔγϣϯϛε
70. ࠓޙͷల๬ 70 ʮา਺͸ୡ੒ͯ͠΋࢒͢Μ͚ͩͬʁʯ ʮ͑ɺࢀՃࡁͷmission͚ͩදࣔ͢ΔΜ͡Όͳ͍ͷʁʯ
71. ࠓޙͷల๬ 71 The BFF is tightly coupled to a specific user experience, and will typically be maintained by the same team as the user interface, thereby making it easier to define and adapt the API as the UI requires, while also simplifying process of lining up release of both the client and server components. ௨ৗBFF͸UIνʔϜʹΑͬͯ։ൃ͞ΕΔ΋ͷͰ͋Δ By SamNewman
72. ࠓޙͷల๬ 72 ݱঢ়ͷBFF ɾஔ͖׵͑ΔલఏͰ࣮ݧతʹ࡞੒ ɾͦΖͦΖϝϯς͕ݫ͍͠
73. ࠓޙͷల๬ 73 ஔ͖׵͑Α͏ɻ ࠓ౓ͦ͜ωΠςΟϒΤϯδχΞ͕։ൃ͠΍͍ٕ͢ज़Ͱɻ
74. ࠓޙͷల๬ 74 Kotlin + Spring Webflux + protobuf Ͱઈࢍ։ൃத!
75. ࠓޙͷల๬ 75 Coroutine΋͋ΔΑʂ