[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.

Transcript

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

   View Slide

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

   View 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 Slide

4. 4
   Confidential
   1. Mobile development cycle overview
   

   View 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 Slide

6. 6
   Confidential
   2. Details in each phase
   

   View 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 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 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 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 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 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 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 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 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 Slide

16. 16
    Confidential
    3. Tech stacks
    

    View 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 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 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 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 Slide

21. 21
    Thank you!
    

    View Slide