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

[DevDojo] Introduction to Mobile Development

[DevDojo] Introduction to Mobile Development

To efficiently provide more user-friendly services, Mercari's mobile development team has established rules for release cycles and operational processes. In this course, we will explain the actual development cycle and process implemented in the development of Mercari's mobile apps.

mercari

May 26, 2023
Tweet

More Decks by mercari

Other Decks in Technology

Transcript

  1. 1
    Introduction to Mobile Development
    Hideaki Touhara
    Mercari Customer Experience Team / Software Engineer

    View full-size slide

  2. 2
    Confidential
    Today’s contents
    1 Mobile development cycle overview
    2 Details in each phase
    3 Tech stacks

    View full-size slide

  3. 3
    Confidential
    ● Goal
    ○ All attendees know about overview of mobile development cycle
    ○ All attendees know how to find related codebase corresponding iOS app UI
    ● Non-Goal
    ○ All attendees understand the detail of iOS/Android development and codebase
    ○ All attendees can add new features to iOS/Android app
    Goal and Non-Goal of this presentation

    View full-size slide

  4. 4
    Confidential
    1. Mobile development cycle overview

    View full-size slide

  5. 5
    Confidential
    1. Create Specs (PM)
    2. Create UI Design (Designer)
    3. Write DesignDoc (Engineer)
    4. Ticketing & Planning (Member)
    5. Coding & create PR(s) (Engineer)
    6. Dogfooding
    7. QA (Engineer)
    8. Release & Monitoring (Engineer/QA)
    Development cycle overview

    View full-size slide

  6. 6
    Confidential
    2. Details in each phase

    View full-size slide

  7. 7
    Confidential
    ● PM creates feature specs
    ○ Create on Confluence
    ○ Client Engineer is the counterpart of engineering side
    ■ Review the Spec, give opinion, raise any concerns and
    etc...
    Create Specs (PM)

    View full-size slide

  8. 8
    Confidential
    ● Designer creates UI design
    ○ Create on Figma (mainly)
    ○ Client Engineer should check about:
    ■ Transition way (Push/Full-modal/Half-modal)
    ■ Use of Design System
    ■ Error states, Empty states
    ■ Platform specific things (iOS/Android)
    ○ Client Engineer gives opinions from the perspective of
    iOS/Android platform Engineer
    Create UI Design (Designer)

    View full-size slide

  9. 9
    Confidential
    ● Engineer writes Design Doc before actual implementation
    ○ Writing Design Doc helps us to understand what we should
    and what point we should be careful
    Write DesignDoc (Engineer)

    View full-size slide

  10. 10
    Confidential
    ● Scrum members create tickets and have planning meetings
    ○ Ticket type hierarchy:
    ■ Epic: root ticket for a feature
    ■ Story: User stories ticket for 1 epic ticket
    ■ Task: fine-grained tickets for 1 story ticket (optional)
    ○ Have planning meeting based on created Story(Task) tickets
    ■ We use scrum as development style
    Ticketing & Planning (Member)

    View full-size slide

  11. 11
    Confidential
    ● Engineer writes codes, codes and codes!
    ○ Flow
    ■ 1. Engineer codes
    ■ 2. Create PR on GitHub
    ■ 3. Get reviews & make modifications
    ■ 4. Merge after approval
    ● CI status is important
    ○ Unit Tests, UI Test, Snapshot Tests, etc…
    ○ Distribute to employees
    Coding & create PR(s) (Engineer)

    View full-size slide

  12. 12
    Confidential
    ● We use Trunk-based development style as branch management
    ○ Keep PR size small, Merge quickly
    ○ Master branch is always ready for release
    ○ Cover new features or dangerous code with FF to keep master
    stable
    Coding & create PR(s) (Engineer)

    View full-size slide

  13. 13
    Confidential
    ● Some teams do dogfooding before QA as well
    ○ Flow
    ■ Create a dogfooding confluence/doc
    ■ Schedule a meeting with the team to dogfood together
    ■ Discuss on feedbacks received and take actions
    accordingly
    Dogfooding (Engineer)

    View full-size slide

  14. 14
    Confidential
    ● We have dedicated QA members for each camp
    ○ QA = Quality assurance (≠Manual tests)
    ○ Each camp has QA members
    ○ QA is also one of the responsibility of Mobile Engineers
    ○ TestRail is used for managing test cases
    QA (Engineer)

    View full-size slide

  15. 15
    Confidential
    ● Release
    ○ Flow
    ■ Cut release branch
    ■ Release judgement test
    ■ Submit to each app store (App Store, Google Play Store)
    ■ Waiting for review from Apple and Google
    ■ Release※Release related schedules are defined at Mercari
    ● Monitoring
    ○ Engineer should also check crash status after release
    ○ Hot fix release is needed if crash status is severe
    Release & Monitoring (Engineer)

    View full-size slide

  16. 16
    Confidential
    3. Tech stacks

    View full-size slide

  17. 17
    Confidential
    ● Feature Flag
    ○ Feature testing (≒ A/B test) system controlled by backend config
    ○ It’s used for not only new features, but also refactoring and so on.
    ● Log Platform
    ○ Batch and Realtime log sending
    ○ Well-structured log schema
    Feature Flag & Log Platform

    View full-size slide

  18. 18
    Confidential
    ● Feature Flag × Log Platform = Data driven development
    ○ Create a feature with some variants and integrate appropriate
    log for analyze.
    ○ We can decide which variant is the base based on actual data
    (not inference)
    Feature Flag & Log Platform

    View full-size slide

  19. 19
    Confidential
    ● We use JSON and Protobuf for HTTP request and response
    ○ JSON: used for legacy endpoints ( ≒ mercari-api)
    ○ Protobuf: used for microservice endpoints
    ● We DON’T use gRPC for client
    ○ gRPC is used for communications between microservices
    JSON & Protobuf

    View full-size slide

  20. 20
    Confidential
    ● Design System provides consistent UI Design styles and
    components
    ○ There are some layers similar with Atomic Design
    ■ Styles, Elements, Components, Templates
    Design System
    Styles Elements Components

    View full-size slide

  21. 21
    Thank you!

    View full-size slide