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

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)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. About Demae-can & LINE

    View full-size slide

  5. About Demae-can

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. About Demae-can
    Users
    Demae-can

    View full-size slide

  9. About Demae-can
    Users
    Demae-can
    Stores

    View full-size slide

  10. About Demae-can
    Users
    Demae-can
    Delivery Drivers
    Stores

    View full-size slide

  11. History of Demae-can & LINE

    View full-size slide

  12. 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

    View full-size slide

  13. History of Demae-can App Development

    View full-size slide

  14. Demae-can App Team

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 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

    View full-size slide

  20. 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

    View full-size slide

  21. 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...

    View full-size slide

  22. 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

    View full-size slide

  23. 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 ?

    View full-size slide

  24. Difficulties and Solutions

    View full-size slide

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

    View full-size slide

  26. Why React Native?

    View full-size slide

  27. Why not Android/iOS Native?

    View full-size slide

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

    View full-size slide

  29. 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

    View full-size slide

  30. Difficulties and Solutions

    View full-size slide

  31. Learning costs

    View full-size slide

  32. - 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

    View full-size slide

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

    View full-size slide

  34. 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

    View full-size slide

  35. 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

    View full-size slide

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

    View full-size slide

  37. 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)

    View full-size slide

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

    View full-size slide

  39. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. Continuous delivery with React Native

    View full-size slide

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

    View full-size slide

  44. - 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

    View full-size slide

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

    View full-size slide