Nếu bạn đang đọc bài viết này, có lẽ bạn đã quyết định sử dụng framework đa nền tảng thay vì phát triển native. Frameworks đa nền tảng cho phép bạn triển khai trên nhiều nền tảng từ một codebase duy nhất, mang lại hai lợi ích chính:
- Tiết kiệm chi phí và thời gian
- Tính nhất quán trong UX/UI
Hai đối thủ chính trong không gian framework đa nền tảng là Flutter và React Native. Trong các phần sau, chúng ta sẽ thảo luận về những đánh đổi của từng framework từ góc nhìn của một lập trình viên junior, senior và CTO.
Những lưu ý trước khi bắt đầu
Trước khi đi vào chi tiết, có hai điều cần lưu ý:
- Mỗi góc nhìn sẽ bao gồm hai phần: một TLDR với các điểm chính và một phần giải thích chi tiết các đánh đổi trong một bài viết riêng biệt. Điều này cho phép bạn nắm bắt nhanh các điểm chính và đi sâu vào chi tiết nếu cần.
- Các phần được viết theo cách xây dựng lẫn nhau, vì vậy nếu bạn là một lập trình viên junior, tôi khuyên bạn nên đọc qua các phần dành cho senior và CTO. Điều này sẽ giúp bạn hiểu rõ hơn các tác động cấp cao của từng framework và cách chúng ảnh hưởng đến sự phát triển nghề nghiệp của bạn về lâu dài. Tương tự, nếu bạn là CTO lựa chọn Flutter hoặc React Native để phát triển sản phẩm của công ty, tôi cũng khuyên bạn nên đọc qua các phần dành cho junior và senior để hiểu rõ hơn các tác động cấp thấp của từng framework và cách chúng ảnh hưởng đến chất lượng và tốc độ phát triển sản phẩm.
Tổng quan về Flutter và React Native
React Native là một framework ứng dụng di động mã nguồn mở được tạo ra bởi Facebook. Được ra mắt vào tháng 3 năm 2015, nó đã trở thành một trong những framework phổ biến nhất cho phát triển ứng dụng di động.
Flutter là một bộ công cụ phát triển phần mềm giao diện người dùng mã nguồn mở được tạo ra bởi Google. Nó được giới thiệu lần đầu vào tháng 5 năm 2017 và nhanh chóng giành được sự yêu thích trong cộng đồng nhà phát triển.
Các nền tảng được hỗ trợ bởi Flutter và React Native
Cả hai framework đều cho phép bạn triển khai trên iOS, Android, Web, MacOS và Windows, nhưng có một số điểm cần lưu ý:
- Flutter hỗ trợ tất cả các nền tảng ngay từ đầu, nhưng có một hạn chế quan trọng khi triển khai trên web là Flutter không xây dựng HTML.
- React Native hỗ trợ tất cả các nền tảng, nhưng bạn sẽ cần sử dụng các gói của Microsoft (bên thứ ba) để xây dựng trên Windows và macOS, điều này tăng thêm độ phức tạp cho chuỗi công cụ của bạn.
Ngôn ngữ sử dụng bởi Flutter và React Native
- Flutter sử dụng ngôn ngữ lập trình Dart, cũng được phát triển bởi Google. Dart có hệ thống kiểu chặt chẽ, giúp đảm bảo rằng kiểu của biến được biết tại thời điểm biên dịch, giảm thiểu lỗi kiểu tại thời gian chạy.
- React Native sử dụng JavaScript, có lịch sử phong phú trong phát triển web và nhiều tài nguyên trực tuyến. Nó có thể kết hợp với TypeScript để cung cấp kiểu tĩnh, nhưng lỗi kiểu tại thời gian chạy vẫn có thể xảy ra.
Các thành phần giao diện người dùng (UI) trong Flutter và React Native
- Flutter đi kèm với một tập hợp phong phú các widget được thiết kế sẵn theo các ngôn ngữ thiết kế cụ thể như Material Design và Cupertino, giúp tạo ra các ứng dụng có giao diện đẹp và hành vi “native” cho cả Android và iOS. Bạn cũng có thể tạo hệ thống thiết kế riêng của mình với các widget có tính cấu thành cao.
- React Native sử dụng các thành phần native làm các khối xây dựng, do đó cung cấp giao diện, cảm nhận và hiệu suất của các ứng dụng native.
So sánh Flutter và React Native từ góc nhìn của Junior Dev
Những câu hỏi quan trọng:
- Framework nào cung cấp trải nghiệm phát triển tốt nhất (DevX) để tôi có thể cung cấp giá trị cho người dùng nhanh nhất?
- Framework nào sẽ giúp tôi phát triển nhiều nhất như một lập trình viên?
- Framework nào sẽ giúp tôi dễ tìm việc trong tương lai?
TLDR:
- Flutter vượt trội về DevX sẵn có và chuỗi công cụ đơn giản.
- React Native vượt trội về số lượng tài nguyên và cơ hội việc làm.
- Cả hai framework đều giúp bạn phát triển như một lập trình viên, nhưng theo những cách khác nhau.
So sánh Flutter và React Native từ góc nhìn của Senior Dev
Những câu hỏi quan trọng:
- Framework nào giúp đội ngũ của tôi làm việc nhanh hơn và thông minh hơn?
- Framework nào sẽ mang lại sự ổn định công việc để tôi có thể hỗ trợ những người phụ thuộc của mình?
- Framework nào có tiềm năng phát triển cao hơn để tôi tiếp tục trưởng thành như một lập trình viên?
- Framework nào có khả năng được sử dụng nhiều hơn trong tương lai?
TLDR:
- Flutter vượt trội về tiêm chích phụ thuộc (dependency injection), kiểm thử E2E và tiêu chuẩn hóa UI, giúp đội ngũ làm việc hiệu quả hơn.
- React Native vượt trội về số lượng gói có sẵn, nghĩa là có thể có sẵn giải pháp cho vấn đề bạn đang gặp phải, tiết kiệm thời gian phát triển.
So sánh Flutter và React Native từ góc nhìn của CTO
Những câu hỏi quan trọng:
- Framework có các tính năng cần thiết để đạt được mục tiêu kinh doanh không?
- Framework nào giúp chúng ta đạt được mục tiêu với ít tài nguyên nhất?
Các ưu điểm chính của từng framework:
- Flutter vượt trội trong UI phức tạp và tiêu chuẩn hóa UI, phù hợp nếu ứng dụng yêu cầu hoạt ảnh phức tạp và sự nhất quán trong UI là quan trọng đối với hình ảnh thương hiệu.
- React Native vượt trội về số lượng tài nguyên, hỗ trợ web và cập nhật OTA (Over-the-Air), cho phép bạn đẩy các cập nhật mà không cần thông qua quy trình duyệt ứng dụng của cửa hàng, tiết kiệm thời gian.
Các tình huống sử dụng
Xây dựng ứng dụng cho di động, desktop và web với SEO (ví dụ: Medium, Reddit)
- React Native cho desktop và mobile, NextJS cho web
- React Native cho desktop, mobile và web
- Flutter cho mobile và desktop, NextJS cho web
Xây dựng ứng dụng cho di động, desktop và web (ví dụ: Spotify)
- Flutter cho mobile, desktop và web app, NextJS cho website
- React Native cho mobile, desktop và web, NextJS cho website
Xây dựng ứng dụng cho di động với hành vi native (ví dụ: native scrolling, các thành phần iOS đẹp mắt)
- React Native cho iOS và Android
- Flutter cho iOS và Android
Kết luận
Không có framework nào là tốt nhất, chỉ có những đánh đổi mà bạn cần cân nhắc cho trường hợp sử dụng cụ thể của mình.