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

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

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

3a35402ba4f955e81dce2c7a22609d5c?s=128

LINE DEVDAY 2021
PRO

November 11, 2021
Tweet

More Decks by LINE DEVDAY 2021

Other Decks in Technology

Transcript

  1. None
  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