React Native Có Đủ Tốt Để Thay Thế Cho Ionic Trong Phát Triển Ứng Dụng Di Động Đa Nền Tảng?

Bài viết được đăng đầu tiên trên Potato Tech Mash nên giọng văn nhiều chỗ cũng hơi bị trang trọng . Trong bài viết, có nhiều nhận định chủ quan của mình trong quá trình làm việc thực tế với Ionic và React Native nên sẽ không có số liệu, dẫn chứng rõ ràng.

Cross-platform mobile development là giải pháp phát triển ứng dụng di động tương thích với nhiều nền tảng hệ điều hành di động khác nhau. Hiểu đơn giản là cùng với một mã nguồn duy nhất, ta có thể tạo ra các ứng dụng di động cho hệ điều hành Android, iOS,Windows Phone,…

Do hiệu quả về mặt kinh tế trong việc phát triển và vận hành ứng dụng, giải pháp phát triển ứng dụng di động đa nền tảng là một giải pháp đáng cân nhắc cho doanh nghiệp so với việc phát triển ứng dụng độc lập cho từng hệ điều hành.

Cuộc đua trong giải pháp phát triển ứng dụng di động đa nền tảng đã bắt đầu từ rất lâu với Sencha, Ionic dựa trên nền tảng Cordova của Adobe, Xamarin của Microsoft và đặc biệt là React Native của Facebook.

Theo mình, Xamarin được thiết kế để dành cho Backend Developer muốn nhảy sang làm mobile với ngôn ngữ lập trình C#. Còn Ionic và React Native được thiết kế để Frontend Developer làm  luôn "fullstack" mobile.

3 gương mặt framework tiêu biểu cho phát triển ứng dụng di động đa nền tảng

React Native trở thành mã nguồn mở trễ nhất nhưng đã và đang thu hút được rất nhiều sự chú ý của giới lập trình viên trong vài hai năm trở lại đây:

2. React Native

React Native là gì?

React Native được phát triển bởi Facebook với mục đính ban đầu là áp dụng vào mạng xã hội lớn nhất hành tinh: Facebook.

Do đặc tính công nghệ của mạng xã hội, Facebook cần phải tạo ra nền tảng phát triển ứng dụng di động đa nền tảng có hiệu năng không thua kém so với ứng dụng được phát triển độc lập cho từng nền tảng.

React Native hiện tại chỉ hỗ trợ phát triển ứng dụng di động hệ điều hành Android và iOS, ít hơn so với Ionic (Android, iOS, Windows Phone).

React Native chính thức trở thành mã nguồn mở vào tháng 3 năm 2015. Cho đến nay, React Native được áp dụng trong nhiều ứng dụng của “tây” lẫn “ta”:

Mạng xã hội Facebook, Instagram, Công cụ tìm kiếm Baidu và Thương mại điện tử Tiki

React Native có gì hay?

React Native tạo ra ứng dụng native

Điểm khác biệt đầu tiên đó là React Native tạo ra native app chứ không phải hybrid app như Ionic.

Bằng việc tạo ra native app, React Native tạo ra ứng dụng với 100% Native UI. Nếu như Ionic sử dụng Web View để tạo giao diện ứng dụng, thì React Native có thể sử dụng tất cả các View của thiết bị động như Map View, List View,…

 

Với 100% Native UI, React Native tạo nên sự “mượt mà” trong việc render UI và xóa nhòa khoảng cách về hiệu năng giữa ứng dụng đa nền tảng so với ứng dụng độc lập nền tảng.

“Viết một lần, chạy nhiều nơi”

Một ứng dụng hybrid tất nhiên sẽ chạy được đa nền tảng cho dù được biên dịch từ một mã nguồn duy nhất, và đó là cũng chính là những gì mà Ionic có đang làm.

Tuy nhiên, mục tiêu ban đầu của React Native không phải là “Viết một lần, chạy nhiều nơi” mà là “Học một, viết nhiều thứ”, có nghĩa là chỉ cần học Javascript để phát triển ứng dụng cho cả Android lẫn iOS, thay vì phải học Java, Kotlin cho Android và Objective-C,  Swift cho iOS.

Do ý tưởng ban đầu không phải “Viết một lần, chạy nhiều nơi”  nên React Native muốn các developer sử dụng các thành phần tốt nhất theo từng hành vi mỗi nền tảng hệ điều hành. Chẳng hạn, React Native chỉ hỗ trợ Drawer Layout trên Android còn iOS thì không.

Tuy nhiên, “Học một, viết nhiều thứ” chỉ là chuyện của quá khứ của React Native bởi sau 2 năm sau khi open source, cộng đồng lập trình viên đã tạo nên hàng triệu các component khác nhau hỗ trợ cả 2 nền tảng Android lẫn iOS.

Việc có hàng triệu thư viện là một trong những lợi thế của React Native so với Ionic: ta có thể dễ dàng lựa chọn để phát triển ứng dụng một cách nhanh chóng, thay vì phải phụ thuộc vào số ít các plugin như Ionic.

React Native – cách tiếp cận như “native”

Khác với Ionic, React Native sử dụng các native UI, do đó cách phát triển ứng dụng bằng React Native sẽ hoàn toàn giống với việc phát triển ứng dụng “đơn” nền tảng.

Sử dụng HTML,CSS để phát triển giao diện. Chỉ sử dụng Javascript để phát triển giao diện. Do đó, hoàn toàn của thể debug quá trình render UI.
Sử dụng trình duyệt web để phát triển ứng dụng: “tá hóa” khi giao diện trên trình duyệt “ngon lành” nhưng lại lỗi trên thiết bị thật. Sử dụng máy ảo để phát triển ứng dụng: phát hiện sớm các vấn đề về giao diện đa nền tảng.
Sử dụng các cordova plugin để cấu hình. Sử dụng XCode, Android Studio để cấu hình.
Dễ dàng tùy chỉnh giao diện của thư viện bằng cách ghi đè CSS nhưng một khi đã bị ghi đè rất khó kiểm soát được CSS.  

Nếu thư viện không hỗ trợ thì phải chỉnh sửa code trong thư viện để thay đổi giao diện.

React Native – “trải nghiệm dev” tuyệt vời

Trong việc phát triển ứng dụng di động, vòng lặp thường xuyên mà developer phải là: chỉnh sửa code, biên dịch và kiểm thử trên máy ảo. Đối với các ứng dụng lớn như thương mại điện tử Tiki, nhiều khi phải mất gần 120 giây cho vòng lặp trên nếu phát triển ứng dụng “đơn” nền tảng theo cách thông thường.

Tuy nhiên React Native đã làm quá tốt trong việc nâng cao “trải nghiệm dev”. Thay vì biên dịch toàn bộ ứng dụng, React Native sử dụng NodeJS server để cập nhật những thay đổi cho ứng dụng trên máy ảo.

Quá trình biên dịch của React Native bao gồm các bước:

  • Biên dịch JSX sang Javascript.
  • Load javascript vào JavascriptCore.
  • Render các native component để tạo giao diện.
Quá trình biên dịch của React Native

Ngoài tối ưu hóa thời gian biên dịch code, React Native còn cung cấp 2 cách để nâng cao “trải nghiệp dev” đó là Live reloading và Hot reloading:

  • Live reloading: tự động reload ứng dụng khi code thay đổi.
  • Hot reloading: Ý tưởng của hot reloading là giữ cho ứng dụng vẫn chạy nhưng thay thế các phiên bản mới của code mà bạn đã chỉnh sửa. Bằng cách này, bạn không phải biên tải ứng dụng, do đó sẽ không bị mất trạng thái hiện tại của ứng dụng. Hot reloading đặc biệt hữu ích nếu bạn tinh chỉnh UI.

Tối ưu thời gian khởi động ứng dụng

Đối với phiên bản Ionic v3 hiện tại (vẫn là Ionic 2 nhưng thay đổi về thư viện), thời gian khởi động ứng dụng tốn rất nhiều thời gian, trung bình mất khoảng 15 giây cho việc khởi động ứng dụng trên các thiết bị Android. Khoảng thời gian khởi động này tương đối lớn có thể khiến người dùng mất kiên nhẫn ngay lần đầu tiên mở ứng dụng.

Đối với React Native, thời gian khởi động ứng dụng nhanh như ứng dụng “đơn” nền tảng.

Vậy có nên dùng React Native thay cho Ionic?

React Native và Ionic đều là những framework được thiết kế dành cho các Front-end Web Developer. React Native sử dụng ReactJS, trong khi đó Ionic sử dụng HTML, CSS và AngularJS. Do đó, nếu bạn có một team làm ứng dụng web và khách hàng muốn phát triển thêm ứng dụng di động thì bạn có thể “tận dụng” luôn team web để phát triển ứng dụng di động.

Nhìn chung, ReactJS tương đối khó hơn AngularJS do tính ràng buộc chặt chẽ: bạn bắt buộc phải viết thành từng thành phần nhỏ độc lập (component) trong khi đó AngularJS bạn có thể viết hoặc không (AngularJS có directive gần giống như component của ReactJS).

Do đó, Ionic thích hợp cho các ứng dụng cần phát triển trong thời gian ngắn. Trong khi đó, React Native tạo nên kiến trúc ứng dụng có tổ chức chặt chẽ và có thể tái sử dụng các thành phần, thích hợp cho các ứng dụng có quy mô lớn và đòi hỏi bổ sung tính năng thường xuyên.

React Native – make cross-platform mobile apps great again ( © image from thefullsnack.com )