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

Hiromasa Uematsu
LINE / Kyoto Developer Division Client Engineering Team / Software Engineer
Shinji Kurosawa
LINE / Kyoto Developer Division Client Engineering Team / Software Engineer

https://linedevday.linecorp.com/2021/ja/sessions/139
https://linedevday.linecorp.com/2021/en/sessions/139
https://linedevday.linecorp.com/2021/ko/sessions/139

Transcript

2. 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)
3. Shinji Kurosawa - iOS Engineer - 2020 ~ 2021.03 - LINE Official Account - Swift - 2021.04 ~ - Demae-can App - Learning React / React Native - Kyoto office
4. Agenda • About Demae-can & LINE • History of Demae-can App Development • Difficulties and Solutions
5. About Demae-can & LINE
6. About Demae-can
7. About Demae-can One of the largest Food Delivery company in Japan
8. About Demae-can One of the largest Food Delivery company in Japan Stores 84,000+ Active Users 7,340,000+
9. About Demae-can Users Demae-can
10. About Demae-can Users Demae-can Stores
11. About Demae-can Users Demae-can Delivery Drivers Stores
12. History of Demae-can & LINE
13. 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
14. History of Demae-can App Development
15. Demae-can App Team
16. Demae-can App Team Place to Work App Engineer Tokyo / Kyoto / Okayama
17. Demae-can App Team Place to Work App/Server/Web Engineer QA / CS Planning Marketing Tokyo / Kyoto Osaka / Okayama Fukuoka / Kagoshima Tokyo / Osaka
18. Demae-can App Team Web iOS/Android Application Before we join
19. Demae-can App Team iOS/ Android Application Now iOS Android Frontend Partner From LINE Me
20. 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
21. 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
22. 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...
23. 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
24. 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 ?
25. Difficulties and Solutions
26. Demae-can App Team iOS/ Android Application Now iOS Android Frontend Partner From LINE
27. Why React Native?
28. Why not Android/iOS Native?
29. React Native - Written in JavaScript - OTA Updates - Create native apps for Android and iOS using React https://reactnative.dev/
30. 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
31. Difficulties and Solutions
32. Learning costs
33. - 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
34. Learning cost - React/React Native Beginners - New team members - Need to learn the framework
35. 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
36. 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
37. Refactoring
38. Refactoring As-Is Class Component - Rendering logic - Business logic - No Testing
39. 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)
40. Refactoring As-Is Class Component - Rendering logic - Business logic - No Testing
41. 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
42. Handle common business logic Web iOS/Android Business logic Business logic
43. BFF(Backend For Frontend) To-Be Web iOS/Android BFF API API
44. Continuous delivery with React Native
45. Problems - Release new features with high reliability - Release strategy for React Native App - No CI/CD systems
46. - 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
47. Recap - Update development environment: CI/CD and release strategy - More speedy and secure development - Evolve from one development team to large scale development.
48. Thank you