Khi làm việc với cả React Web và React Native trong cùng một dự án, nhiều nhà phát triển gặp khó khăn về sự trùng lặp, cấu hình không đồng bộ và quy trình tích hợp liên tục phức tạp. Việc áp dụng một quy trình phát triển tích hợp giúp giải quyết những vấn đề này, mang lại cho nhóm một nền tảng vững chắc để phát triển nhanh chóng và đáng tin cậy. **1. Thống nhất mã nguồn trong monorepo** Bằng cách sử dụng một monorepo (ví dụ: Nx, Turborepo hoặc đơn giản là một thư mục dự án được quản lý bởi một công cụ như pnpm workspace), bạn có thể lưu trữ mã nguồn web và mã nguồn native cùng nhau. Điều này giúp: - Chia sẻ các tệp cấu hình chung (ESLint, Prettier, tsconfig). - Thực hiện refactor trên toàn bộ codebase mà không cần thay đổi từng ứng dụng. - Tận dụng các lệnh script phụ thuộc được tối ưu hóa, giúp việc xây dựng và kiểm tra trở nên nhanh hơn. **2. Chia sẻ cấu hình TypeScript** Tạo một `tsconfig.base.json` chứa các thiết lập chung như mục tiêu `es2022`, `dom` và các đường dẫn tham chiếu đến các thư mục nguồn riêng biệt (`packages/web` và `packages/mobile`). Các ứng dụng con sau đó có thể kế thừa cấu hình này và chỉ cần xác định các quy tắc riêng nếu cần. **3. Xây dựng các custom hooks có thể tái sử dụng** Xác định các custom hooks phổ biến (ví dụ: `useAsync`, `useDebounce`, `useOffline`) trong một thư mục riêng (`packages/shared/hooks`). Vì các hook này sử dụng chung các kiểu TypeScript, chúng có thể được nhập trực tiếp vào cả mã nguồn web và mã nguồn native mà không cần điều chỉnh. **4. Tích hợp CI/CD hiệu quả** Thiết lập một quy trình CI (GitHub Actions, GitLab CI hoặc Azure Pipelines) có thể thực hiện: - Kiểm tra linting và formatting trên toàn bộ monorepo. - Chạy kiểm tra đơn vị cho cả hai nền tảng trong cùng một quy trình. - Xây dựng ứng dụng web (ví dụ: `next build`) và ứng dụng native (`expo export` hoặc `react-native bundle`) trong các bước song song. - Tự động phát hành các package đã được xuất bản lên npm và đăng tải các tệp đóng gói native lên dịch vụ lưu trữ. **5. Áp dụng quy tắc thiết kế thống nhất** Xác định các thiết kế token (màu sắc, khoảng cách, độ dày phông chữ) trong một thư mục chung (`packages/design-system`). Các thư viện thành phần giao diện người dùng như `styled-components` hoặc `@styled-system/core` sau đó có thể tham chiếu đến các token này, đảm bảo giao diện người dùng đồng nhất trên web và thiết bị di động. **6. Thực hiện các bước thực tế** - Khởi tạo workspace: `pnpm init --workspace` và thêm các package cần thiết (`nx`, `@nrwl/react`, `@nrwl/next`, `@nrwl/react-native`). - Tạo một `tsconfig.base.json` chung và tham chiếu đến nó từ `packages/web/tsconfig.json` cũng như `packages/mobile/tsconfig.json`. - Thêm một package `@shared/hooks` và phát triển `useAsync.ts` với một generic `AwaitHandler`. - Tạo một quy trình CI với các job `test`, `lint`, `build-web` và `build-native`. - Xuất các design token sang định dạng JSON và tham chiếu đến chúng trong các styled component. **7. Lợi ích mang lại** Nhờ áp dụng quy trình này, các nhóm có thể giảm thời gian xây dựng từ vài giờ xuống còn vài phút, đảm bảo tính nhất quán trong mã nguồn và triển khai các tính năng mới trên cả hai nền tảng một cách tự động, đồng thời giảm thiểu các lỗi liên quan đến sự khác biệt giữa phiên bản. Bằng cách kết hợp monorepo, cấu hình TypeScript được chia sẻ, custom hooks và quy trình CI/CD được tích hợp, bạn sẽ có được một hệ sinh thái phát triển mạnh mẽ, giúp thúc đẩy sự hợp tác giữa các nhóm web và native, đồng thời duy trì tốc độ phát triển nhanh chóng và đáng tin cậy. **Kết luận** Quy trình phát triển tích hợp không chỉ đơn giản là một bộ công cụ; đó là một nền văn hóa thúc đẩy sự hợp tác, tái sử dụng và triển khai liên tục. Hãy bắt đầu với một workspace nhỏ, mở rộng quy mô khi cần thiết, và bạn sẽ thấy sự khác biệt rõ rệt trong hiệu suất và chất lượng mã nguồn.