Flutter, cơ hội đánh bại React-Native (phía sau những dòng code)

Vào thời điểm tôi quyết định đặt phím và viết về chủ đề này thì trên thị trường đã có hàng tá bài so sánh về React-Native và Flutter rồi. Vậy tại sao tôi vẫn quyết định viết tiếp?

Khác với những bài so sánh khác, lần này tôi hứa sẽ không hề đề cập đến một dòng code nào, thay vào đó chúng ta sẽ đào sâu hơn về cách hoạt động, kiến trúc, thiết kết của 2 framework (or engine) trên. Tôi sẽ cố gắng giới thiệu cho các bạn một cái nhìn tổng quan nhất về chúng.

Nếu bạn đã quá mệt mỏi với việc suốt ngày chỉ vùi đầu vào những dòng code hoặc tìm hiểu công nghệ mới qua những dòng code khô khan thì bài viết này dành cho bạn.

1. Giới thiệu FLUTTER:

Flutter là lời đáp trả trực tiếp của Google nhắm thẳng vào React-Native của Facebook. Flutter cho phép các lập trình viên của google có thể tạo ra app IOS và Android đơn giản chỉ với một lần code. Điều này nghe có vẻ là khá hấp dẫn nhưng có lẽ Flutter phải mất một chặn đường dài nữa để bắt kịp React-Native. Hiện tại, Dev chủ yếu tập trung vào React-Native vì sự phát triển không ngừng của nó, dẫn đến việc thờ ơ với sự xuất hiện của Flutter. Tuy nhiên, tôi tin rằng Flutter mới thật sự là tương lai của mobile app với những lợi thế sau đây:

5 cái nhìn đầu tiên về Flutter:

  • Ngôn ngữ Dart. Vậy Dart là gì? Nhiều lập trình viên sẽ thắc mắc.
  • IDE tốt nhất cho Flutter là Android Studio và IntelliJ IDEA.
  • Flutter sử dụng cầu nối là Dart. App sẽ nặng hơn nhưng chạy nhanh hơn.
  • React-Native và Flutter có những cấu trúc tương tự nhau như Event Handler và Class Extensison.
  • Việc cài đặt thư viện ngoài cùng với Animation trong Flutter rất tốt và mượt mà.

Vậy Flutter và React-Native có thật sự giống nhau ?

2. So sánh, phân tích

Cơ chế hoạt động:


Khác với React-Native dùng Javascript làm cầu nối để gọi các component Native của IOS và Android

Flutter được xây dựng với C/C++, Dart, Skia (2D rendering engine), Flutter compile toàn bộ code trực tiếp thành code ARM x86 từ đó có thể dễ dàng sử dụng GPU của thiết bị cũng như gọi các API native một các dễ dàng.

Flutter còn tích hợp cả animation, rendering, widgets, gestures vào trong framwork để dev có thể tinh chỉnh giao diện đến tận level pixel với hiệu năng cực tốt. Nhờ vậy, Với Flutter, không có giới hạn nào về giao diện.


Flutter hoạt động trên IOS và Android như thế nào ?

  • Android: Code C/C++ của thiết bị sẽ được biên dịch bởi Android NDK. Toàn bộ code Dart (của framework và của bạn) sẽ được tiền biên dịch (AOT) thành code native và thư viện ARM. Và toàn bộ những thứ trên sẽ được build thành file .apk. Mọi thao tác render, event, input, … đều nằm trong code Flutter và App code. Cách hoạt động này tương tự với nhiều Engine game hiện nay.
  • IOS: Code C/C++ sẽ được biên dịch bởi LLVM. Toàn bộ code Dart (của framework và của bạn) sẽ được tiền biên dịch (AOT) thành code native và thư viện ARM. Và toàn bộ những thứ trên sẽ được build thành file .ipa. Mọi thao tác render, event, input, … đều nằm trong code Flutter và App code. Cách hoạt động này tương tự với nhiều Engine game hiện nay.

Flutter hoạt động với các widget có sẵn của HĐH (OEM) như thế nào ?

Không, thật ra Flutter không làm việc với chúng. Thay vào đó, Flutter cung cấp hàng tá các widgets (bao gồm cả Material Design và Cupertino (IOS styled) widgets), được quản lý và render bởi Flutter’s framework và engine.

Đội ngũ của Flutter tin rằng, với cách hoạt động như vậy. Những app được xây dựng bởi Flutter sẽ có được chất lượng tốt hơn và sẽ không bị giới hạn bởi những tính năng của hệ điều hành mà nó phụ thuộc vào.

VD: Trong Android một số thao tác cử chỉ định hướng (gesture) rất khó để kiểm soát được. Với Flutter, ta có thể tự xây dựng một bộ gesture riêng. Hơn thế nữa, gesture của những tác giả khác nhau có thể tương thích tốt với nhau.

Cài thêm thư viện:

Trong Flutter, mọi thứ được cài đặt một cách tự động. Trong React nhiều thư viện yêu cầu việc cài đặt thủ công.

Flutter tích hợp trình quản lý packages “packages manager”, nhờ vậy người dùng không cần thiết phải kết nối với Xcode Cocoapods, hoặc sử dụgn React-Native link như thông thường và cài đặt packages thông qua nmp.

VD: chỉ với câu lệnh “flutter packages get” là mọi thứ sẽ đâu vào đấy.

3. Kết luận

Điểm mạnh của Flutter:

  • Ngôn ngữ Dart : Hướng đối tượng với Dart. Tuy cú pháp hơi dài dòng nhưng đối với những ai đã có kinh nghiệm làm việc qua với Java / C# sẽ cảm thấy thoải mái.
  • Không phải thiết lập nhiều: chỉ cần khởi động project một cách bình thường là mọi thứ đã có sẵn cho bạn.
  • Cài đặt môi trường nhanh chóng: chỉ cần tải Flutter trên git về, sau đó chạy “flutter doctor” thứ sẽ báo cho bạn biết rằng hệ thống của bạn còn thiếu những gì để chạy được Flutter. Sau đó tạo một project với Android Studio hoặc bất kỳ một IDE nào hỗ trợ. Chỉ việc gắn Flutter vào và chạy thôi. Flutter còn hỗ trợ hot reloading giống như React-Native.
  • Được hỗ trợ tận răng với các IDE: Android Studio, IntelJ Idea, VSCode,…
  • Tích hợp sẵn navigator: Navigator được tích hợp sẵn khi mội project mới của Flutter được tạo ra. Chúng ta có thể khởi tạo ngay một route mà không cần phải kết nối nó với bất kỳ thư viện nào của bên Native.
  • Tích hợp sẵn giải pháp quản lý dữ liệu: đối với Flutter, luôn có một châm ngôn: “Everything has a Widget“. Flutter hỗ trợ một thư viện quản lý state cực kỳ hiệu quả. Với sự giúp sức của thư viện này, ta có thể dễ dàng điều chỉnh và tha đổi state cho widget một cách linh hoạt.

Điểm yếu của Flutter:

  • Rào cản lớn: Đối với việc sử dụng ngôn ngữ Dart kèm theo kế thừa, đa hình và hàng tá thứ khác từ OOP, thì đây là một rào cảng không hề nhỏ đối với những ai chỉ học môi JavaScript hoặc muốn chuyển từ React-Native sang.
  • Không có JSX: Đối với những ai đã quen thuộc với React-Native, khi nhìn vào file code Dart. Làm việc với data mà không có dấu ngoặc, không có style code, quả thật là không dễ dàng.
  • Nỗi khổ của Styling: Không có quy chuẩn nào cho style, templete, controller. Vậy nên khi khai báo một component mới thì ta phải tự mô tả style cho component đó.
  • Xử lý animation sẽ khó hơn: Mặc dù có thể làm nhiều thứ hơn với Animation, nhưng Flutter cũng yêu cầu một mức độ xử lý cao hơn so với React-Native.
  • Tối ưu: Với Flutter, 2 trạng thái widget để kế thừa là changeable (stateful) và unchangeable (stateless). Trong khi đó đối với React-Native ta có thể quản lý được cả vòng đời của Component. Và việc thiết sót những tool để lưu giữ trạng thái của của app cũng là một điểm yếu lớn. Tuy nhiên điều này vẫn có thể được giải quyết bằng cách tuần tự hoá trạng thái hiện tại.

Nhìn chung, Flutter sẽ có được một tương lai tươi sáng nếu như nó có thể lượt bỏ được những dòng code dài dòng của Dart, cũng như thay đổi cách khai báo hàm và class hoặc sử dụng JSX or XML để hệ thống lại cấu trúc của một widget.

Nguồn: https://medium.com/@krakien/flutter-c%C6%A1-h%E1%BB%99i-n%C3%A0o-%C4%91%E1%BB%83-%C4%91%C3%A1nh-b%E1%BA%A1i-react-native-ph%C3%ADa-sau-nh%E1%BB%AFng-d%C3%B2ng-code-a14b801a59da