From Native to React Native to Flutter

Zerodha · 2022 · 4. Điều chỉnh · Độ khó: Trung bình — bài gốc

Bối cảnh

• Kite là nền tảng giao dịch chính của Zerodha. Ban đầu chỉ có web; 2015 một developer duy nhất viết app Android native; iOS (khoảng 10% người dùng) chỉ là webview bọc web app.
• Tính năng ra web trước, ổn định API rồi mới lên mobile để bù chi phí phát hành và test trên mobile. Tới năm 2022 đội mobile vẫn chỉ có hai người cho nhiều app tài chính có hàng triệu người dùng.

Thay đổi chính

• 2017, React Native cho iOS: viết trong 5 tháng, nhanh hơn hẳn app Android native. Nhưng gặp: cây phụ thuộc Node gãy không rõ lý do, một bản React Native giả trên JCenter làm build Android của nhiều người hỏng, thư viện bên thứ ba phải fork để nâng SDK, nâng cấp React Native gần như không làm được (stack trace trỏ vào native).
• Điểm gãy: trên Android tầm trung, cập nhật giá cổ phiếu (tick nhị phân qua WebSocket nhiều lần mỗi giây) qua setState và reconcile của React không mượt; đã giảm phạm vi render xuống Text, shouldComponentUpdate, throttle, setNativeProps. Thư viện navigation chạy tốt trên iOS nhưng lỗi trên Android, nên bỏ kế hoạch thay app Android, React Native chỉ giữ cho iOS. Hai codebase hoàn toàn khác nhau ngày càng khó bảo trì.
• 2018, Flutter (lúc còn alpha): thử bằng dự án cá nhân nhiều tháng, port vài thư viện cũ sang Dart, dựng prototype UI đầy đủ của Kite với dữ liệu giả trước khi quyết. Lý do theo Zerodha: hot reload, AOT cho production, layout giống flexbox, tự vẽ mọi widget nên sửa được widget gốc bằng cách chép source. Rủi ro framework bị bỏ được chấp nhận vì là mã nguồn mở và đã đủ dùng vài năm.
• Viết lại từ giữa 2018, đạt ngang tính năng app production trong khoảng 3 tháng nhờ codegen tự viết (serializer, enum, nhúng asset) giữ kiến trúc giống app React Native. Kite 3.0 Flutter thay app Android đầu 2019, sáu tháng sau thay app iOS: còn một codebase. APK một kiến trúc khoảng 10 MB nhờ ít phụ thuộc, SVG, không nhúng SDK theo dõi/marketing.
• Vấn đề mới của Flutter: lỗi đồ hoạ của OS/thiết bị làm cả app đen màn hình (dưới 1% người dùng Android theo thời gian); jank do biên dịch shader lần đầu (iOS xoá cache mỗi lần mở); nạp thư viện native trực tiếp từ APK làm crash trên một số máy Mi Android 6 nên phải tắt; sinh trắc học, màn hình 90 Hz, HTTP/2 phải tự viết plugin (plugin HTTP dựa libcurl qua FFI). Thử nghiệm UI hộp đen phải tự viết công cụ (Autopilot).

Vì sao

• Theo Zerodha, Flutter cho đúng đánh đổi với một app giao dịch cập nhật liên tục và đội rất nhỏ; React Native vẫn hợp với app khác của họ (Varsity) và Coin chạy được vì màn hình ít cập nhật thời gian thực.

Bài học cho SWE

• Hai lần viết lại đều xuất phát từ cùng một chi phí: duy trì nhiều codebase cho cùng một app. Hiệu năng chỉ lộ trên máy tầm trung với đúng workload của sản phẩm (tick giá), không lộ trên iOS.
• Đặt cược vào công nghệ mới thì thử đủ lâu ở ngoài production và dựng prototype sát thật trước khi quyết; ít phụ thuộc ngoài làm mỗi lần đổi nền rẻ hơn.

Liên quan

• Kiến trúc frontend · Đổi ngôn ngữ và runtime
• Discord 2025 (React Native trên Android yếu) · Shopify 2026 · Zerodha 2021