3.1.1. Khái niệm về React Native
React là một thư viện JavaScript phổ biến hiện nay để xây dựng giao diện người dùng (UI). Thư viện này cho tốc độ phản hồi tuyệt vời khi người dùng nhập liệu bằng cách sử dụng phương pháp mới để render trang web.
React Native là một framework được tạo bởi Facebook, cho phép các lập trình viên có thể xây dựng các ứng dụng di động trên cả hệ điều hành Android và iOS chỉ với một ngơn ngữ lập trình duy nhất: JavaScript. Đây là một trong những framework sử dụng cấu hình thiết kế tương tự như React.
Hầu hết các giao diện và chức năng của nó đều được cấu thành từ rất nhiều thành phần con. React Native được sử dụng để phát triển cho rất nhiều các ứng dụng di động khác như: Android, iOS, Web.
Sự ra đời của React Native là lời giải cho bài toán liên quan đến hiệu năng Hybrid và sự phức tạp khi phải viết nhiều loại ngôn ngữ native cho từng nền tảng di động trước đó.
Phiên bản đầu tiên được Facebook cơng bố lần đầu tiên vào tháng 3 năm 2016 là 0.5. Sau đó, React Native dần được phát triển thường xuyên với các bản như: bản 0.61.5 được phát hành vào tháng 11 năm 2019. [8] Hiện nay, Facebook đã cho biết là sẽ cho ra đời phiên bản mới nhất là 0.64 trong thời gian sắp tới.
3.1.2. Cách thức hoạt động của React Native
Trong React, Virtual DOM hoạt động như một layer giữa mô tả về cách hiển thị mọi thứ và công việc được thực hiện để hiển thị trên page. Để hiển thị UI trên browser, developer phải sửa DOM (Document Object Model) của browser. Đây là cách tiêu tốn hiệu năng vì viết lại DOM nhiều lần sẽ tác động đáng kể đến hiệu năng. Thay vì thay đổi trực tiếp trên trang React tính tốn những thay đổi cần thiết bằng cách sử dụng một phiên bản bộ nhớ của DOM hay nói cách khác là một bản sao của DOM và hiển thị lại những thay đổi cần thiết. Dưới đây là hình ảnh mơ tả cho hoạt động của React. [8]
Hình 3.4. Cách thức hoạt động của React
Hình 3.2 mơ tả cách mà React Native hoạt động. Thay vì phải render DOM của trình duyệt, React Native gọi Objective-C API để hiển thị lên iOS component, hoặc Java API để hiển thị Android component.
Hình 3.5. Cách thức hoạt động của React Native
Bridge là cầu nối giữa các React Component với native UI element tương ứng ví dụ như View có thể là iOS UIView. Hiện tại React Native hỗ trợ cho Android và iOS. React Native cũng có thể nhắm đến nhiều nền tảng khác. "Nền tảng hướng đến là gì khơng quan trọng, quan trọng là cần bridge" [8]
Khi React chạy trong trình duyệt, vịng đời bắt đầu khi mounting các React Component. Sau đó React xử lý việc rendering và rerendering các component nào
cần thiết. Đối với trạng thái render, trả về HTML markup từ phương thức render của React component mà React sau đó hiển thị trực tiếp vào page khi cần thiết.
Với React Native thì vịng đời cũng tương tự, nhưng quá trình render hơi khác một chút vì React Native phụ thuộc vào bridge. Bridge biên dịch các mã JS và gọi platform của host, các API và các UI elements. Vì React Native khơng chạy trên main thread, và do nó có thể chạy bất đồng bộ nên nó khơng ảnh hưởng đến trải nghiệm của người dùng. [8]
Như vậy React Native hoạt động chủ yếu nhờ vào sự tích hợp của 2 thread là Main Thread và JS Thread cho các ứng dụng mobile.
• Main Thread sẽ đảm nhận các vai trò trong việc cập nhật các giao diện người dùng (UI), rồi xử lý các tương tác của người dùng.
• JS Thread có nhiệm vụ thực thi và tiến hành xử lý code Javascript.
Đây là 2 luồng hoạt động hồn tồn đối lập nhau trong React. Chính vì vậy, để hai thread có thể tương tác được với nhau thì nó sẽ sử dụng một cầu nối Bridge. Chúng sẽ cho phép chúng có thể giao tiếp mà khơng q phụ thuộc vào nhau cũng như các chuyển đổi từ thread này sang thread khác. Các dữ liệu từ hai thread này đều sẽ được vận hành ngay khi tiếp nối các dữ liệu cho nhau.
3.1.3. Một số khái niệm liên quan
Native App: Ứng dụng di động gốc là ứng dụng được tạo ra chỉ để sử dụng
trong một nền tảng hoặc thiết bị cụ thể, như Android, iOS, BlackBerry hoặc Windows.
Ứng dụng gốc được tạo và code đặc thù cho một nền tảng cụ thể bằng ngơn ngữ lập trình gốc của nó:
• iOS (Objective-C or Swift)
• Android (Java, Kotlin)
• Windows Phone (C#)
Có những ngun tắc khác nhau cho mỗi nền tảng và lập trình viên cần phải nắm bắt chúng vì chúng khác nhau về kiểu chữ, kiểu đồ họa, hoạt cảnh, hiệu ứng hình ảnh, đầu vào dữ liệu, v.v.
Hybrid App: Một ứng dụng hybrid được tạo dưới dạng một ứng dụng duy
nhất để sử dụng trên nhiều nền tảng như Android, iPhone và Windows.
Ứng dụng hybrid thực tế là ứng dụng native và ứng dụng web được kết hợp với nhau. Nó là một sản phẩm hoạt động trên nhiều hệ điều hành như iOS, Android, Windows. Ứng dụng này sẽ giống như một ứng dụng native nhưng thực sự được chạy trên nền tảng website. Chúng được tạo ra bằng HTML5, CSS và JavaScript, về cơ bản là một chương trình dựa trên web được gói trong một lớp vỏ là ứng dụng native và được kết nối với phần cứng thiết bị.
Components: Components là một khái niệm cơ bản của cả React và React (adsbygoogle = window.adsbygoogle || []).push({});
native. Chính việc chia nhỏ ứng dụng thành các components nhỏ đã tạo nên khả năng tái sử dụng cao và khả năng mở rộng của chúng. Mọi view, screen đều được kế thừa từ lớp component này.
State: là biến điều khiển trạng thái nội bộ của một component. State có thể
thay đổi bằng cách gọi hàm this.setState({...}). Mỗi lần thay đổi state hàm render sẽ được gọi lại ngay sau đó.
Props: là các thuộc tính được thành phần sử dụng truyền vào. Đây là các
thông số được truyền vào để tùy chỉnh theo ý muốn của người xây dựng component. Khác với state thì khơng được thay đổi props ở trong chính nó. Chúng ta chỉ nên đọc các thuộc tính được truyền vào để sử dụng.
View: Là một component cũng thường xuyên được sử dụng. Thường được
sử dụng với mục đích chia các view con theo hàng dọc hoặc hàng ngang dựa vào thuộc tính flexDirection trong style là 'column/row' hoặc sử dụng để chứa nhiều view con hoặc khi cần in ra màn hình một view khơng hiển thị gì hết.
3.1.4. Ưu và nhược điểm React Native
React native có một số ưu điểm như sau:
• Có thể tái sử dụng code: React Native cho phép các lập trình viên có thể tái sử dụng mã nguồn trong khi phát triển các ứng dụng đa nền tảng. Đặc biệt, lập trình viên có thể tái sử dụng hầu như các đoạn code
thay vì phải viết và tạo các ứng dụng riêng biệt cho các nền tảng khác nhau.
Ưu điểm này giúp người dùng:
Tiết kiệm thời gian và giảm chi phí phát triển của một ứng dụng.
Tận dụng nguồn nhân lực tốt hơn. Duy trì ít mã nguồn hơn, ít lỗi hơn.
Các tính năng trong cả 2 nền tảng cũng tương tự nhau.
• Cộng đồng người dùng lớn: React Native được đánh giá là một trong những Framework được yêu thích nhất. Khi gặp một lỗi bất kỳ thì cũng có thể dễ dàng tìm ra các câu trả lời hỗ trợ sửa lỗi trên internet.
• Tính ổn định và tối ưu: Được phát triển bởi Facebook, React Native có hiệu năng ổn định khá cao.
Mã nguồn React Native giúp đơn giản hóa q trình xử lý dữ liệu.
Trải nghiệm người dùng tốt hơn khi so sánh với ứng dụng Hybrid.
Không cần quá nhiều nhân lực cho một dự án.
Xây dựng ứng dụng ít native code nhất cho nhiều hệ điều hành khác nhau.
React native có một số nhược điểm như sau:
• u cầu Native code.
• Hiệu năng kém hơn so với Native App.
• Chỉ hỗ trợ 2 nền tảng Android và iOS
• Bảo mật chưa thật sự tốt do dùng JavaScript. Do sử dụng JavaScript, người dùng cũng sẽ bị ảnh hưởng bởi những đặc điểm của JavaScript như dễ làm dễ sai, dẫn đến khó duy trì về sau.
• Có một số thư viện cần trả phí
• Tùy biến chưa thật sự tốt ở một số module.
• Khơng thích hợp cho các app cần khả năng tính tốn cao (hash, crypto).
3.1.5. Điểm khác biệt giữa React JS và React Native (adsbygoogle = window.adsbygoogle || []).push({});
HTML: React Native không sử dụng HTML để hiển thị nội dung, nhưng nó
cung cấp các thành phần hoạt động tương tự, hoặc có thể biến đổi thành các phần tử tương tự trong HTML. Thêm nữa là cũng không sử dụng thẻ CSS. Vì vậy mà các chương trình nào sử dụng ReactJS thì khơng thể sử dụng trong React Native.
Thiết lập và đóng gói: Do React Native là một framework, cịn ReactJS chỉ
là thư viện trong JavaScript và được sử dụng cho trên web. Khi sử dụng trong chương trình mới:
• ReactJS: cho ta chọn một đóng gói xem như 1 webpack, nó ln cố gắng tìm ra những module thực sự đáng có trong dự án của bạn.
• React Native: cung cấp mọi thứ cần để tạo ra một chương trình hồn hảo. Điều này sẽ thật sự dễ dàng trong lúc thiết lập, có khi chỉ một dịng lệnh ngắn gọn chạy trong terminal là có thể chạy code.
Để các ứng dụng có sử dụng Native, cần phải có sẵn Xcode (dành cho iOS, trên máy Mac), Android Studio (dành cho Android) sẵn trên máy tính.
DOM và Styling: React Native khơng dùng HTML để render ứng dụng mà
cung cấp các component để thay thế. Component React Native sẽ ánh xạ các UI iOS hoặc Android được render trên ứng dụng.
Animations và Gestures: Thay vì CSS animation thì sẽ phải sử dụng
JavaScript để tạo các Component động trong React Native.
Điều hướng (Navigation): Navigator trong React Native cung chức năng
chuyển đổi giữa các màn hình trong ứng dụng.
Nền tảng code riêng (Platform specific code): React Native có khả năng
3.1.6. Hướng dẫn cài đặt React Native
Trên môi trường Windows:
Bước 1: Cài đặt Chocolatey từ https://chocolatey.org (Chocolatey là trình
quản lý các gói thư viện của Windows)
Mở powershell chạy lệnh sau với quyền administrator:
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
Bước 2: Cài đặt Nodejs Java và Python 2 thơng qua Chocolatey sử dụng
dịng lệnh sau (dùng cmd để chạy lệnh này):
choco install -y nodejs.install python2 jdk8
Bước 3: Cài đặt Android studio
Bước 4: Cài đặt SDK: Nên cài SDK Platform 23 vì mặc định react-native
hiện tại sử dụng Android SDK Platform 23 để build ứng dụng.
Trên môi trường MacOS:
Bước 1: Cài đặt Brew: Brew là trình quản lý các gói thư viện, MAC OS
khơng tích hợp sẵn và bạn phải sử dụng terminal để cài đặt brew bằng cách chạy dòng lệnh sau.
{{/usr/bin/ruby -e "$(curl –fsSL https://raw.githubusercontent.com/ Homebrew/install/master/install)"}} (adsbygoogle = window.adsbygoogle || []).push({});
Bước 2: Cài đặt Nodejs:
brew install node
Bước 3: Cài đặt Watchman:
brew install watchman
Bước 4: Cài đặt react-native:
npm install -g react-native-cli
Bước 5: Cài đặt Xcode: truy cập App Store trên MAC OS để cài đặt Xcode.
Bước 6 (option): Nếu xây dựng ứng dụng android sử dụng hệ điều hành MAC OS thì bạn cần cài đặt thêm các gói như JDK, Android Studio, Android SDK.
3.1.7. Cơng cụ phát triển ứng dụng React Native
Các công cụ, thư viện và dịch vụ là những phần quan trọng của mỗi lập trình viên, bất kể là đang phát triển cho mơi trường nào. Và React Native cũng khơng ngoại lệ.
Để có thể xây dựng một ứng dụng React native ta có thể sử dụng các cơng cụ:
• Android Studio cho tệp tin APK (Android)
• Xcode trên MacOS
Trong phần này chúng ta tập trung vào cơng cụ Android Studio.
Để có thể sử dụng Android Studio thì chúng ta cần cài đặt một số mơi trường khác như Android Software Development Kit (SDK). Tương tự như JDK, Android SDK là Bộ công cụ phát triển Cho Android. SDK này sẽ cung cấp cho chúng ta một bộ các thư viện và công cụ cần thiết để chúng ta có thể build, kiểm tra và debug cho các ứng dụng Android mà chúng ta viết ra.
Android Studio là một phần mềm bao gồm các bộ công cụ khác nhau dùng để phát triển ứng dụng chạy trên thiết bị sử dụng hệ điều hành Android như các loại điện thoại smartphone, các tablet... Android Studio được đóng gói với một bộ code editor, debugger, các công cụ performance tool và một hệ thống build/deploy (trong đó có trình giả lập emulator để giả lập môi trường của thiết bị điện thoại hoặc tablet trên máy tính) cho phép các lập trình viên có thể nhanh chóng phát triển các ứng dụng từ đơn giản tới phức tạp.