Câu hỏi: MMA301 - Chương 1: Giới thiệu React Native, kiến trúc Bridge và Native Module

Để hiểu quy trình hoạt động của React Native trong kiến trúc Bridge, chúng ta cần biết các bước cụ thể. Bước đầu tiên, main thread bắt đầu hoạt động và tải JavaScript. Sau đó, nếu JavaScript được tải thành công, main thread sẽ gửi nó đến một thread JavaScript khác. Tiếp theo, Shadow thread sẽ tính toán cấu trúc và gửi các tham số/ thuộc tính của cấu trúc đến main thread. Cuối cùng, main thread sẽ có thể render nội dung lên màn hình. Vì vậy, trình tự đúng của các bước này là: 1. Main thread tải JavaScript, 2. Shadow thread tính toán cấu trúc và gửi tham số đến main thread, 3. Main thread gửi JavaScript đến thread JavaScript khác, 4. Main thread có thể render nội dung lên màn hình, 5. Shadow thread gửi tham số cấu trúc đến main thread.

React Native sử dụng bộ công nghệ sau để xây dựng các ứng dụng gốc đa nền tảng: Bằng cách sử dụng JavaScript và thư viện React, React Native cho phép các nhà phát triển xây dựng giao diện người dùng và ứng dụng bằng cách sử dụng các thành phần và thư viện sẵn có. Điều này giúp giảm thiểu thời gian và công sức cần thiết để xây dựng ứng dụng trên nhiều nền tảng khác nhau. JavaScript và React là lựa chọn đúng đắn vì chúng cung cấp khả năng tương tác động và xây dựng giao diện người dùng phức tạp mà không cần phải viết mã riêng biệt cho từng nền tảng.

React Native khác React.js ở cách render các thành phần. Trong React.js, các thành phần được render bằng cách sử dụng DOM ảo (Virtual DOM), giúp tăng tốc độ render và giảm thiểu việc tương tác với DOM thực sự. Tuy nhiên, React Native lại sử dụng các thành phần bản địa (platform-specific native components) để render các thành phần. Điều này cho phép ứng dụng di động được xây dựng trên React Native có thể tận dụng được các tính năng và khả năng của hệ điều hành di động cụ thể. Ví dụ, trên Android, React Native có thể sử dụng các thành phần UI được cung cấp bởi Android SDK, trong khi trên iOS, nó có thể sử dụng các thành phần UI được cung cấp bởi iOS SDK. Điều này giúp tạo ra ứng dụng di động có hiệu suất cao và tương tác mượt mà.

Mô-đun Native trong React Native là một phần quan trọng của ứng dụng di động. Mục đích chính của nó là tương tác với các API và tính năng đặc trưng của từng nền tảng (ví dụ: iOS và Android). Điều này cho phép các nhà phát triển xây dựng ứng dụng có thể tận dụng được các tính năng và khả năng của từng nền tảng, từ đó tạo ra trải nghiệm người dùng tốt hơn. Ví dụ, một ứng dụng có thể sử dụng tính năng camera của điện thoại để chụp ảnh, hoặc sử dụng GPS để theo dõi vị trí của người dùng. Mô-đun Native giúp các nhà phát triển tương tác với các tính năng này một cách dễ dàng và hiệu quả.

Để xây dựng và chạy một ứng dụng React Native trên thiết bị Android hoặc máy ảo, bạn cần có một số công cụ đặc biệt. Trước hết, bạn cần cài đặt Android SDK và Android Virtual Device (AVD). Android SDK là bộ công cụ cần thiết để xây dựng và chạy ứng dụng Android, trong khi AVD là một phần mềm mô phỏng thiết bị Android để bạn có thể thử nghiệm ứng dụng của mình mà không cần phải có thiết bị thực tế. Ngoài ra, bạn cũng cần có một trình biên dịch như Gradle để xây dựng ứng dụng của mình. Vì vậy, đáp án đúng là Android SDK và Android Virtual Device (AVD).

Trong kiến trúc Bridge, luồng mà nơi thực thi mã natively được gọi là Native Thread. Điều này có nghĩa là mã natively được thực thi trên một luồng riêng biệt, độc lập với luồng JavaScript. Điều này cho phép mã natively được thực thi một cách hiệu quả và an toàn, mà không ảnh hưởng đến luồng JavaScript. Native Thread được sử dụng để thực thi mã natively, chẳng hạn như mã được viết bằng ngôn ngữ lập trình C hoặc C++, trong khi JavaScript Thread được sử dụng để thực thi mã JavaScript. Shadow Thread và ReactNative Thread không liên quan đến kiến trúc Bridge.

Trong kiến trúc Bridge, có bốn luồng chính trong kiến trúc React Native. Đó là luồng JavaScript, luồng Native, luồng Shadow và luồng Render. Tuy nhiên, luồng Render không phải là một trong những luồng chính trong kiến trúc Bridge. Luồng Render được sử dụng để thực hiện các tác vụ liên quan đến giao diện người dùng, trong khi các luồng khác được sử dụng để thực hiện các tác vụ khác nhau trong ứng dụng. Vì vậy, câu trả lời đúng là "Render Thread".

JSX (JavaScript XML) là một tính năng của React giúp bạn viết mã HTML và JavaScript cùng một lúc. Tuy nhiên, không phải tất cả các lợi ích của JSX đều đúng. Trong các lựa chọn trên, câu trả lời đúng là "It requires less memory consumption compared to traditional JavaScript syntax". Điều này là sai vì JSX thực sự đòi hỏi nhiều bộ nhớ hơn so với syntax JavaScript truyền thống. JSX được biên dịch thành JavaScript trước khi được chạy, điều này có thể dẫn đến việc sử dụng nhiều bộ nhớ hơn. Các lợi ích khác của JSX bao gồm việc giúp bạn viết mã nhanh hơn và dễ dàng hơn, cũng như giúp bạn bắt lỗi sớm hơn trong quá trình tích hợp.

Tính năng của React Native cho phép viết mã UI thay thế cho HTML và CSS được gọi là JSX. JSX là một phần mở rộng của JavaScript cho phép bạn viết mã HTML và CSS trực tiếp vào mã JavaScript. Điều này giúp bạn có thể viết mã UI một cách dễ dàng và hiệu quả hơn. Với JSX, bạn có thể viết mã HTML và CSS như một phần của mã JavaScript, và React Native sẽ tự động chuyển đổi nó thành mã thực thi được. Điều này giúp bạn có thể tập trung vào việc viết mã UI mà không cần phải lo lắng về việc viết mã HTML và CSS riêng biệt.

React Native là một công nghệ cho phép xây dựng các ứng dụng di động trên nhiều nền tảng khác nhau. Tuy nhiên, cũng như bất kỳ công nghệ nào, React Native cũng có một số rủi ro và hạn chế. Dưới đây là 3 rủi ro và hạn chế chính của React Native: Rủi ro thứ nhất là bảo mật (Low security). Vì React Native sử dụng JavaScript và các thư viện mở nên có thể xảy ra các lỗ hổng bảo mật nếu không được kiểm tra và bảo trì đúng cách. Rủi ro thứ hai là thời gian khởi động dài (Long initialization time). Điều này có thể xảy ra khi ứng dụng của bạn cần tải một lượng lớn dữ liệu hoặc thực hiện các tác vụ phức tạp khi khởi động. Rủi ro thứ ba là hạn chế truy cập vào các tính năng của thiết bị (Limited access to device features). Vì React Native sử dụng các thư viện và công nghệ khác nhau để truy cập vào các tính năng của thiết bị, nên có thể xảy ra các hạn chế trong việc truy cập vào một số tính năng nhất định. Tóm lại, mặc dù React Native là một công nghệ mạnh mẽ và linh hoạt, nhưng cũng có một số rủi ro và hạn chế cần được xem xét và giải quyết.

React Native không phải là một công nghệ mới và vẫn còn tồn tại một số hạn chế. Trong số các lựa chọn trên, có một điểm không phải là lợi thế của React Native. Đó là 'Enhanced performance and efficiency'. Thực tế, React Native có thể gặp khó khăn trong việc tối ưu hóa hiệu suất và hiệu suất so với các ứng dụng native. Điều này là do React Native sử dụng một lớp trung gian để chạy ứng dụng trên thiết bị di động, dẫn đến sự chậm trễ và tiêu tốn tài nguyên. Vì vậy, 'Enhanced performance and efficiency' không phải là một lợi thế của React Native.

HMR (Hot Module Replacement) là một tính năng của trình biên dịch Webpack, cho phép cập nhật mã nguồn JavaScript mà không cần phải reload trang web. Điều này giúp tiết kiệm thời gian và tăng hiệu suất phát triển. Khi sử dụng HMR, trình duyệt sẽ được cập nhật ngay lập tức khi có thay đổi trong mã nguồn JavaScript. Điều này giúp duy trì trạng thái ứng dụng và cho phép phát triển nhanh chóng. Ngoài ra, HMR chỉ cập nhật mã nguồn đã thay đổi, giúp tiết kiệm thời gian và tăng hiệu suất. Vì vậy, HMR không yêu cầu reload trang web toàn bộ sau mỗi lần thay đổi.

Trong kiến trúc Bridge, framework đa nền tảng xử lý nhiệm vụ này với sự giúp đỡ của động cơ bố cục do Facebook sở hữu được gọi là Yoga. Yoga là một động cơ bố cục linh hoạt, có thể thích nghi với nhiều loại màn hình và thiết bị khác nhau. Nó cho phép các nhà phát triển tạo ra các ứng dụng có thể chạy trên nhiều nền tảng khác nhau mà không cần phải viết mã riêng biệt cho từng nền tảng. Với Yoga, các nhà phát triển có thể tập trung vào việc xây dựng ứng dụng mà không phải lo lắng về việc làm cho nó chạy trên nhiều nền tảng khác nhau.

Trong kiến trúc Bridge, luồng Shadow Thread là nơi tính toán bố cục của ứng dụng. Điều này có nghĩa là khi bạn chạy ứng dụng, luồng Shadow Thread sẽ chịu trách nhiệm tính toán cách bố trí các thành phần của ứng dụng trên màn hình. Quá trình này bao gồm việc xác định vị trí, kích thước và sắp xếp các thành phần một cách hợp lý. Điều này giúp đảm bảo rằng ứng dụng của bạn có một bố cục đẹp mắt và dễ sử dụng. Ngoài ra, luồng Shadow Thread cũng chịu trách nhiệm cập nhật bố cục của ứng dụng khi có thay đổi, chẳng hạn như khi bạn thay đổi kích thước cửa sổ hoặc di chuyển ứng dụng sang một vị trí khác trên màn hình.

Khi tạo một mô-đun bản địa tùy chỉnh cho Android, có một số bước cần thực hiện để đảm bảo mô-đun hoạt động đúng cách. Đầu tiên, bạn cần tạo một lớp Java mở rộng ReactContextBaseJavaModule để định nghĩa các phương thức của mô-đun. Sau đó, bạn cần đăng ký mô-đun trong một lớp Package thực hiện ReactPackage để chỉ định nó được sử dụng trong ứng dụng. Cuối cùng, bạn cần thêm mô-đun vào file MainApplication.java để liên kết nó với ứng dụng. Tuy nhiên, bước không cần thiết là chỉnh sửa AndroidManifest.xml để khai báo mô-đun bản địa. Điều này là vì AndroidManifest.xml chỉ cần khai báo các thành phần Android cơ bản, còn các mô-đun bản địa được quản lý bởi React Native.

Bước tạo một mô-đun bản địa trong React Native cho iOS là một quá trình phức tạp. Tuy nhiên, bước quan trọng là cấu hình dự án Xcode để bao gồm tệp bridging header. Tệp này cho phép giao tiếp giữa mã Objective-C hoặc Swift và mã JavaScript trong ứng dụng React Native. Khi tạo một mô-đun bản địa, bạn cần tạo một tệp bridging header để ánh xạ các hàm và biến từ Objective-C hoặc Swift sang JavaScript. Điều này cho phép bạn sử dụng các hàm và biến này trong mã JavaScript của ứng dụng. Bước này là rất quan trọng vì nó cho phép giao tiếp giữa hai ngôn ngữ lập trình khác nhau.

Mô-đun Native trong ứng dụng React Native sử dụng useReducer có mục đích chính là để tương tác với các API và tính năng đặc trưng của nền tảng. Điều này cho phép ứng dụng truy cập vào các tính năng và chức năng đặc biệt của thiết bị di động, chẳng hạn như camera, GPS, v.v. Mô-đun Native cũng giúp ứng dụng tương tác với các hệ thống bên ngoài, chẳng hạn như mạng xã hội, email, v.v. Việc sử dụng mô-đun Native giúp ứng dụng trở nên linh hoạt và đa dạng hơn, đồng thời cũng giúp ứng dụng có thể tận dụng được các tính năng và chức năng đặc trưng của nền tảng.

React Native là một công cụ mở nguồn (open source) được thiết kế để xây dựng các ứng dụng di động cho cả iOS và Android. Nó cho phép các nhà phát triển xây dựng các ứng dụng di động sử dụng ngôn ngữ lập trình JavaScript và các thư viện của React. Điều này giúp giảm thiểu thời gian và công sức cần thiết để xây dựng các ứng dụng di động cho cả hai nền tảng. React Native sử dụng một số công nghệ như JSX, JavaScript và các thư viện của React để tạo ra các thành phần UI và logic ứng dụng. Nó cũng cung cấp một số tính năng như khả năng tương tác với các thư viện và dịch vụ của hệ điều hành, cũng như khả năng sử dụng các công nghệ khác như GPS, camera và mạng xã hội.

Trong kiến trúc Bridge, luồng JavaScript (JavaScript Thread) là nơi chứa toàn bộ mã JavaScript và được biên dịch. Đây là luồng chính nơi thực hiện các tác vụ liên quan đến JavaScript, bao gồm việc biên dịch, chạy và quản lý mã JavaScript. Luồng JavaScript đóng vai trò quan trọng trong việc đảm bảo hiệu suất và tính ổn định của ứng dụng web.

React Native có một số rủi ro và hạn chế. Đầu tiên, nó có thể gặp phải vấn đề về bảo mật (Low security). Điều này là do React Native sử dụng các thư viện và công nghệ mở, có thể chứa các lỗ hổng bảo mật. Thứ hai, thời gian khởi động (Long initialization time) của ứng dụng React Native có thể lâu hơn so với các ứng dụng native. Điều này là do ứng dụng React Native cần thời gian để tải và khởi động các thư viện và module cần thiết. Cuối cùng, React Native có thể gặp phải hạn chế về truy cập vào các tính năng của thiết bị (Limited access to device features). Điều này là do React Native sử dụng các thư viện và công nghệ mở, có thể không hỗ trợ tất cả các tính năng của thiết bị.