Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Microservices@microservice Meetup vol.6

Microservices@microservice Meetup vol.6

Microservice meetup vol6

Takahiro Fujii

January 18, 2018
Tweet

More Decks by Takahiro Fujii

Other Decks in Programming

Transcript

  1. 2 About me Takahiro Fujii@taka_ft Travel Product Development Section UI

    Platform Group Booking Team / Smart Device Team Assistant Manager 楽天トラベルのサービスを開発しています。 去年の勉強会にはブロク書く枠で参加させて頂きました。 http://takahiro-fujii.hatenablog.com/entry/2017/04/01/182855 http://takahiro-fujii.hatenablog.com/entry/2017/04/03/225809 FiNCの名渕さん(元同僚)
  2. 3 About me Takahiro Fujii@taka_ft Travel Product Development Section UI

    Platform Group Booking Team / Smart Device Team Assistant Manager BackEnd + Front(Java) Front/BackEnd APP + Front + backend 2014 2017/6 now Develop start-up system with small department (International development dep) Focus on web API development. (e.g booking api, restful apis, and so on.) Booking Platform Development Java / Spring Consider entire architecture Manage smart device team Development new web app by SPA React / Swift / Java (Kotlin!) 2016/7 Developed 1st SPA in our department as a front-end engineer. presentation
  3. 4 About me Takahiro Fujii@taka_ft Travel Product Development Section UI

    Platform Group Booking Team / Smart Device Team Assistant Manager Phase2 Phase1 Phase3 2014 2017/6 now Develop start-up system with small department (International development dep) Focus on web API development. (e.g booking api, restful apis, and so on.) Booking Platform Development Java / Spring Consider entire architecture Manage smart device team Development new web app by SPA React / Swift / Java (Kotlin!) 2016/7 Developed 1st SPA in our department as a front-end engineer. presentation
  4. 9 Agenda(3つのフェーズに分けて話していきます) Phase2 Phase1 Phase3 Engineer Back-End Engineer Assistant Manager

    Front-End Engineer Assistant Manager ちょっとMicroservice? っぽくなってきた時期 Roll そして今 2010 - 2013 2014 - 2017 2017 - ⼤体の時期 ⾊々な新規アプリを ガシガシ作っていた時期
  5. 14 Rakuten Travel Domestic Hotel Overseas Hotel Airticket Rent a

    car Bus DP (Hotel + Air) Extranet Multilingual Inbound In-house API Alliance Accounting Inbound Etc… Phase1 沢⼭の⾊々なサービスができたり、機能追加されていった。
  6. 22 RESTについて ・APIのI/F決定にかける時間が⻑くなった ・全てをRestfulによせようとすると、APIの呼び出 し回数が必要以上に増えた ・どこまでRestに寄り添うか問題 考えさせられた点 良かった点 ・巨⼤なAPIたちからRest APIが抽出され、整

    理された ・どうにかしてRestfulに出来ないのか?(とい うことについて考えることは⾟いこともあった が)シンプルなAPI設計をまずは考えるという⾵ ⼟を根付かせてくれた ・ある程度の規模の組織において、APIの粒度 に統⼀性がもたらされた ・沢⼭の先⼈の知恵 Phase2 Web API設計のこれまでとこれから よかった
  7. 24 これって、microserviceっぽい? Phase2 予約Front 1 予約Front 2 Front3 予約API 1

    予約API 2 Front3 通知API 決済API ホテルAPI BackEnd Generic API … … … ※この時期で総数100+位
  8. 25 これって、microserviceっぽい? Phase2 予約Front 1 予約Front 2 Front3 予約API 1

    予約API 2 Front3 通知API 決済API ホテルAPI BackEnd Generic API … … … ※この時期で総数100+位 それっぽくなってきた?
  9. 26 これって、microserviceっぽい? Phase2 予約Front 1 予約Front 2 Front3 予約API 1

    予約API 2 Front3 通知API 決済API ホテルAPI BackEnd Generic API … … … ※この時期で総数100+位
  10. 27 課題1 : 本当に分けないといけない? 国内 ホテル 海外 ホテル 航空券 バス

    レンタ カー 予約する 予約するという⾏為は共通なはずなのに Phase2 予約API 1 予約API 2 ⽴ち⽌まって考えると、 本当に2つのAPIが必要なのかという疑問が… なんで分ける必要あったんだっけ…
  11. 33 本当に分けないといけない? Phase2 予約Front 1 予約Front 2 Front3 予約API 1

    予約API 2 Front3 通知API 決済API ホテルAPI BackEnd Generic API … ・Front1ではポイントのこの機能が使えるのに、 Front2ではこの機能が使えないとかが発⽣(本当は そうしたくないのに) ・ある機能を修正する際に、予約API1にだけ修正 が⾏われて気づかぬ間に若⼲の仕様差分が⽣まれる ・機能の挙動がFront1,Front2で微妙に違う ・Front1にだけ影響がある修正なはずなのに、なぜ か根っこの⽅にあるAPIも直さないといけない ・ユーザは同じサイト(楽天、楽天トラベル)を回遊 しているはずが、UIがガラッと変わったり、微妙な 差分に悩まされたりする ・ビジネスロジックの責任範囲がfront/back-end間 で曖昧なので、案件ごとに影響範囲を正確に特定す るのに時間がかかる(本当はもっと複雑な図) ・ドメインロジックが散らばっていて、複数のアプ リケーションが同じドメインに対してアクションし ている (微妙に異なる) ⼀緒でいいはずの UI Component (微妙に異なる) 重複した Business Logic 特定のクライアント⽤の ビジネスロジックに 侵⾷しているGeneric API FrontEnd / Backendの実装の Responsibilityがあいまい
  12. 36 歪んでいたGlobal対応 国内 海外 ※(⽇本以外) ・⼀部のAPIだけ多⾔語されていたり、されていな かったり。(clientからすると使いづらい) ・⾔語だけではなく、キャンセルポリシー、税⾦、 などなどなどが、⽇本よりの設計になっていて、海 外クライアントから⾮常に使いづらいものに

    ・海外クライアントがシステム連携するには使いづ らいAPIインターフェース (統⼀されていなかった) 多⾔語化へのアプローチ 世界基準ではない(主に強く⽇本の影響をうけた) データフォーマット、ドメインを無理やり使う
  13. 37 各UIアプリケーション/外部向けAPIの機能のずれ Web Native App ・WebとAppで仕様がかなりごちゃごちゃに。 ・どちらも分かる⼈がいなくなり、独⾃進化を遂げ 始める ・Webが使うAPIと外部公開/連携⽤APIで違う仕様 があったりするが、ふと距離をおいて考えると、

    「あれ、なんで違う必要あるんだっけ」っていう漢 字の違い ・なぜかWebに出来ないことが外部公開⽤のAPIか らだと出来たり、Webからじゃないと出来ないこと があったりしてバグを⽣んだりする ・アプリの修正範囲の洗い出しが⾯倒 提供している機能が(無駄に)違う WebとNative Appで実装の責任範囲が異なる 外部公 開/連携 ⽤API User(Consumer)
  14. 43 APP + Front + backend 2017/6 now 僕はUI Platform

    Groupに。 (FrontEndよりの⼈に) Phase3
  15. 44 Architecture(簡略化されています) UI Distribution API API Gateway BFF/Orch Domain APIs

    楽天トラベル (WEB) 楽天トラベル (Native) 検索API Gateway api api api api api Orch Repository
  16. 45 Architecture(簡略化されています) UI Distribution API API Gateway BFF/Orch Domain APIs

    楽天トラベル (WEB) 楽天トラベル (Native) 検索API Gateway api api api api api Orch Repository そんなに前と変わってなくない?
  17. 48 Language(Before) Front - Java (Thymeleaf, Spring等) - Swift, Java

    BackEnd - Java(Spring Boot) API Gateway - Rakuten App Engine(Java) Front - Javascript(Node, React, Redux等), Node - Java (Thymeleaf, Spring等) - Swift, Java + Kotlin? BackEnd - Java(Spring Boot) API Gateway - Kong Language(After)
  18. 50 Scale(FrontEnd) BackEnd + Front(Java) Front + backend 2014 2017/6

    now 2016/7 Developed 1st SPA in our department as a front-end engineer. 2 FrontEnd Engineer 4 Native App Engineer 20+ FrontEnd Engineer 8 Native App Engineer Language / Frameworkを替えたこともあり、 そこから結構な数のエンジニアに参画して頂いています。 (異動してくるパターンも有) ⼈、増えております。
  19. 51 Organization(簡略化しています) UI Platform Group DevOpts PDM STE SDET Notification

    DBA Customer Data Booking & Membership Search Platform WEB iOS Android API Gateway Product Management QA FrontEnd(20+) Infra / CI / CD Domain(70+)
  20. 52 Organization(簡略化しています) UI Platform Group DevOpts PDM STE SDET Notification

    DBA Customer Data Booking & Membership Search Platform WEB iOS Android API Gateway Product Management QA FrontEnd(20+) Infra / CI / CD Domain(70+) Javascript / Node Java(BackEnd) New!
  21. 53 UI Platform Group UI Platform Group WEB iOS Android

    API Gateway FrontEnd(20+) Javascript / Node New! ・様々な理由により、⾔語・フレームワーク変更 ・全体的にSPA(SSR)に舵を切った ・html, cssの実装も⾃グループ内で⾏うように(正 確にはzeplinのdesign mockをからUI componentを 実装するようになった) ・UI componentを意識が向くようになると、UIと いう観点でのmicroserviceについて考えるように ・元々そこを専⾨にしていた⼈が2⼈だったので、 急速拡⼤中!(2 -> 20+) / Facebookから来てくれた ⼈も ・API Gatewayも⾃グループにチームを作り、他部 署と主体的にAPI Gatewayの責務について調整する ように ・(個⼈的には) Native Appも⾒るようになったこと で、webとnative app間のarchitectureについても意 識するように
  22. 55 UI Component ・StoryboardでUI Componentを管理 ・いわゆるドメインを含まないComponentだけで はなく、ドメイン情報を含むようなComponentに 関しても、共通化、汎⽤化するものに関してはUI Componentとして管理 ・UI

    componentを意識が向くようになると、UIと いう観点でのmicroserviceについて考えるように ・Designerと密にコミュニケーションをとりなが ら、汎⽤化したいところと汎⽤化しないポイントを 探っている(試⾏錯誤している状態) ・DomainlessのUI ComponentはPivotal UIに近いか も(Pivotal UIはstorybookではないですが)
  23. 59 課題 – でも、UIに最適化されたAPIはやっぱり必要 Form Hotel information Item information とある画⾯

    Componentを またがるロジックがある場合 もあったり API API Orchestrat ion API
  24. 61 Responsibility of front-end application Realize UI / UX according

    to • How looks like. • How user can interact in our system. • How system feedback to user after user interacted. • Place of the UI parts • Calculation logic for styling. Such as width, height of the UI. • SEO Requirements • And so on.. I18n / I10n User Interaction feature • Gather user interaction data for tracking. Part of Validation / Identify User ※ ⼀部を抜粋しているもので、本当はもっと沢⼭ あります。FrontEndと、BackEndの実装の責任範 囲を今⼀度明確にする為に再定義しました。
  25. 63 Architecture UI Distribution API API Gateway BFF/Orch Domain APIs

    楽天トラベル (WEB) 楽天トラベル (Native) 検索API Gateway api api api api api Orch Repository BackEnd Engineerから ⾒えていた Microservice の中⼼
  26. 64 Architecture UI Distribution API API Gateway BFF/Orch Domain APIs

    楽天トラベル (WEB) 楽天トラベル (Native) 検索API Gateway api api api api api Orch Repository FrontEndから みた Microservice って?
  27. 65 Architecture UI Distribution API API Gateway BFF/Orch Domain APIs

    楽天トラベル (WEB) 楽天トラベル (Native) 検索API Gateway api api api api api Orch Repository いいから使いや すいResponse くれ
  28. 67 Architecture(こんな感じ!) UI Components※ API Gateway BFF/Orch Domain APIs Front

    End App Front End App Gateway api api api api api Orch Repository Front End App Front End App ※親⼦関係は有
  29. 68 Architecture(こんな感じ!) UI Components※ API Gateway BFF/Orch Domain APIs Front

    End App Front End App Gateway api api api api api Orch Repository Front End App Front End App ※親⼦関係は有 FrontEnd BackEnd
  30. 70 We are hiring. BackEnd + Front(Java) Front + backend

    2014 2017/6 now 2016/7 Developed 1st SPA in our department as a front-end engineer. 2 FrontEnd Engineer 4 Native App Engineer 20+ FrontEnd Engineer 8 Native App Engineer FrontEnd Engineer募集中です!! (Native Appも!) 話聞いてみたいとかだけでも気軽にお声がけください [email protected]