History and Future of React Native App Development for Demae-can

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Hiromasa Uematsu - 2019.9 ~ 2021.2 Frontend Engineer - LINE Securities - LINE Insurance - 2021.2 ~ Demae-can App Team - App for Driver - Demae-can App - Kyoto Office - LIKE: Gaming (FPS)

Slide 3

Slide 3 text

Shinji Kurosawa - iOS Engineer - 2020 ~ 2021.03 - LINE Official Account - Swift - 2021.04 ~ - Demae-can App - Learning React / React Native - Kyoto office

Slide 4

Slide 4 text

Agenda • About Demae-can & LINE • History of Demae-can App Development • Difficulties and Solutions

Slide 5

Slide 5 text

About Demae-can & LINE

Slide 6

Slide 6 text

About Demae-can

Slide 7

Slide 7 text

About Demae-can One of the largest Food Delivery company in Japan

Slide 8

Slide 8 text

About Demae-can One of the largest Food Delivery company in Japan Stores 84,000+ Active Users 7,340,000+

Slide 9

Slide 9 text

About Demae-can Users Demae-can

Slide 10

Slide 10 text

About Demae-can Users Demae-can Stores

Slide 11

Slide 11 text

About Demae-can Users Demae-can Delivery Drivers Stores

Slide 12

Slide 12 text

History of Demae-can & LINE

Slide 13

Slide 13 text

History of Demae-can & LINE 2021.4~ LINE App dev team joined Demae-can App Development 2020.3 Capital Business Partnership 2017.7 LINE DELIMA 2020.5 Join 1 App Developer from LINE 2019.4 LINE Pokeo 2016.5 Business Partnership

Slide 14

Slide 14 text

History of Demae-can App Development

Slide 15

Slide 15 text

Demae-can App Team

Slide 16

Slide 16 text

Demae-can App Team Place to Work App Engineer Tokyo / Kyoto / Okayama

Slide 17

Slide 17 text

Demae-can App Team Place to Work App/Server/Web Engineer QA / CS Planning Marketing Tokyo / Kyoto Osaka / Okayama Fukuoka / Kagoshima Tokyo / Osaka

Slide 18

Slide 18 text

Demae-can App Team Web iOS/Android Application Before we join

Slide 19

Slide 19 text

Demae-can App Team iOS/ Android Application Now iOS Android Frontend Partner From LINE Me

Slide 20

Slide 20 text

Standardization for "TEAM" Development Basic Rules - Versioning rule - Git rule - Scrum - Task Management Consistency - Type System - Linter / Prettier - SonarQube - Testing Continuity - CI/CD - OTA build - Binary build - GitHub Actions - automations

Slide 21

Slide 21 text

Standardization for "TEAM" Development Basic Rules - Versioning rule - Git rule - Scrum - Task Management - Versioning Rule - Binary / OTA Updates / Hotfix - v${binary}.${OTA}.${hotfix} - Git rules - Release branches with GitLab-flow - Scrum - 1 week sprint - Task Management - JIRA

Slide 22

Slide 22 text

Standardization for "TEAM" Development Consistency - Type System - Linter / Prettier - SonarQube - Testing - Type System - Typescript / remove any... - Linter / Prettier - SonarQube - Code Quality / Code Security - Testing - unit testing - snapshot testing - E2E...? not yet...

Slide 23

Slide 23 text

Standardization for "TEAM" Development Continuity - CI/CD - OTA build - Binary build - GitHub Actions - automations - CI/CD - bitrise: OTA Build / Binary Build - Github Actions - linter / prettier / testing - SonarQube - create release

Slide 24

Slide 24 text

Modernization for "NEXT" Development Mainteinability - Refactoring - Business Logic - Application Logic - Use latest packages - renovate - BFF for Web/App Stability - App, Server, ...etc - Crashes - sentry - appcenter-crashes - keep 99.9% Usability - Design System - react-native-web ? - react-gui ?

Slide 25

Slide 25 text

Difficulties and Solutions

Slide 26

Slide 26 text

Demae-can App Team iOS/ Android Application Now iOS Android Frontend Partner From LINE

Slide 27

Slide 27 text

Why React Native?

Slide 28

Slide 28 text

Why not Android/iOS Native?

Slide 29

Slide 29 text

React Native - Written in JavaScript - OTA Updates - Create native apps for Android and iOS using React https://reactnative.dev/

Slide 30

Slide 30 text

Why React Native in our case? React Native or Replacement to Android/iOS Native - Release new features faster - React Native is the best match for our business requirements - Difficult to develop a new app from scratch due to complex domain knowledge

Slide 31

Slide 31 text

Difficulties and Solutions

Slide 32

Slide 32 text

Learning costs

Slide 33

Slide 33 text

- Use TypeScript to develop React Native App - TypeScript is similar to Swift / Kotlin but different Languages (JavaScript / TypeScript) Ecosystem - NodeJS / Build Systems / IDE / Network / Architecture / Testing etc. React / React Native - Declarative UI / Function Components / Hooks / Components of React Native / Native Modules etc. Required knowledge

Slide 34

Slide 34 text

Learning cost - React/React Native Beginners - New team members - Need to learn the framework

Slide 35

Slide 35 text

Our approach Action to learn React / React Native effectively - Once a week • Learn how to use the framework / share domain knowledge and examples of API usage Mob programming Documenting team knowledge - Document knowledge, tips and reviews in Pull Request Learn from React professional - Create a working thread in Slack

Slide 36

Slide 36 text

Result - Our team and frontend team have a common language, React - Progress: Co-work with frontend team - Our team members use React Native framework better than before

Slide 37

Slide 37 text

Refactoring

Slide 38

Slide 38 text

Refactoring As-Is Class Component - Rendering logic - Business logic - No Testing

Slide 39

Slide 39 text

Use ecosystem of NodeJS / React Native Process of refactoring Demae-can app Release after merged Release using bitrise Testing Unit testing Snapshot testing Start React Native Server Pull Request Testing on CI SonerQube Save on Editor Hot Reloading Storybook Build Android/iOS (If native changed)

Slide 40

Slide 40 text

Refactoring As-Is Class Component - Rendering logic - Business logic - No Testing

Slide 41

Slide 41 text

Refactoring Now Function Component - Rendering logic - Snapshot Testng Hook - Business logic - Unit testing Function Component - Rendering logic - Snapshot Testng Function Component - Rendering logic - Snapshot Testng UI Business logic

Slide 42

Slide 42 text

Handle common business logic Web iOS/Android Business logic Business logic

Slide 43

Slide 43 text

BFF(Backend For Frontend) To-Be Web iOS/Android BFF API API

Slide 44

Slide 44 text

Continuous delivery with React Native

Slide 45

Slide 45 text

Problems - Release new features with high reliability - Release strategy for React Native App - No CI/CD systems

Slide 46

Slide 46 text

- Supported by LINE QA team - Document release schedules and features Release Release strategy for React Native - Branching strategies, versioning and procedures for releasing app - OTA Updates for hotfix releases CI/CD • Buid CI/CD pipelines with bitrse - Automation for release(App Store/Google Play/OTA Updates) and check in Pull Request etc. Result

Slide 47

Slide 47 text

Recap - Update development environment: CI/CD and release strategy - More speedy and secure development - Evolve from one development team to large scale development.

Slide 48

Slide 48 text

Thank you