Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mercari iOSにおける きらやばArchitectureとAutomation

kagemiku
November 22, 2019

Mercari iOSにおける きらやばArchitectureとAutomation

kagemiku

November 22, 2019
Tweet

More Decks by kagemiku

Other Decks in Technology

Transcript

  1. 1
    Mercari iOSにおける
    きらやばArchitectureとAutomation
    Akira Fukunaga (@kagemiku)
    iOS Engineer
    2019/11/25

    View Slide

  2. 2
    Today’s Outlines
    01 ● 自己紹介
    02
    03
    ● MercariにおけるiOS Engineer
    ● きらやばArchitectureとAutomation

    View Slide

  3. 3
    01 自己紹介

    View Slide

  4. 4
    Akira Fukunaga (@kagemiku)
    Software Engineer (iOS)
    Tech Lead at NewBiz & Category

    View Slide

  5. 5
    人生
    学校
    Mercari
    東京工業大学
    情報理工学院
    2018.04
    休学
    2018.07
    退学
    2019.03
    Merpay
    Integration
    2018.08
    (サマーインターン)
    Merpay
    Integration
    2018.09 - 2019.02
    (内定者インターン)
    退学旅行
    2019.03
    新卒入社
    2019.04
    New Customer
    Growth
    2019.07 - 09
    NewBiz
    2019.10 -
    (Tech Lead)

    View Slide

  6. 6
    ● Merpay Integration (2018.08 - 2019.02)
    ○ メルカリアプリへのメルペイ導入を行うチーム
    ■ サイドメニュー撤廃 & 下タブ導入
    ■ マイページ追加
    ■ タイムラインUIの変更
    ■ その他、必要な作業すべて ...
    ● (Sub) Developer Menu Rearchitecture
    ○ 社内向けの開発者機能の Rearchitecture (後述)
    ○ Objc-C && 1 Storyboard でやばかったので勝手にやった
    インターン時代 (2018.08 - 2019.02)

    View Slide

  7. 7
    ● New Customer Growth (2019.07 - 2019.09)
    ○ 新規お客様向けの施策チーム
    ■ 新規会員登録
    ■ 各種オンボーディング
    ■ まだ A/B テスト段階のため、詳細は割愛
    ● NewBiz & Category (2019.10 - )
    ○ 新規領域の開拓やカテゴリ特化を行う施策チーム
    ■ 絶賛新機能開発中
    ○ iOSのTech Lead
    新卒入社後 (2019.04 -)

    View Slide

  8. 8
    02 MercariにおけるiOS Engineer

    View Slide

  9. 9
    ● お客様に機能を届ける最後のまとめ役
    ○ どんなに良いUI DesignやMLのモデルがあっても
    クライアントアプリに落とし込まないとお客様へは届けられない
    ○ スーパー大事
    ● バックグラウンド・国籍は様々
    ○ 現在は全員で27人ほど (Mercari JPのみ)
    ○ PR・Slack・Document
    全てにおいて英語
    iOS Engineerについて

    View Slide

  10. 10
    チーム構成
    mercari-ios
    Productivity
    Technical Problems
    Architect
    Client
    Feature1
    Feature1
    Feature1
    Feature1
    Feature N
    CI & CD

    View Slide

  11. 11
    チーム構成
    mercari-ios
    Productivity
    Technical Problems
    Architect
    Client
    Feature1
    Feature1
    Feature1
    Feature1
    Feature N
    CI & CD
    20数人で同時に
    開発、無理では

    View Slide

  12. 12
    03 きらやばArchitectureとAutomation

    View Slide

  13. 13
    03 きらやばArchitectureとAutomation

    View Slide

  14. 14
    きらやばArchitecture
    = MVVM + μVC + Store
    (※僕が勝手にそう呼んでるだけです )

    View Slide

  15. 15
    MVVM
    ViewController (VC)
    ViewModel
    Model


    View Slide

  16. 16
    MVVM + μVC
    VC
    View
    Model
    Model


    View
    Model
    View
    Model
    View
    Model
    VC VC VC

    View Slide

  17. 17
    MVVM + μVC
    VC


    VC μVC
    μVC μVC
    VC
    μVC μVC
    Component oriented
    architecture, like React

    View Slide

  18. 18
    MVVM + μVC


    View Slide

  19. 19
    ● Rearchitectureチームの発足とコードベースの刷新 (2018年)
    ○ iOSエンジニアが100人体制になっても
    スピードを落とさずに開発できるようなコードベースを作る
    ○ 現在はその役割の一部を Architectチームが担う
    ○ 共同開発でありがちな XIB(View)ファイルのconflictを見ることはほぼなくなった
    ○ 事実として、現在20数人が同時に一つのアプリを開発できている => ✅成功
    ● 参考
    ○ メルカリJP初のiOSリアーキテクチャは、なぜ「最高に楽しい」のか
    ○ MicroViewControllerで無限にスケールするiOS開発 - iOSDC 2018
    MVVM + μVC

    View Slide

  20. 20
    MVVM + μVC
    VM


    VM VM
    VM VM
    VM
    VM VM
    State
    State
    State
    State State
    State
    State
    State
    Each VM has own State
    It’s hard to pass state
    changes to other VMs...

    View Slide

  21. 21
    MVVM + μVC + Store
    Root
    VM


    VM VM
    VM VM
    VM
    VM VM
    State
    Store
    Dispatcher
    Action
    Introduce Store like Flux
    own

    View Slide

  22. 22
    Architectureの歴史
    2013: Pure MVC (Objc-C)
    2014: Pure MVC (Objc-C)
    2015: Pure MVC, heading to MVVM (Objc-C)
    2016: MVVM (Objc-C + Swift)
    2017: MVVM (Objc-C + Swift)
    2018: MVVM + μVC (Swift)
    2019: MVVM + μVC + Store (Swift)
    2020: heading to SwiftUI + Combine…
    Swift
    SwiftUI

    View Slide

  23. 23
    きらやばArchitecture
    = MVVM + μVC + Store
    (※僕が勝手にそう呼んでるだけです )

    View Slide

  24. 24
    03 きらやばArchitectureとAutomation

    View Slide

  25. 25
    Automation
    一ヶ月で約665 commitsが
    developに入る
    develop branchとのconflict解
    決がやばいのでは

    View Slide

  26. 26
    Automation (GitHub Label)
    ● In House Dev
    ○ 内製のバイナリ配布システムにより commit
    されるたび自動配布
    ● Nightly Merge
    ○ 自動的にdevelopのmergeを行うPRを毎
    晩作成する
    ● Auto Merge
    ○ CIが終わり次第、自動で mergeする

    View Slide

  27. 27
    ● Nightly Merge + Auto Mergeの組み合わせが強力
    ○ CIがNightly Merge PR作成時に、conflictがない場合は自動で mergeする
    ○ 朝会社に来ると
    「feature branchは既に最新のdevelop branchに追従した状態」になっている
    ○ つまり、勝手にdevelop branchとの差分が解消されているため、 develop へ mergeする際
    に大量のconflictが発生することがほとんどなくなる
    Automation (GitHub Label)
    最高

    View Slide

  28. 28
    ● 最強のBotを社内で飼っている
    ○ Binary Submit, App Release, Crash Report, Distribute Binary, etc….
    ○ 諸般の事情により、その姿をお見せすることはまだできない。。。。
    ○ (最強すぎるため)
    Automation (Bot)

    View Slide

  29. 29
    ● Mercari iOSのコードベースは日々進化を遂げている
    ○ 100人で同時に開発できるスケーラブルな Architectureを目指して
    ○ 数々の技術的な挑戦が積み重なっている
    ● Automationもがんばってる
    ○ GitHub Label系Automation
    ○ 社内最強Bot
    ○ 参考: Automation/karakuri for increasing engineering productivity - TechBlog
    ● 最高に楽しい
    ○ iOS Engineerとして、メルカリ iOSのコードベースや開発環境はとても刺激的
    ○ 技術で世界を殴っていきたい方、お待ちしております。
    Wrap up

    View Slide