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

History and Future of React Native App Developm...

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

LINE DEVDAY 2021

November 11, 2021
Tweet

More Decks by LINE DEVDAY 2021

Other Decks in Technology

Transcript

  1. 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)
  2. Shinji Kurosawa - iOS Engineer - 2020 ~ 2021.03 -

    LINE Official Account - Swift - 2021.04 ~ - Demae-can App - Learning React / React Native - Kyoto office
  3. Agenda • About Demae-can & LINE • History of Demae-can

    App Development • Difficulties and Solutions
  4. About Demae-can One of the largest Food Delivery company in

    Japan Stores 84,000+ Active Users 7,340,000+
  5. 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
  6. Demae-can App Team Place to Work App/Server/Web Engineer QA /

    CS Planning Marketing Tokyo / Kyoto Osaka / Okayama Fukuoka / Kagoshima Tokyo / Osaka
  7. 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
  8. 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
  9. 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...
  10. 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
  11. 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 ?
  12. React Native - Written in JavaScript - OTA Updates -

    Create native apps for Android and iOS using React https://reactnative.dev/
  13. 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
  14. - 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
  15. 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
  16. 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
  17. 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)
  18. 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
  19. Problems - Release new features with high reliability - Release

    strategy for React Native App - No CI/CD systems
  20. - 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
  21. Recap - Update development environment: CI/CD and release strategy -

    More speedy and secure development - Evolve from one development team to large scale development.