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

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

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

4 Confidential 1. Mobile development cycle overview

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

6 Confidential 2. Details in each phase

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)

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)

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)

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)

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)

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)

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)

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)

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)

16 Confidential 3. Tech stacks

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

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

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

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

21 Thank you!