Tôi đã thử phát triển cùng một ứng dụng bằng Flutter, React Native và Ionic

• Trong khi tìm kiếm framework phát triển di động đa nền tảng tối ưu, tôi đã chú ý đến Flutter, React Native và Ionic
• Cả ba framework đều hứa hẹn hiệu năng tốt trên nhiều nền tảng với một codebase duy nhất
• Tôi đã tạo ba phiên bản của một ứng dụng di động hiển thị dữ liệu cơ bản trên màn hình bằng API để so sánh
  • Yêu cầu của ứng dụng: hiển thị thông tin quốc gia khi màn hình tải, có loading spinner, có nút lấy một quốc gia ngẫu nhiên mới, danh sách quốc gia chỉ tải một lần

Flutter

• Flutter là framework mã nguồn mở do Google tạo ra vào năm 2017, dùng để xây dựng ứng dụng native cho nhiều nền tảng từ một codebase duy nhất. Dựa trên ngôn ngữ Dart
• Tôi học tài liệu và tutorial của Flutter trong một giờ rồi bắt đầu phát triển
• Việc thiết lập môi trường phát triển và chạy emulator diễn ra mượt mà
• Tôi đã làm ra ứng dụng với các chức năng cơ bản chỉ trong 4 giờ
• Tính năng gợi ý của Android Studio hỗ trợ rất nhiều cho quá trình phát triển
• Tính năng Hot Reload cho phép kiểm tra thay đổi ngay lập tức, giúp rút ngắn thời gian phát triển
• Tuy nhiên, khái niệm "mọi thứ đều là widget" khiến mã bị lồng nhiều, style và phần tử trộn lẫn nên không thật sự trực quan

React Native

• Đây là framework JavaScript mã nguồn mở do Meta tạo ra vào năm 2015, có thể dùng để xây dựng ứng dụng Android và iOS native
• Tôi đã có kinh nghiệm dùng thư viện React và cũng đã cài sẵn VS Code
• Quá trình thiết lập môi trường phát triển khá phức tạp/dễ gây bối rối (cần hiểu sự khác nhau giữa Expo Go và React Native CLI)
• Tôi hoàn thành ứng dụng trong 2,5 giờ nhưng gặp khó khi xử lý vấn đề hiển thị hình ảnh
• Nhờ kiến trúc component-based của React, mã ngắn gọn và được mô-đun hóa
• Với JSX, có thể viết UI của component bằng mã tương tự HTML

Ionic

• Ionic là bộ công cụ UI di động mã nguồn mở ra đời năm 2012, dùng để xây dựng ứng dụng di động đa nền tảng hiện đại, chất lượng cao từ một codebase duy nhất
• Có thể phát triển bằng React, Vue hoặc Angular
• Cung cấp nhiều UI component phong phú và giao diện người dùng hấp dẫn
• Tôi xem video và hướng dẫn về Ionic trong 30 phút rồi bắt đầu phát triển
• Tôi phát triển ứng dụng bằng phiên bản Angular và có thể làm nhanh nhờ hệ sinh thái phát triển quen thuộc
• Nhiều tệp cấu hình JSON và TypeScript được tạo ra trong bước thiết lập ban đầu có phần hơi quá tải
• Tôi hoàn thành ứng dụng trong 2 giờ
• Việc triển khai UI dễ dàng và tài liệu được viết rất tốt
• Có thể tách UI và logic bằng cách dùng HTML template
• Nhờ các UI component như Spinner và Floating Action Button, việc xây dựng UI trở nên dễ dàng

So sánh: Flutter, React Native, Ionic

• Phong cách mã và ngôn ngữ
  • Các framework dựa trên JavaScript chiếm ưu thế về độ dễ đọc và tính đơn giản của mã
  • Kiểu mã lồng nhau của Flutter hơi rối và khó đọc
  • Việc thích template của React hay Angular phụ thuộc vào sở thích cá nhân
• Hệ sinh thái
  • Tính đến tháng 4 năm 2024, trong 500 ứng dụng hàng đầu được cài đặt tại Mỹ, 12,57% được làm bằng React Native, 5,24% bằng Flutter và 0,52% bằng Ionic
  • React Native mang lại nhiều tự do nhưng cũng có thể gây bối rối trong cấu hình và cách dùng công cụ
  • Flutter đang tăng về mức độ được chấp nhận và có nhiều kho lưu trữ công khai trên GitHub
• Công cụ
  • Hot Reload
    • Trên trình duyệt, cả ba framework đều tải lại ứng dụng nhanh khi mã thay đổi
    • Trên thiết bị Android hoặc simulator, Hot Reload của Flutter là nhanh nhất
  • Gỡ lỗi từ xa
    • Flutter DevTools trực quan và cung cấp nhiều tính năng
    • Ionic có giao diện tương tự Chrome Developer Tools nên dễ gỡ lỗi
    • React Native có React DevTools nhưng vẫn kém Flutter và Ionic ở khả năng gỡ lỗi từ xa
• Kích thước ứng dụng
  • Ionic: 3.2MB, Flutter: 18.1MB, React Native: 25.2MB
  • Dung lượng chiếm dụng sau khi cài đặt lần lượt là 9.61MB, 34.66MB và 55.47MB
• Trải nghiệm người dùng
  • Flutter và Ionic cung cấp các UI component phù hợp với từng nền tảng để đảm bảo trải nghiệm người dùng nhất quán
  • React Native cần phụ thuộc vào thư viện bổ sung
• Hiệu năng
  • Flutter được biên dịch thành mã native nên được kỳ vọng sẽ nhanh hơn React Native
  • Ionic chạy trong webview nên hiệu năng có thể chậm hơn đôi chút

Kết luận

• Tôi muốn đào sâu hơn về phong cách mã của Flutter, và tính năng Hot Reload có thể thay đổi cuộc chơi trong gỡ lỗi là rất hấp dẫn
• Dù vậy, tôi vẫn bị thu hút hơn bởi Ionic vì có thể tận dụng kiến thức phát triển web sẵn có (TypeScript, HTML, CSS) cho phát triển ứng dụng di động
• Tôi nghĩ việc nâng cao năng lực phát triển Ionic sẽ giúp cải thiện năng lực của mình với vai trò lập trình viên web và di động
• Khi dự án phát triển hơn, cách tổ chức mã, tách biệt mối quan tâm và khả năng tái sử dụng component sẽ trở nên rõ ràng hơn
• Có thể xây dựng ứng dụng tuyệt vời bằng bất kỳ framework nào trong ba framework này
  • Khi chọn framework, không nên bỏ qua niềm vui trong quá trình phát triển
  • Khuyến khích thử khám phá các framework khác nhau bằng cách tự phát triển một ứng dụng thử nghiệm

[firea32]

Đây là thư viện cross-platform duy nhất sử dụng native UI nên thật khó để từ bỏ…
Nếu có lựa chọn thay thế thì tôi muốn chuyển ngay, nhưng nhìn vào việc cả Flutter lẫn Ionic trong bài đều không chọn native UI thì có vẻ là không có tương lai.

[bus710]

Trong trường hợp của tôi, Flutter rất hay vì có thể làm mọi thứ bằng Dart mà không cần biết html/css.

[superwoou]

Thường thì những người làm web sẽ thấy RN tiện hơn, còn những người không phải xuất thân từ web thì lại nói Flutter dễ dùng hơn.

[optid77]

Có lẽ vì bản thân cross-platform vẫn khá ngách nên việc phát triển các thư viện liên quan thường chậm hoặc còn thiếu.
React Native dường như có thế mạnh ở chỗ chia sẻ được một phần hệ sinh thái React.

Tôi nhớ là gần đây khi phát triển RN, so với lúc làm cách đây 2 năm, năng suất của RN đã tăng lên rõ rệt nhờ có thể sử dụng các thư viện đang được phát triển/sử dụng rất tích cực trong React như Tailwind, ReactQuery, TRPC.

[kaistj]

Theo kinh nghiệm cá nhân của tôi, khi phát triển ứng dụng thì phần quan trọng là quản lý trạng thái và UI.

Với RN, tôi dùng Redux + Redux-saga cho quản lý toàn cục, còn theo từng trang thì dùng React-query.
Flutter thì tôi đã dùng Riverpod.

Cá nhân tôi thấy việc quản lý trạng thái và kiểm soát thứ tự logic ở phía React dễ hiểu hơn một chút,
và cũng thuận tiện hơn khi phát triển. Vì là nền tảng dựa trên web nên việc phát triển có phần dễ hơn.

Với Flutter, cá nhân tôi thấy việc hiểu Riverpod không hề dễ. (Cũng có thể vì tôi đầu tư thời gian chưa nhiều.)
Quản lý trạng thái đơn giản thì không gặp khó khăn lớn, nhưng có lẽ do mức độ hiểu về nền tảng,
nên ở phần xử lý thay đổi trạng thái và phần xử lý dùng chung sau khi gọi server API, việc triển khai có phần phức tạp? khó khăn.

Về phía UI thì các widget của Flutter có thuộc tính và chức năng được định nghĩa rất tốt nên phát triển khá thuận lợi.
React thì tôi đã dùng thư viện UI antd, và trải nghiệm sử dụng cũng không tệ.

React là trải nghiệm từ 2 năm trước nên các thư viện liên quan đến phát triển khá cũ,
còn Flutter thì tôi phát triển gần đây nhưng thời gian đầu tư lại ít.

Tôi cũng để lại trải nghiệm phát triển của mình dưới phần bình luận~
Mọi người cứ xem như là “à, cũng có những điểm như vậy nhỉ...” thôi nhé~ ^^

[xguru]

Cảm ơn bạn! Mình nghĩ điều này cũng sẽ giúp ích cho những người khác.