Mục lục
React Native được phát triển bởi Facebook trong khi Flutter được phát triển bởi Google – Hai sản phẩm đến từ các big company và cho đến thời điểm hiện tại chúng cũng đã tạo ra được tiếng vang lớn trong cộng đồng IT. Trong bài viết này, chúng ta sẽ cùng nhau đưa ra một số so sánh giữa React Native và Flutter để xem đâu là sự lựa chọn phù hợp cho mình.
Ngày nay các thiết bị di động trở nên rất phổ biến và được sử dụng bởi đại đa số người dân do đó nhu cầu phát triển các ứng dụng trên điện thoại di động của các công ty ngày một tăng. Và hơn thế nữa, các công ty đang tìm kiếm một lựa chọn thay thế phương thức phát triển truyền thống để xây dựng các ứng dụng di động, đặc biệt là cho iOS và Android, với tốc độ nhanh hơn và ít tài nguyên hơn. Rõ ràng, Apple và Google đã cung cấp các công cụ và công nghệ gốc để xây dựng ứng dụng. Các nhà phát triển ứng dụng iOS có thể tạo ứng dụng bằng Xcode và Swift, trong khi các nhà phát triển Android sử dụng Android Studio và Kotlin / Java. Tuy nhiên, điều này đòi hỏi các kỹ sư phải học hai bộ công nghệ hoàn toàn khác nhau. Do đó, các công ty đã bắt đầu áp dụng các giải pháp đa nền tảng thay vì các giải pháp truyền thống để xây dựng ứng dụng cho cả iOS và Android nhanh hơn bằng một ngôn ngữ duy nhất.
React Native và Flutter là gì?
React Native là một dự án được triển khai bởi Facebook và được open-source vào năm 2015. Trong khi Flutter được triển khai bởi Google và được quảng bá rộng rãi vào sự kiện I/O 2017. Cả hai công nghệ này đều giúp các lập trình viên xây dựng các ứng dụng đa nền tảng nhanh hơn bằng việc chỉ sử dụng duy nhất một ngôn ngữ. React Native đã là một công cụ hoàn thiện và đã gây dựng cho mình một cộng đồng to lớn. Trong khi Flutter ra đời sau nên cộng đồng của nó có chút kiêm tốn so với React Native. Trong bài viết này chúng ta sẽ cùng nhau so với 10 phía cạnh ở cả 2 nền tảng này để tìm ra ai là người thắng cuộc:
- Programming language
- Technical architecture
- Installation
- Setup and project configuration
- UI components and development API
- Developer productivity
- Community support
- Testing support
- Build & release automation support
- DevOps and CI/CD support
Programming Language
Lợi ích chính của việc sử dụng công nghệ phát triển ứng dụng di động đa nền tảng là khả năng sử dụng một ngôn ngữ lập trình duy nhất để phát triển ứng dụng cho cả iOS và Android.
React Native — JavaScript
React Native sử dụng JavaScript để xây dựng các ứng dụng đa nền tảng. JavaScript là một ngôn ngữ rất phổ biến trong cộng đồng web vào lúc này. Nó thường được sử dụng trong React và các framework JavaScript nổi tiếng khác. Nếu bạn là người đã có kinh nghiệm xây dựng các ứng dụng web đặc biệt là ReactJS, hay làm việc với JavaScript trong một thời gian thì việc làm quen với React Native sẽ rất dễ dàng.
Flutter — Dart
Flutter sử dụng ngôn ngữ lập trình Dart được Google giới thiệu vào năm 2011 và ít được phổ biến hơn JavaScript trong cộng đồng lập trình viên. Cú pháp của Dart dễ hiểu đối với các nhà phát triển JavaScript hoặc Java vì nó hỗ trợ hầu hết các khái niệm hướng đối tượng. Chúng ta thể dễ dàng tìm đọc tài liệu của Dart tại trang web chính thống.
Kết quả
Vì JavaScript là ngôn ngữ phổ biến, được sử dụng bởi hầu hết các web developer trên toàn thế giới nên mọi người có thể tiếp cận React Native một cách dễ dàng. Dart cũng là một ngôn ngữ tuyệt vời nhưng nó ít được biết đến hơn trong cộng đồng lập trình viên. Như vậy rõ ràng về mặt ngôn ngữ lập trình thì React Native đang chiếm ưu thế so với Flutter.
Technical Architecture
Khi chọn một công nghệ để phát triển ứng dụng đa nền tảng điều thiết yếu nhất là phải hiểu được kiến trúc của nó.
React Native — Flux
Kiến trúc React Native chủ yếu dựa vào kiến trúc Kiến trúc React Native chủ yếu dựa vào kiến trúc JS Runtime environment, được biết đến với tên gọi JavaScript bridge. Mã JavaScript được biên dịch thành native code tại runtime. React Native sử dụng kiến trúc Flux của Facebook. Trong phạm vi bài viết này chúng ta sẽ không tìm hiểu sâu về kiến trúc này. Tóm gọn lại React Native sử dụng JavaScript bridge để giao tiếp với các native module.
Flutter — Skia
Flutter sử dụng Dart framework chứa rất nhiều component được xây dựng sẵn nên nó thường không cân sử dụng các bridge để giao tiếp với các native module. Dart có rất nhiều framework, như Material Design và Cupertino được đóng gói cùng để cung cấp tất cả các công nghệ cần thiết để phát triển các ứng dụng mobile. Dart framework sử dụng Skia C++ engine chứa tất cả các protocol, compositions và channels. Kiến trúc của công cụ Flutter được giải thích chi tiết trong Github Wiki tại đây. Tóm lại, Flutter có mọi thứ cần thiết để phát triển ứng dụng trong chính công cụ Flutter.
Kết quả
Flutter engine có hầu hết các compoent trong nó và không phải lúc nào cũng cần một bridge để giao tiếp với các native component. Tuy nhiên, React Native sử dụng JavaScript bridge để giao tiếp với các native component, dẫn đến hiệu suất kém.
Installation
Phương pháp cài đặt phải đơn giản và không có quá nhiều bước phức tạp để các nhà phát triển mới bắt đầu làm quen với nó có thể dễ dàng học được.
React Native — NPM
Chúng ta có thể cài đặt React Native thông qua NPM, Đối với các nhà phát triển có nền tảng JavaScript, việc cài đặt React Native rất dễ dàng, trong khi các nhà phát triển khác sẽ cần học một chút về node package manager (NPM). Khi cài đặt React Native trên macOS, chúng ta cũng cần phải có trình quản lý gói HomeBrew, và tải React native dễ dàng thông qua các lệnh cmd
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" $ brew install node $ brew install watchman $ npm install -g react-native-cli
Flutter — Binary Download from Source
Flutter có thể được cài đặt bằng cách tải xuống tệp nhị phân cho một nền tảng cụ thể từ Github. Trong trường hợp của macOS, chúng tôi phải tải xuống tệp flutter.zip và thêm nó dưới dạng biến PATH.
$ curl -O https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v0.7.3-beta.zip $ unzip flutter_macos_v0.7.3-beta.zip export PATH=[PATH_TO_FLUTTER__DIRECTORY]/flutter/bin:$PATH
Flutter nên cải thiện phương pháp cài đặt bằng cách hỗ trợ các trình quản lý gói như Homebrew, MacPorts, YUM, APT, v.v. để người dùng không cần thực hiện các bước bổ sung này trong khi cài đặt.
Kết quả
Cả Flutter và React Native đều thiếu cài đặt một lớp với trình quản lý gói cho một hệ điều hành cụ thể, nhưng cài đặt Flutter dường như yêu cầu các bước bổ sung nhiều hơn trong khi React Native có thể được cài đặt chỉ bằng cách sử dụng NPM và không gặp rắc rối khi tải tệp nhị phân từ nguồn.
Setup and Project Configuration
Quá trình thiết lập môi trường khi sử dụng một framework mới sẽ tốn một chút thời gian. Nó yêu cầu rất nhiều các bước cài đặt và cấu hình. Vì vậy chúng ta cần phải làm theo các bước được chỉ định trong tài liệu được viết bởi chính nhà cung cấp.
React Native
React Native giả định rằng nhà phát triển đã có tất cả các thiết lập bắt buộc để phát triển cho iOS và Android. Cỏ rất ít tài liệu mô tả các bước cài đặt trên MacOS mà chuyển trực tiếp đến bước chỉ dẫn tạo một dự án mới với React Native. Một dự án React Native mới có thể được tạo và chạy trên trình mô phỏng iOS bằng các lệnh sau
$ react-native init MyProject $ cd MyProject $ react-native run-ios
Không có hướng dẫn thiết lập cho các dự án Android trong tài liệu React Native.
Flutter
Tài liệu hướng dẫn của Flutter mô tả các thông tin chi tiết về cách thiết lập IDE cho cả 2 nền tảng IOS và Android. Trên hết, Flutter có một công cụ CLI được gọi là flutter doctor có thể hướng dẫn các nhà phát triển cách thiết lập. Nó kiểm tra công cụ nào được cài đặt trên máy cục bộ và công cụ nào cần được cấu hình. Do đó chúng ta có thể dễ dàng kiểm tra quá trình cài đặt đang thiếu những gì và có thể tách nhỏ các bước cài đặt.
Sau khi hoàn tất quá trình cài đặt, chúng tacó thể tạo và chạy một ứng dụng Flutter mới từ CLI:
$ flutter create MyProject $ cd MyProject $ flutter run
Kết quả
Từ so sánh ở trên, rõ ràng là Flutter cung cấp tài liệu tốt hơn và hỗ trợ CLI để thiết lập và cấu hình.
UI Component and Development API
Khi phát triển một ứng dụng đa nền tảng, việc hỗ trợ các native component được xem là chìa khóa chính nếu không hỗ trợ các native component thì ứng dụng được tạo ra sẽ không đạt được trải nghiệm tốt như khi phát triển bằng các ngôn ngữ native như Swift và Java/Kotlin.
React Native — Less Components
Core React native chỉ là UI rendering và device access APIs. Để truy cập đa số các native module React Native phải dựa vào các thư viện bên thứ ba. Điều này khiến cho nó phụ thuộc rất nhiều vào những thư được bên thứ 3 cung cấp.
Flutter — Rich in Components
Khung Flutter được đóng gói với các UI rendering component, device API access, navigation, testing, stateful management và vô số thư viện. Do vậy, nó không cần thiết phải sử dụng nhiều third-party lib. Với Flutter bạn đã có hầu hết mọi thứ cần thiết để phát triển một ứng dụng mobile. Flutter cũng có các widget cho Material Design và Cupertino cho phép các nhà phát triển dễ dàng phát triển các giao diện trên cả nền tảng iOS và Android.
Kết quả
Flutter có nhiều API phát triển và các UI Component trong khi React Native phụ thuộc quá nhiều vào các thư viện của bên thứ ba.
Developer Productivity
Developer productivity là một chìa khóa quyết định tốc độ xây dựng một ứng dụng. Đây là một vấn đề ảnh hưởng lớn đến quyết định lựa chọn của các công ty để giảm thiểu chi phí tối đa.
React Native
Nếu đã có kiến thức về JavaScript thì khá dễ dàng để chúng ta bắt đầu và đi nhanh với React Native. React Native có tính năng hot-reload giúp tiết kiệm rất nhiều thời gian của nhà phát triển trong khi thử nghiệm các thay đổi trong giao diện người dùng. Về hỗ trợ IDE, các nhà phát triển có thể tự do sử dụng bất kỳ trình soạn thảo văn bản hoặc IDE nào mà họ lựa chọn.
Flutter
Flutter cũng có tính năng hot-reload và rất dễ dàng để bắt đầu với các ứng dụng demo nhỏ. Tuy nhiên, khi ứng dụng trở nên phức tạp hơn chúng ta cần phải tìm hiểu sâu vào các khái niệm của Flutter. Ngoài ra Dart cũng không phải là ngôn ngữ lập trình phổ biến nên số lượng IDE hỗ trợ cũng rất hạn chế.
Kết quả
Là một framework hoàn thiện, React Native hỗ trợ các developer cả về IDE lẫn các tính năng của ngôn ngữ. Flutter khá mới vào thời điểm này nhưng sẽ bắt kịp rất sớm khi cộng đồng Flutter phát triển.
Community Support
Một cộng đồng chia sẽ các kiến thức về một công nghệ sẽ giúp chúng ta giải đáp các thắc mắc và sửa nhanh các bug gặp phải trong quá trình phát triển. Vì thế, việc có một cộng đồng to lớn sẽ giúp chúng phát triển nhanh chóng hơn, cũng có thể giúp mọi người học hỏi nhanh hơn từ các kinh nghiệm của cộng đồng.
React Native – Community
React Native ra mắt vào năm 2015 và đã trở nên phổ biến kể từ đó. Có một cộng đồng các nhà phát triển React Native trên GitHub và rất nhiều cuộc gặp gỡ và hội nghị trên khắp thế giới. Một trong những hội nghị gần đây nhất về React Native là React Native EU được tổ chức tại Ba Lan, nhưng có những cuộc gặp gỡ diễn ra ở hầu hết các thành phố lớn trên thế giới.
Flutter – Community
Flutter đã xuất hiện được một thời gian nhưng nó đã thu hút được nhiều sự chú ý khi Google quảng bá nó trong hội nghị Google I / O vào năm 2017. Hiện nay, cộng đồng Flutter đang phát triển nhanh chóng, các buổi gặp mặt và hội nghị đang diễn ra trực tuyến. Nói tóm lại, cộng đồng Flutter đang phát triển nhanh chóng; Tuy nhiên, vẫn chưa có đủ nguồn lực để các nhà phát triển giải quyết các vấn đề chung.
Kết quả
Cộng đồng và nguồn tài nguyên React Native đã phát triển về quy mô kể từ khi nó được giới thiệu. Flutter vẫn còn khá mới, mặc dù sự hỗ trợ của cộng đồng đang tăng lên nhanh chóng.
Testing Support
Việc kiểm thử ứng dụng trong quá trình phát triển giúp đảm bảo tiến độ và giảm thiểu khả năng xảy ra sai xót của ứng dụng. Việc cung cấp một tesing framework hỗ trợ unit-test, intergration test và UI test là một phần không thể thiếu được hoàn thiện một framework.
React Native – Testing
React Native là một JavaScript framework do vậy nó đã có sẵn một số testing framework trong JavaScript. Các công cụ như Jest có thể sử dụng để triển khai snapshot testing. Tuy nhiên đối mặt với intergration test hoặc UI testing thì vẫn chưa có có sự hỗ trợ chính thức từ React Native. Có các công cụ của bên thứ ba như Appium và Detox có thể được sử dụng để thử nghiệm các ứng dụng React Native nhưng chúng không phải là một công cụ được hỗ trợ chính thức.
Flutter – Testing
Flutter cung cấp một danh sách các tính năng dùng để triển khai unit-test, widget và intergration test. Flutter có tài liệu tuyệt vời về kiểm tra ứng dụng Flutter tại đây, bạn cũng có thể đọc blog Nevercode để biết thông tin chi tiết về cách kiểm tra ứng dụng Flutter. Flutter có một tính năng kiểm tra widget rất thú vị, nơi chúng ta có thể tạo các bài kiểm tra widget để kiểm tra giao diện người dùng.
Build & Release Automation Support
Phát hành ứng dụng di động lên App Store hoặc Play Store là một quá trình khó khăn, gồm nhiều bước phức tạp để vượt qua các yêu cầu của họ. Thậm chi đối với các ứng dụng đa nền tảng nó còn khó khăn hơn.
React Native
Tài liệu chính thức của React Native không có bất kỳ hướng dẫn cụ thể nào để triển khai ứng dụng iOS lên App Store. Tuy nhiên, nó cung cấp quy trình thủ công để triển khai ứng dụng từ Xcode. Có một bài viết về cách triển khai ứng dụng React Native lên App Store ở đây nhưng toàn bộ quy trình này đa số là thủ công. Tuy nhiên, chúng ta có thể sử dụng các công cụ của bên thứ ba như fastlane để triển khai các ứng dụng iOS và Android được viết bằng React Native. Quá trình sử dụng fastlane để gửi các ứng dụng React Native được mô tả trong bài viết này.
Flutter
Flutter có một bộ lệnh CMD mạnh mẽ, chúng ta có thể tạo ra các tập binary bằng cách sử dụng command tool thông qua Flutter document để tạo ra các file cài đặt cho IOS và Android. Trên hết, Flutter đã chính thức ghi lại quá trình triển khai với fastlane tại đây.
Kết quả
Flutter có một công cụ tự động hóa giúp chúng ta có thể tạo ra các file cài đặt cũng như triển khai ứng dụng lên Store cách nhanh chóng. Ứng dụng React Native thiếu hỗ trợ cho các công cụ CLI được hỗ trợ chính thức để tự động hóa xây dựng.
DevOps and CI/CD Support
CI/CD là một phần cần thiết cho bất kỳ một ứng dụng nào giúp đơn hóa quá trình triển khai ứng dụng.
React Native
React Native không có bất kỳ tài liệu chính thức nào về việc thiết lập CI / CD. Tuy nhiên, có một số bài báo mô tả CI / CD cho ứng dụng React Native. Có một bài viết giải thích quá trình thiết lập CI / CD cho các ứng dụng React Native với Nevercode.
Flutter
Flutter có một phần riêng nói về continuous-integration-and-testing và bộ công cụ cmd cho phép chúng ta thiết lập CI/CD cách dễ dàng hơn. Nevercode cũng đã hỗ trợ sẵn cho CI / CD cho các ứng dụng Flutter.
Kết quả
Chúng ta có thể thấy rằng việc thiết lập CI/CD cho ứng dụng Flutter dễ dàng hơn với một CMD mạnh mẽ và một phần tài liệu được viết kỹ càng chính thống từ Flutter. Do vậy Flutter chiến thắng trong phần này.
Kết luận
Có vẽ như sản phẩm từ nhà Google đang chiếm ưu tế trong cuộc đua các công nghệ phát triển ứng dụng đa nền tảng. Mặc dù ra đời sau, thế nhưng Flutter đã khẳng định được vị trí và các thế mạnh của mình. Do đó, Flutter có thể là lựa chọn tốt hơn đối với những người mới bắt đầu chuyển sang phát triển ứng dụng đa nền tảng. Tuy nhiên với bản thân mình là một developer đã có kinh nghiệp làm JavaScript và sử dụng ReactJS nên khi chuyển sang React Native rất nhanh vì các khái niệm cơ bản của ReactJS và React Native hầu như giống nhau, biết đâu trong tương lai React Native sẽ được nhà Facebook phát triển nó lên tầm cao mới để có thể quay lại cuộc đua với Flutter.
Nguồn
https://nevercode.io/blog/flutter-vs-react-native-a-developers-perspective/