Trong thời gian gần đây, React-Native đã trở thành một trong những nền tảng thịnh hành để phát triển ứng dụng di động. Tuy nhiên, điều này khiến tò mò muốn biết về kiến ​​trúc mà React-Native sử dụng. Hiện tại, kiến ​​trúc Fabrics là hệ thống kết xuất mới nhất được react-native sử dụng.

Fabric là gì?

Fabric hướng đến việc xây dựng lại lớp kết xuất của react-native. Trong khả năng tương tác hiện tại, tất cả các hoạt động UI được xử lý bằng một chuỗi các bước cross-bridge. Tuy nhiên, triển khai mới cho phép trình quản lý UI tạo cây bóng trực tiếp trong C++, giúp tăng đáng kể tốc độ của quy trình bằng cách giảm số lần nhảy qua các vùng. Về cơ bản, điều này cải thiện đáng kể khả năng phản hồi của Giao diện người dùng. Nói cách khác, đây là tối ưu hóa kết xuất cho màn hình, về cơ bản, nó cải thiện hiệu suất đáng kể.

Ngoài ra, bằng cách sử dụng JSI, Fabric sẽ đưa các hoạt động UI vào JavaScript như các chức năng: Shadow Tree mới (xác định nội dung thực sự hiển thị trên màn hình) được chia sẻ giữa hai miền, cho phép tương tác trực tiếp từ cả hai đầu.

Và, nếu điều đó chưa phải là một cải tiến lớn, thì việc kiểm soát trực tiếp này từ phía JavaScript cho phép có hàng đợi ưu tiên từ React mới cho các hoạt động UI, để có các thực thi đồng bộ tùy chọn khi nó có lợi cho hiệu suất. Nền tảng này sẽ cho phép cải thiện các lỗi phổ biến như danh sách, điều hướng và xử lý cử chỉ .

Cấu trúc kiến ​​trúc hiện tại

Có bốn phần cốt lõi trong kiến ​​trúc cũ: mã React do nhà phát triển viết (rất giống với mã trên web), JavaScript được diễn giải từ những gì bạn viết, một loạt các phần tử được gọi chung là “The Bridge” và phần Native.

Điểm mấu chốt của kiến ​​trúc hiện tại là hai miền, JavaScript và Native, không thực sự “nhận thức” được nhau. Điều này có nghĩa là để giao tiếp, chúng dựa vào các thông điệp JSON không đồng bộ được truyền qua The Bridge. Những thông điệp này được gửi đến mã gốc với kỳ vọng (nhưng không đảm bảo) rằng chúng sẽ tạo ra (có thể nhận được) phản hồi vào một thời điểm nào đó trong tương lai.

Cấu trúc kiến ​​trúc mới

1. JSI:- Nó sẽ thay thế cầu nối từ kiến ​​trúc hiện tại. Trên thực tế, JSI cung cấp API cho JS Runtime engine (nơi mã js được thực thi khi bạn chạy nó) và làm cho JS nhận biết các hàm và đối tượng gốc trực tiếp, mà không cần bất kỳ cầu nối nào. Nó có lợi cho chúng ta bằng cách đồng bộ hóa các lệnh gọi từ luồng JS sang luồng Native và ngược lại. Hiển thị nhanh bằng cách sử dụng lệnh gọi trực tiếp đến luồng chính UI và cũng chia sẻ dữ liệu giữa các luồng.
2. Fabric:- tên mới cho UIManager sẽ chịu trách nhiệm cho phía gốc. Sự khác biệt lớn nhất hiện nay là thay vì giao tiếp với phía JS bằng bridge, nó sẽ phơi bày hàm gốc của mình bằng JSI để phía JS và ngược lại có thể giao tiếp trực tiếp thông qua các hàm tham chiếu. Hiệu suất tốt hơn và hiệu quả hơn cũng như truyền dữ liệu giữa các phía.
3. Turbo Module:- Mục đích của Turbo module giống như native module trong kiến ​​trúc hiện tại nhưng được triển khai và hoạt động khác nhau. Lúc đầu, chúng được tải chậm , nghĩa là chỉ tải khi ứng dụng cần chúng thay vì tải tất cả chúng vào thời điểm khởi chạy. Ngoài ra, chúng cũng được phơi bày bằng JSI để JS giữ một tham chiếu để sử dụng chúng ở phía thư viện React Native JS, mang lại hiệu suất tốt hơn, đặc biệt là vào thời điểm khởi chạy.
4. CodeGen: – Được sử dụng để biến JS thành nguồn dữ liệu đáng tin cậy duy nhất giúp chúng ta tạo các kiểu tĩnh của JS để phía gốc (mô-đun Fabric và Turbo) có thể nhận biết chúng và tránh xác thực dữ liệu mỗi lần, giúp giảm thiểu thời gian sử dụng, cải thiện hiệu suất và giảm khả năng xảy ra lỗi khi truyền dữ liệu.

Dòng chảy của kiến ​​trúc mới:

1. Người dùng nhấp vào biểu tượng ứng dụng.
2. Fabric tải trực tiếp phần gốc (không có mô-đun gốc).
3. Nó thông báo cho luồng JS rằng nó đã sẵn sàng và bây giờ phía JS sẽ tải tất cả main.bundle.js chứa tất cả logic js và react + các thành phần.
4. JS được gọi thông qua hàm gốc ref (hàm được hiển thị dưới dạng đối tượng bằng cách sử dụng JSI API) tới Fabric và nút bóng tạo cây như trước.
5. Yoga thực hiện tính toán bố cục bằng cách chuyển đổi từ kiểu dựa trên flexbox sang bố cục lưu trữ.
6. Fabric thực hiện chức năng của nó và hiển thị giao diện người dùng (UI).

Nó được sử dụng ở đâu?

react-native-screens với Fabric:

Đã có một triển khai được thực hiện trong react-native-screens với cả kiến ​​trúc mới và cũ. Để tạo ứng dụng fabric đầu tiên của bạn với react-native-screens, bạn cần làm theo các bước sau:

1. Tạo ứng dụng mới bằng React Native CLI:npx react-native init NewRN68App --version 0.68.0-rc.1
2. Thêm react-native-screens theo cách tương tự như bình thường:yarn add react-native-screens
3. Bây giờ, để kích hoạt Fabric trên iOS, bạn cần chạy RCT_NEW_ARCH_ENABLED=1 pod installtrong iosthư mục.
4. Đối với Android, bạn cần phải thay đổi newArchEnabled=truetrongandroid/gradle.properties
5. Bây giờ bạn có thể tiến hành xây dựng ứng dụng như bình thường trên cả Android và iOS. Phiên bản màn hình đã cài đặt sẽ tự động phát hiện Fabric có được bật hay không và sẽ cung cấp triển khai phù hợp.

Tổng quan về quá trình di cư

Mọi giao tiếp đã được thực hiện giữa các thành phần gốc và JS đều được thực hiện thông qua JSI (một API C++ để giao tiếp với mã Objective C trên iOS và mã Java trên Android). Thông tin từ bên này sang bên kia được di chuyển bằng các hàm C++ thay vì được tuần tự hóa/hủy tuần tự hóa (chuyển đổi một đối tượng thành chuỗi hoặc ngược lại) để được truyền qua cầu. Do đó, các thư viện có ý định hỗ trợ kiến ​​trúc mới cần phải thích ứng với giao diện mới này. Sử dụng JSI tương đối đơn giản nếu bạn đang xây dựng một thư viện hoàn toàn mới trong khi triển khai nó trong thư viện hiện có có thể là một thách thức. Ở đây, muốn có thể hỗ trợ cả phiên bản fabric và phiên bản hiện có với lượng mã được chia sẻ tối thiểu giữa hai triển khai này.

Các bước chính trong quá trình di chuyển thư viện hiện có được đề cập dưới đây:

• Viết các thông số kỹ thuật thành phần trong Flow bằng cách thực hiện một phương ngữ (một biến thể của ngôn ngữ) của JS. Mã này sẽ là gốc của ứng dụng. Nó cung cấp cho chúng ta thông số kỹ thuật được sử dụng ở cả phía gốc và phía JS. Mã này cũng được sử dụng để tạo ra triển khai gốc nhằm đảm bảo an toàn cho kiểu.
• Ở bước tiếp theo, mình đã thêm các triển khai ở phía gốc có thể xử lý các prop và sự kiện. Trên Android, cơ sở mã được chia sẻ giữa kiến ​​trúc cũ và mới. Trên iOS, các tệp mới được tạo để làm cho cả hai triển khai trở nên độc lập.
• Để duy trì hoạt động của cả hai kiến ​​trúc trong thư viện, chúng ta có một số tệp/lớp dành riêng cho một kiến ​​trúc nhất định.

Phần kết luận

Tóm lại, việc ra mắt kiến ​​trúc mới chắc chắn sẽ đưa React-Native tiến lên phía trước. Trải nghiệm người dùng chắc chắn sẽ trở nên mượt mà hơn và việc phát hành phiên bản tương thích với fabric của react-native-screens là một bước đột phá để thích ứng với kiến ​​trúc React-Native mới. Mình hy vọng bài viết này giúp bạn biết về những thay đổi lớn mà cộng đồng đã mang lại cho kiến ​​trúc của họ.