Tính năng của React Native

Một phần của tài liệu Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Trang 25)

5. Phương pháp nghiên cứu

3.1.4 Tính năng của React Native

React Native là framework giúp lập trình viên viết ứng dụng Native chỉ bằng Javascript, React Native phủ nhận định nghĩa về ứng dụng native ở trên.

Ứng dụng RN truy cập trực tiếp đến toàn bộ APIs của ngôn ngữ Native. Như vậy một ứng dụng được xây dựng bằng react native cho hiệu năng và cảm nhận tương tự như một ứng dụng native.

Đầu tiên, có thể dễ dàng giả định rằng React Native sẽ biên dịch ngôn ngữ JS code trực tiếp sang ngôn ngữ native tương ứng. Nhưng điều này thật sự khó khăn vì Objective C hay Java đều là những ngôn ngữ khá chặt chẽ. Thay vì thế, RN hoạt động một cách thông minh hơn. Về bản chất RN được xem như là một tập hợp các thành phần React (React components), mỗi component thế hiện tương ứng với view hay component nào đó của native.

React Native giúp cho lập trình viên web có thể viết ứng dụng native để khắc phục các điểm yếu của ứng dụng web và hybrid. Chỉ với một lập trình viên thành thạo javascript, bạn có thể chiến đấu trên mọi mặt trận web, desktop, server và bây giờ là mobile. Điều này không những có lợi cho lập trình viên web mà nó giúp cho các doanh nghiệp phát triển sản phẩm đầu cuối với ít nhân lực hơn.

Khi xây dựng React Native, điều tuyệt vời là đã được tích hợp tính năng Live Reload tương tự tính năng Hot Replacement Module trong Webpack. Tính năng Live Reload

12 khác tính năng Reload, trong khi Live Reload chỉ tải lại chức năng/tập tin nào thay đổi, thì Reload sẽ tải lại toàn bộ mã nguồn. Ngoài ra, bạn cũng dễ dàng debug javascript trong Chrome và Safari. Đối với những lỗi thuộc Native thì phải cần đến XCode cho iOS hoặc Android Studio cho Android.

13 3.1.5 Kiến trúc của React Native

Cả IOS và Android có một cấu trúc tương tự nhau với những điểm khác biệt nhỏ. Nếu chúng ta nhìn vào tổng thể thì platform này bao gồm 3 phần:

1. Native code/Module: Phần lớn native code với iOS thì được viết bằng Objective-C hoặc Swift, trong khi với Android thì đó là Java. Nhưng khi viết app bằng RN thì chúng ta rất ít khi phải viết native code cho từng platform. 2. Máy ảo Javascript: Máy ảo JS để chạy code Javascript của chúng ta. Với

máy ảo và thiết bị IOS/Android RN sử dụng JavascriptCore, một open source engine Javascript xây dựng cho WebKit. Đối với iOS, RN sử dụng Javascript Core cung cấp bởi nền tảng iOS. Nó được ra mắt lần đầu tiên trong iOS 7 cùng với OS X Mavericks.

Đối với Android, RN đóng gói JavascriptCore vào cùng với ứng dụng. Điều này sẽ làm tăng kích thước của app. Do đó app Hello World của RN sẽ có size khoảng 3-4 MB cho Android.

Đối với debugging mode trong Chrome, Javascript code chạy luôn trong Chrome thay vì JavascriptCore trong thiết bị, và giao tiếp với native code thông qua WebSocket. Tại đây, nó dùng engine V8, cho phép chúng ta truy cập đến rất nhiều thông tin bên trong debugging tool của Chrome như network request, log,...

3. React Native Bridge: React Native Bridge là một cầu nối C++/Java có nhiệm vụ xử lý giao tiếp giữa thread native và Javascript. Một giao thức tuỳ chỉnh được sử dụng để truyền tin nhắn.

14 Hình 6: React Native Bridge

Trong phần lớn trường hợp thì lập trình viên sẽ chỉ cần viết toàn bộ app RN bằng Javascript. Để chạy trên từng platform thì chúng ta sẽ sử dụng command cho platform tương ứng thông qua CLI. Tại thời điểm đó, RN CLI sẽ tạo ra một trình đóng gói có nhiệm vụ đóng gói code JS lại thành một file main.bundle.js. Trình đóng gói này có thể được xem là tương tự như Webpack. Giờ thì mỗi khi một app RN được khởi chạy, mục đầu tiên được load sẽ là entry point của native. Code JS này chứa toàn bộ logic của ứng dụng. Thread native có thể gửi thông báo thông qua RN Bridge để khởi chạy ứng dụng JS. Tại đây, thread Javascript sẽ bắt đầu phát ra các chỉ dẫn cho thread native thông qua RN Bridge. Chỉ dẫn này bao gồm việc view nào cần phải được load, thông tin nào cần phải được lấy từ phần cứng,...

Ví dụ, nếu thread JS muốn một view và một text được khởi tạo, nó sẽ gộp các yêu cầu thành một tin nhắn và gửi nó đến thread native để render. Thread native sẽ xử lý các request này và gửi lại kết quả cho thread JS để chắc chắn rằng các tính toán đã được xử lý thành công.

3.1.6 Threading Model của React Native

Khi một ứng dụng RN được khởi chạy, nó tạo ra những hàng chờ sau:

Main thread (Native Queue) - Đây là main thread được tạo ra ngay khi ứng dụng được khởi chạy. Nó tiến hành load ứng dụng và chạy thread JS để thi hành code Javascript. Thread native cũng có nhiệm vụ lắng nghe các UI event như 'press', 'touch',...

15 Những event này sau đó sẽ được gửi cho thread JS thông qua RN Bridge. Một khi Javascript đã được load, thread JS sẽ gửi những thông tin về việc những gì cần phải được render lên màn hình. Những thông tin này sẽ được dùng bởi shadow node thread để tính toán layout. Thread shadow về cơ bản thì là một engine tính toán sẽ quyết định việc tính toán vị trí của các view. Những chỉ dẫn này sau đó sẽ được gửi lại main thread để render ra view.

Javascript thread (JS Queue) - Hàng chờ Javascript là một hàng chờ để chạy code JS đã được đóng gói. Thread JS này chạy mọi business logic, ví dụ như code RN của chúng ta.

Custom Native Modules - Ngoài những thread được tạo ra bởi RN, chúng ta còn có thể tạo ra nhiều thread trên những native module tuỳ biến mà chúng ta xây dựng để đẩy nhanh tốc độ và hiệu năng của ứng dụng. Ví dụ thì các animation được xử lý trong RN bởi 1 thread native riêng để giảm tải cho thread JS.

3.1.7 Chế độ Development của React Native

Khi ứng dụng được chạy trong DEV mode, thread JS được tạo ra ngay tại máy dùng để phát triển. Mặc dù code JS được chạy trong một thiết bị mạnh hơn nhiều so với điện thoại, bạn sẽ thấy rằng hiệu năng của nó sẽ tệ hơn khá nhiều so với khi chạy bằng mode đóng gói hoặc mode production. Điều này là không thể tránh khỏi bởi vì có thêm rất nhiều việc được làm ở DEV mode khi app chạy để cung cấp những cảnh báo hữu dụng và tin nhắn lỗi, ví dụ nhưng xác thực propTypes và vô vàn assertion khác. Hơn nữa, độ trễ của việc giao tiếp giữa thiết bị và thread JS cũng phần nào làm giảm hiệu năng

16

3.2 NodeJS

3.2.1 Giới thiệu NodeJS

Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên Javascript Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng.

Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao.

Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực. Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể

3.2.2 Nguồn gốc NodeJS

Nodejs được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ.

Hiện tại nodejs có 71k start trên Github. 3.2.3 Các khái niệm cơ bản của NodeJs

3.2.3.1 Blocking I/O

Yêu cầu thực thi một IO operation, sau khi hoàn thành thì trả kết quả lại. Pocess/Theard gọi bị block cho đến khi có kết quả trả về hoặc xảy ra ngoại lệ. 3.2.3.2 Nonblocking I/O

Yêu cầu thực thi IO operation và trả về ngay lập tức (timeout = 0). Nếu operation chưa sẵn sàng để thực hiện thì thử lại sau. Tương đương với kiểm tra IO operation có sẵn sàng ngay hay không, nếu có thì thực hiện và trả về, nếu không thì thông báo thử lại sau.

17 Hiểu đơn giản: Diễn ra theo thứ tự. Một hành động chỉ được bắt đầu khi hành động trước kết thúc.

3.2.3.4 Asynchronous

Không theo thứ tự, các hành động có thể xảy ra đồng thời , mặc dù các hành động bắt đầu theo thứ tự nhưng kết thúc thì không. Một hành động có thể bắt đầu (và thậm chí kết thúc) trước khi hành động trước đó hoàn thành.

3.2.3.5 Ví dụ về Synchronous và Asynchronous kết hợp với Promise, async/await Trong javascript các action đều là không đồng bộ (asynchronous):

Hình 7: Ví dụ mẫu về Asynchoronous

Hãy đoán thử xem đoạn code này có thực theo đúng trình tự , sẽ có một vài trường hợp máy chạy chậm, function addLinkScript chưa chạy xong thì đoạn code console.log đã thực thi đây là ván đề (asynchronous), để khắc phục được điều đó javascript có khái niệm là callback.

18 Hình 8: Ví dụ mẫu về callback

Nếu có callback đoạn code sẽ được thực thi đúng trình tự(Synchronous), nhưng cũng có vấn đề với callback là nếu lồng quá nhiều callback, khái niệm này gọi là callback hell như hình:

Hình 9: Một đoạn code về callback hell

Như vậy thì sẽ rất là rối và nhìn code sẽ không clean, javascript cho ra đời Promise để khắc phục điều đó.

19 Hình 10: Promise

Khi sử dụng thì:

Hình 11: Single Promise

Nhìn rất dễ đọc nhưng khi lồng nhiều promise thì cũng sẽ rất khó đọc như sau:

20 Nên javascript cho ra đời async/await:

Hình 13: Async/await

Với async/await giúp cho việc xử lý asynchronous trở nên dễ dàng hơn, code đọc dễ hiểu hơn.

3.3 MongoDB

3.3.1 Giới thiệu NoSQL

Thuật ngữ NoSQL được giới thiệu lần đầu vào năm 1998 sử dụng làm tên gọi chung cho các lightweight open source relational database (cơ sở dữ liệu quan hệ nguồn mở nhỏ) nhưng không sử dụng SQL cho truy vấn.

Dữ liệu trong NoSQL DB được lưu dưới dạng document, object. Truy vấn dễ dàng và nhanh hơn RDBMS nhiều.

Việc đổi cấu trúc dữ liệu (thêm, xóa trường hoặc bảng) rất dễ dàng và nhanh gọn trong NoSQL

Một số tính năng:

+ High Scalability: gần như không có một giới hạn cho dữ liệu và người dùng trên hệ thống.

+ High Availability: do chấp nhận sự trùng lặp trong lưu trữ nên nếu một node (commodity machine) nào đó bị chết cũng không ảnh hưởng tới toàn bộ hệ thống.

21 + Consistency: chấp nhận tính nhất quán yếu, có thể không thấy ngay được sự thay đổi mặc dù đã cập nhật dữ liệu.

+ Durability: dữ liệu có thể tồn tại trong bộ nhớ máy tính nhưng đồng thời cũng được lưu trữ lại đĩa cứng.

+ Deployment Flexibility: việc bổ sung thêm/loại bỏ các node, hệ thống sẽ tự động nhận biết để lưu trữ mà không cần phải can thiệp bằng tay. Hệ thống cũng không đòi hỏi cấu hình phần cứng mạnh, đồng nhất.

+ Modeling flexibility: Key-Value pairs, Hierarchical data (dữ liệu cấu trúc). 3.3.2 MongoDB là gì?

MongoDB là phần mềm cơ sở dữ liệu mã nguồn mở NoSQL hỗ trợ đa nền tảng được thiết kế theo hướng đối tượng. Các bảng (trong MongoDB gọi là

collection) có cấu trúc linh hoạt cho phép dữ liệu không cần tuân theo dạng cấu trúc nào.

22 3.3.3 Các tính năng của Mongodb

3.3.3.1 Truy vấn ad hoc

Truy vấn ad hoc là một trong những tính năng tốt nhất của chương trình. Nó hỗ trợ các trường, truy vấn phạm vi và tìm kiếm các biểu thức để trả về các trường tài liệu cụ thể bao gồm các hàm JavaScript do người dùng xác định hoặc các truy vấn này được cấu hình và trả về mẫu kết quả ngẫu nhiên có kích thước nhất định. Bên cạnh đó, các trường trong MongoDB có thể được dùng để lập các chỉ mục chính và các chỉ mục phụ.

3.3.3.2 Nhân rộng

Đây là tính năng mà chương trình cung cấp Replica set. Nó bao gồm hai hoặc nhiều bản sao của dữ liệu. Trong đó mỗi bản sao có thể đóng vai trò chính và phụ.

Trong quá trình nhân rộng, tất cả các dữ liệu ghi và đọc thực hiện trên bản sao chính.

Bản sao thứ cấp sử dụng bản sao tích hợp để duy trì bản sao dữ liệu của bản chính.

Trong trường hợp một bản sao chính thất bại, Replica set chọn ra một bản sao thứ cấp để trở thành bản sao chính tiếp theo. Replica thứ cấp có thể tùy chọn phục vụ các hoạt động nhưng dữ liệu cuối cùng chỉ nhất quán theo mặc định.

3.3.3.3 Cân bằng tải

Bằng cách sử dụng Sharding, MongoDB chia tỷ lệ theo chiều ngang để người dùng chọn một Shard key. Xác định các dữ liệu được phân phối trong collection. Nhìn chung, dữ liệu được chia thành các phạm vi và

23 được phân phối đồng đều dựa trên các Shard key. Nó chạy trên nhiều máy chủ, cân bằng tải hoặc sao chép dữ liệu để giữ hệ thống luôn hoạt động trong trường hợp có lỗi về phần cứng.

3.3.3.4 Lưu trữ tệp

Với tính năng lưu trữ tệp, MongoDB được sử dụng như một hệ thống tệp (GridFS) giúp cân bằng tải và sao chép dữ liệu trên nhiều máy tính để lưu trữ tệp. Trong đó, GridFS chia một tệp ra thành các phần hoặc các đoạn và lưu trữ thành những tài liệu riêng biệt. Bạn có thể truy cập GridFS bằng tiện ích Mongofiles hoặc plugin cho Nginx và Lighttpd.

3.3.4 Ưu và nhược điểm của Mongodb

3.3.4.1 Ưu điểm

Đầu tiên có thể nhắc đến là tính linh hoạt lưu trữ dữ liệu theo các kích cỡ khác nhau, dữ liệu dưới dạng hướng tài liệu JSON nên bạn có thể chèn vào thoải mái bất cứ thông tin gì bạn muốn.

Khác với RDBMS, dữ liệu trong đây không có sự ràng buộc và không có yêu cầu tuân theo khuôn khổ nhất định, điều này giúp bạn tiết kiệm thời gian cho việc kiểm tra sự thỏa mãn về cấu trúc nếu muốn chèn, xóa, cập nhật hay thay đổi các dữ liệu trong bảng.

MongoDB dễ dàng mở rộng hệ thống bằng cách thêm node vào cluster – cụm các node chứa dữ liệu giao tiếp với nhau.

Ưu điểm thứ tư là tốc độ truy vấn nhanh hơn nhiều so với hệ quản trị cơ sở dữ liệu quan hệ RDBMS do dữ liệu truy vấn được cached lên bộ nhớ RAM để lượt truy vấn sau diễn ra nhanh hơn mà không cần đọc từ ổ cứng.

24 Cũng là một ưu điểm về hiệu suất truy vấn của MongoDB, trường dữ liệu “_id” luôn được tự động đánh chỉ mục để đạt hiệu suất cao nhất.

3.3.4.2 Nhược điểm

Ngoài các ưu điểm vượt trội, vẫn còn một số hạn chế khi cài đặt và sử dụng bạn cần chú ý như sau:

Dữ liệu trong MongoDB không bị ràng buộc như RDBMS nhưng người sử dụng lưu ý cẩn thận mọi thao tác để không xảy ra các kết quả ngoài ý muốn gây ảnh hưởng đến dữ liệu.

Một nhược điểm mà “dân công nghệ” hay lo ngại là bộ nhớ của thiết bị. Chương trình này thường tốn bộ nhớ do dữ liệu được lưu dưới dạng key-value, trong khi các collection chỉ khác về value nên sẽ lặp lại key dẫn đến thừa dữ liệu.

Thông thường, dữ liệu thay đổi từ RAM xuống ổ cứng phải qua 60 giây thì chương trình mới thực hiện hoàn tất, đây là nguy cơ bị mất dữ liệu nếu bất ngờ xảy ra tình huống mất điện trong vòng 60 giây đó.

3.4 Docker

3.4.1 Vì sao nên sử dụng:

Docker chạy cách li trên môi trưởng ảo hóa, giúp cho việc cài đặt giữa các môi trường, giữa các version không bị conflict với nhau.

Với một dự án cài đặt docker thì chỉ cần config đúng 1 lần duy nhất , sau đó có thể đem project đi bất cư hệ điều hành nào vẫn có thể chạy bình thường mà không cần cài đặt rườm rà.

25 3.4.2 Quá trình hình thành:

Containerlization là gì?

Thời trước mô hình máy chủ thường là:

Máy chủ vật lý (physical server) + hệ điểu hành (operating system) + ứng dụng.

Hình 15: Tổng quan máy chủ vật lý [5] Vấn đề gặp phải ở đây là lãng phí tài nguyên:

• Một máy chủ chỉ cài được một OS

• Cho dù có ổ cứng khủng, ram khủng thì cũng không tận dụng hết lợi thế. • Có thể bạn đã nghe tới cái tên Vituralbox hay VMware rồi đúng không, đó đó

Một phần của tài liệu Xây dựng ứng dụng học tiếng nhật trên nền tảng IOS (Trang 25)

Tải bản đầy đủ (PDF)

(92 trang)