React Native là gì và tại sao nó lại quan trọng?

Chào các bạn, để tiếp nối với phần 1 - React là gì và tại sao nó lại quan trọng? mình sẽ viết tiếp phần 2 về React Native.

GIỚI THIỆU

React Native hiểu đơn giản chính là React cùng với native component.

Được Facebook release ra vào năm 2015, React Native cho phép bạn tạo các ứng dụng di động chỉ với Javascript và React. React Native có kiến trúc thiết kế tương tự như React, cho phép bạn thiết kế, tái sử dụng các UI phong phú từ các component mặc định và các component đến từ đóng góp của người dùng.

React Native dù chỉ mới ra đời 2 năm, nhưng đã nhận được sự quan tâm không kém cạnh gì đàn anh React. Tại Github repo, React Native nhận được hơn 48k stars, cùng với 1316 contributors – thậm chí còn nhiều hơn React. Hiện nay, ở các diễn đàn công nghệ, conference, Mobile summit, Facebook group thì React Native luôn là chủ đề nóng bỏng được đưa ra thảo luận và dần trở thành một xu thế công nghệ.

VẤN ĐỀ & GIẢI PHÁP

Hiện nay theo sự phát triển của xã hội, nhu cầu tạo ra một ứng dụng mobiles và ứng dụng web đồng nhất và nhanh nhất ngày càng tăng. Tuy nhiên do rào cản nền tảng và mong muốn đó chưa được thực hiện.

Thời gian gần đây xuất hiện nhiều framework cho phép sử dụng các ngôn ngữ chạy trên web để phát triển ứng dụng mobile hay còn gọi là cross-platform development như PhoneGap, Ionic, Cordova,.. tuy nhiên ứng dụng tạo ra chỉ đạt đến mức hybrid-app, sử dụng các Webviews để hiển thị giao diện lên chứ không thực sự là native.

Việc sử dụng các ứng dụng hybrid làm giảm hiệu năng và không tối ưu trong việc xử lý.

Google cũng công bố cho mình một hướng tiếp cận khác, hoàn toàn bỏ đi native app mà sử dụng Progressive Web App (PWA), tuy hiệu năng khá tốt, nhưng vẫn không thể nào so sánh được với native app khi ứng dụng trở nên lớn hơn, mặt khác PWA được cho là khó giữ lại người dùng hơn là native app.

React Native cung cấp cho bạn một thứ hoàn toàn khác biệt, ứng dụng được tạo ra sẽ hoàn toàn native với hiệu năng cao, chứ không phải là “mobile web app”, “HTML5 app” hay “hybrid app”. Bạn có thể build một ứng dụng mobile mà khó có thể phân biệt được nó với các native app khác tạo hoàn toàn bằng Java hay Swift/Objective-C. React Native sử dụng các UI hoàn toàn giống với iOS hay Android app thông thường, điều đặc biệt là nó được xây dựng dễ dàng hơn thông qua Javascript và React.

TẠI SAO PHẢI SỬ DỤNG REACT NATIVE?

React Native trở nên phổ biến như vậy là vì nó ăn theo đàn anh React vốn đang làm mưa làm gió trong lĩnh vực CNTT?

Không!

React Native không có: Controllers, Derectives, Templates, Global Event Listener, Models, View-Models,.. Vậy tại sao lại chọn React Native mà không phải các framework khác?

Bởi vì React Native có Component.

Component của React Native được kế thừa từ React, và nó đóng vai trò như hạt nhân thúc đẩy React và React Native phát triển, với khả năng tái sử dụng và quản lý giao diện, Component API được xem như là tương lai của thiết kế UI trên web và mobile.

• Thực sự native

Đa phần ứng dụng mobile viết bằng Javascript hiện nay sử dụng Cordova hoặc các framework xây dựng trên nền Cordova như Ionic, Sencha Touch,... Bạn có thể gọi các View giống hệt native ra tuy nhiên ứng dụng của bạn lại chỉ là một đống HTML/HTML5 và Js gói bên trong Webviews. Với React Native, nó cho phép bạn render các View của mình bằng chính true native API, bằng cách gọi chính sdk theo từng nền tảng để build ứng dụng.

• Learn once write anywhere

React Native không theo đuổi việc "Write once, run anywhere" như các hybrid-app. 

Bởi vì Facebook nhận ra rằng với mỗi nền tảng khác nhau sẽ có mỗi giao diện, cảm nhận, khả năng khác nhau nên React Native vẫn hướng đến phát triển những ứng dụng riêng biệt cho từng platform để đem lại trải nghiệm tốt nhất cho người dùng.

React Native đi theo một mục đích là học một lần những cốt lõi của ReactJs, và sau đó áp dụng nó vào tất cả các project từ web app đến mobile app (Android, iOS) mà không cần học thêm một công nghệ khác nào – Learn once, write everywhere.

Với tư duy và nền tảng có được khi học React bạn có thể dễ dàng chuyển đổi giữa việc lập trình Web và lập trình ứng dụng mobile, đáp ứng công việc thực tế.

• Live reloading – Hot reloading

React Native cho phép bạn xây dựng ứng dụng nhanh hơn, thay vì re-compiling, bạn có thể load lại giao diện của app ngay lập tức. Với Hot reloading, bạn còn thậm chí có thể xem ngay những thay đổi trên giao diện bằng cách vừa chạy app vừa code.

Điều này sẽ đẩy mạnh quá trình phát triển app và các máy tính yếu sẽ không còn gặp vấn đề build lại project nhiều lần, tốn thời gian chờ đợi và ảnh hưởng hiệu năng máy tính như khi lập trình Android/iOS bình thường.

• Dễ dàng kết hợp với native code (Java, Swift,..)

React Native kết hợp mượt mà với các native component được viết từ Swift/Objective-C hay Java. Cực kì đơn giản để chuyển component từ React Native sang native code khi bạn cần optimize một số khía cạnh nhỏ của app theo hướng dẫn sau. Nó cũng cực kì dễ dàng khi build một phần của app bằng React Native và phần còn lại bằng trực tiếp bằng native code – đó cũng là cách mà Facebook, Tiki áp dụng cho app của họ.

• Hiệu năng cao

React Native có tốc độ thực thi cao, mặc dù Js thì không thể chạy nhanh bằng native code được tuy nhiên vẫn có hướng overcome vấn đề hiệu năng này. Và trong phần lớn trường hợp React Native và Js có thể giữ cho app bạn chạy ở mức độ 60 khung hình/giây, và khó có thể phân biệt được với native app. 
Ở cấu trúc bên dưới, Js code chạy ở một thread riêng biệt với UI thread, vì vậy dù app có chạy với logic phức tạp đến mức nào thì UI vẫn cực kì mượt và không bị block bởi Js worker thread.

• Dễ học

React Native có điểm mạnh là JSX code đẹp và dễ đọc. Trang documents viết chi tiết đầy đủ kèm cộng đồng (Facebook, meetup, React conferences,..) vững mạnh có thể hỗ trợ mọi lúc.

React Native cũng là chủ đề nóng bỏng được thảo luận và đăng tải thường xuyên, số lượng câu hỏi, tutorial, blog về React Native cũng đang tăng với số lượng chóng mặt, vì vậy thật dễ dàng để học hay tìm ra câu trả lời cho vấn đề bạn đang mắc phải.

SỬ DỤNG NHƯ THẾ NÀO?

Với chủ đề là React và Swift, mình xin hướng dẫn các bạn một số vấn đề với React Native và iOS development.

a. Getting started.

Để có thể sử dụng React Native cho iOS bạn cần phải có một máy tính cài đặt hệ điều hành MacOSX (có thể là máy ảo, hoặc máy Hackintosh).

Tiến hành cài đặt các dependencies cần thiết như NodeJS và Watchman sử dụng Homebrew bằng cách chạy các dòng lệnh sau:

$ brew install node
$ brew install watchman

Tiếp theo, cài đặt React Native CLI (command line interface):

npm install -g react-native-cli

Cài đặt XCode thông qua Mac App Store. Nên cài Xcode phiên bản 8.0 hoặc cao hơn để đảm bảo tương thích với các tính năng mới của các bản release React Native gần đây.

Kiểm tra lại việc cài đặt bằng cách tạo và chạy thử một project:

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

Kết quả hiện ra trên máy ảo như sau:

Dòng lệnh chỉ là một cách để chạy ứng dụng của bạn. Ngoài ra bạn còn có thể chạy bằng cách nhấn trực tiếp phím Run trong Xcode hoặc trong Nuclide.

Thử thay đổi một vài giá trị trên giao diện bằng cách:

• Mở file index.ios.js (hoặc index.android.js cho Android) bằng text editor và thử sửa dòng "Welcome to React Native!" thành tên của bạn.
• Chọn trở lại máy ảo Simulator khi nãy và ấn tổ hợp phím Command⌘ + R để thực hiện Live reload và cập nhật thay đổi lên ứng dụng.

Vậy là bạn đã thành công trong việc tạo và chỉnh sửa một app React Native đầu tay cho mình rồi.

      b. Javascript “mới”
      
Hãy cùng mở lại file index.ios.js khi nãy và xem kĩ lại:

Có gì đó kì lạ ở đây, một cái gì đó không thực sự giống như Javascript???

Đừng hoang mang, đây là tương lai!

Đầu tiên ES2015 (hay ECMAScript6, ES6) là một bộ cải thiện Javascript mà hiện nay đã trở thành chuẩn chung cho các lập trình viên. Nhiều tính năng của ES6 đã sẵn sàng cho các engine Js hiện đại. Bằng  cách sử dụng Babel, chúng ta có thể đảm bảo các tính năng của ES6 có thể chạy trên nhiều nền tảng khác nhau (Android, iOS, Windows,...)

Rất nhiều tính năng nổi bật của ES6 như:
 - Thay vì sử dụng var để khi báo biến cục bộ, ES6 sử dụng const và let,
 - Khai báo annonymous function bằng fat arrow (=>)
 - Chia source code ra thành nhiều module và sử dụng cú pháp import/export để quản lý.
 - Đăt giá trị mặc định cho tham số của hàm
 - …

Và quan trong hơn hết, ES6 bắt đầu có khái niệm JS classes. Trước đó “class” trong Js thực chất chỉ là các function với instance method được gán vào MyFunction.prototype.

ES6 cho phép ta sử dụng cú pháp đơn giản hơn với chỉ một từ khóa class. Class trong ES6 cho phép ta sử dụng các hàm có sẳn, viết thêm hàm, kế thừa và có cả constructor như class của các ngôn ngữ khác.

    c. JSX

Một điều kì lạ trong file index.ios.js demo ở trên là phần <Text>Hello world!</Text>. Như đã giải thích ở bài trước, đó là cú pháp của JSX, một cú pháp dành cho việc nhúng tag-based XML vào Javascript để sử dụng. Mỗi tag như  sẽ được chuyển đổi thành một lần gọi hàm  để tạo các component/element.

JSX giúp cho việc thiết kế giao diện trở nên dễ dàng hơn, dễ đọc hiểu và tưởng tượng ra được mình đang thiết kế UI gì.

Bạn không bắt buộc phải sử dụng JSX, tuy nhiên cách áp dụng này không có khuyết điểm nào và thực sự nên dùng.

d.   React component.

Component như đã nói ở trên, chính là cốt lõi của React, React Native, và là tương lai của công nghệ. React Native cho phép chúng ta xây dựng các Native UI Component đại diện cho các block của UI, và nhận nhiệm vụ mapping từ Js components sang native UI và render ra màn hình

Cả giao diện màn hình của thiết bị được vẽ như thế nào, bao gồm cả StatusBar, NavigationBar đều được qui định bởi các React Component. Thứ tự của các components trong cấu trúc cây của JSX cũng là thứ tự khi vẽ lên màn hình.

React Native hỗ trợ sẵn khá nhiều components tương ứng với các View cơ bản của iOS/Android. Danh sách có thể được xem tại đây.

Ngoài ra các React Component còn có thể tái sử dụng qua lại giữa Web và Mobile làm cho việc thống nhất hóa các trang web và ứng dụng của một công ty trở nên dễ dàng hơn bao giờ hết

e. Props

Nhiều component có thể được customize khi nó được tạo ra bằng nhiều thuộc tính khác nhau, những thuộc tính/tham số đó gọi là props.

Props có thể được hiểu như properties của một component, tất cả các component đều có thể có props dù đó là component cơ bản của React Native hay custom component do người dùng tạo ra. Props có thể được truy cập nội tại bên trong component, cho phép component đó biết nó phải hoạt động như thế nào, hiển thị thế nào lên màn hình.

Ví dụ với một component cơ bản của React Native là <Image>. Khi ta tạo một Image ta có thể sử dụng một props tên là “source” để kiểm soát cái gì sẽ được in ra màn hình.

Các React Component không thể tự thay đổi props của chính nó được, mà phải nhờ một component cha thiết lập thuộc tính cho nó, và giá trị đó sẽ cố định trong suốt vòng đời của component đó. Đối với các thuộc tính thường xuyên thay đổi hoặc muốn thay đổi trong nội tại component ta cần sử dụng một khái niệm khác, gọi là state.

e. State

Với State, ta có thể maintain trạng thái và các thuộc tính của nó ngay trong nội tại component. State cũng có thể truy cập trong nội tại của component, tuy nhiên không như props, các component cha có thể không truy cập được vào state của component con. 

Về tổng quát, bạn nên khởi tạo state ngay trong constructor của component, sau đó sử dụng hàm this.setState(object newState) để gán trạng thái cho component bất cứ khi nào bạn muốn. Và lưu ý rằng không nên truy cập và thay đổi trực tiếp bất cứ thuộc tính nào của state bằng cách gọi this.state.foo = ‘bar’, mà phải thực hiện thông qua hàm this.setState(‘bar’).

Ví dụ ta muốn làm một máy phiên dịch từ ngữ thành pizza thì có thể sử dụng this.state để lưu và chỉnh sửa những từ đã gõ. Ở đây mỗi khi ta nhập gì đó vào <TextInput> thì hàm onChangeText() sẽ gọi hàm this.setState() để gán giá trị text mới vào this.state.text. Ngay sau đó khi component được render ra màn hình, ta sẽ lấy this.state.text đó ra split, mapping thành những ký hiệu 🍕 và vẽ ra màn hình trong hàm render().

g.   Style

Với React Native, bạn không cần dùng thêm một ngôn ngữ nào (như CSS) để qui định style cho các component khi vẽ lên màn hình. Tất cả những thứ bạn cần là sử dụng Javascript để tạo ra các object chứa các giá trị cần cho style.

Tất cả các core component hỗ trợ bởi React Native đều chấp nhận một props tên là ‘style’. 
Các style name và giá trị được kế thừa từ CSS ngoài trừ việc chuyển sang sử dụng CamelCase để biểu thị. (Ví dụ: backgroundColor thay vì background-color của CSS). Điều đó tạo thuận lợi cho việc rút ngắn khoảng cách giữa lập trình mobile apps và web apps.

Một props chứa các giá trị của style có thể là một POJO (Plain Old Javascript Object) chứa một mảng các style. Tuy nhiên vì các component có thể phức tạp hơn khi project phát triển, để clean code ta thường sử dụng StyleSheet.create() để define nhiều styles cùng lúc

h. Networking

Nhiều mobile apps cần phải load tài nguyên từ remote URL. Bạn cần phải tạo các POST request đến các REST API, và tải dữ liệu về thông qua GET request. Hoặc đơn giản bạn chỉ cần fetch các dữ liệu tĩnh ở đâu đó trên Internet về (Vd: tải một hình ảnh tĩnh,..).

Networking trong React Native được tạo ra từ hai API chính: Fetch và XMLHttpRequest. Cả hai đều được thiết kế để tương thích với API của trình duyệt, vì vậy:
 - Lập trình viên Web không cần phải học một cách mới để tạo các network requests.
 - Các thư viện đều được xây dựng trên nền tảng của 2 API trên cho React Native.

• Fetch API:

Dễ sử dụng, và ra đời với React Native, Fecth API là promise-based, do đó bạn có thể xử lý bất đồng bộ với async/await.

Ví dụ: Tải một content từ trang web tĩnh: fetch('https://iceteaviet.blogspot.com/hcmus.json')

Fetch cũng có thể thêm các tham số optional để customize HTTP request của bạn. Bạn có thể định rõ ra các header khi gửi POST request.
Bạn có thể tham khảo rõ hơn các ví dụ về Fetch API và các custom libraries khác tại đây hoặc đây.

i. Tích hợp React Native vào một ứng dụng có sẵn.

React Native rất tốt nếu bạn bắt đầu tạo ứng dụng với nó ngay từ đầu. Tuy nhiên đối với các project lớn nó cũng cực kì tốt khi thêm một vài SingleView hoặc user flow vào một dự án native có sẵn chỉ với một vài bước.

 - Hiểu rõ bạn cần intergrate component nào

 - Tạo một Podfile với subspec cho tất cả React Native components mà bạn muốn sử dụng trong native app

 - Tạo và chỉnh sửa các component đó bằng Javascript.

 - Thêm một event handler mới để tạo RCTRootView trỏ tới React Native component của bạn với tên AppRegistry mà bạn đã khai báo trong index.ios.js

 - Chạy React Native server bằng cách gõ lệnh npm start, và Run ứng dụng native của bạn từ XCode

 - Debug

 - Deploy ứng dụng của bạn qua script ‘react-native-xcode.sh’

 - Thưởng thức thành quả

Ngoài ra bạn cũng có thể làm ngược lại - intergrate một component tạo ra bằng native code (Swift, Java) vào ứng dụng React Native bằng cách sử dụng:

Import YourAwesomeComponent from ‘./com/icetea/native/component/yourawesomecomponent.js’

Bạn có thể tham khảo thêm tại đây hoặc bài blog sau.

Chúc các bạn học tốt và đừng quên để lại bình luận bên dưới nhé.