Giới thiệu về NativeScript 2 – Phát triển ứng dụng di động nguyên gốc bằng JavaScript

Giới thiệu về NativeScript 2 – Phát triển ứng dụng di động nguyên gốc bằng JavaScript
access_time 9/13/2016 12:00:00 AM
person Đào Minh Giang

NativeScript là một nền tảng tạo ứng dụng đa nền (cross-platform framework) cho phép tạo các ứng dụng nguyên gốc (native app) bằng JavaScript và CSS, XML. Các giao diện lập trình (API) được dịch sang các API nguyên gốc khi thực thi. Bạn có thể sử dụng các tính năng hiện đại của JavaScript, TypeScript và Angular JavaScript cũng như tận dụng hiệu năng của Swift hay Java. Viết một lần và chạy bất ở bất kỳ đâu.

Vậy thực chất  NativeScript là gì?

Đó không chỉ là một tập các thư viện mà hơn thế, nó là một thành phần thực thi cho phép bạn gọi các API của nền tảng Android, iOS (và tương lai gần nữa là Windows Universal) thông qua mã JavaScript.

NativeScript được xây dựng dựa trên các thành phần chính gồm:

●  Máy ảo JavaScript để thông dịch và thực thi mã JavaScript – cái mà chúng thường biết đến với tên gọi là "cầu nối" (bridge) để dịch thành các lời gọi trực tiếp tới API gốc của hệ điều hành di động.

●  Bản thân module “cầu nối” gộp trong đó là một dịch vụ ghép nối (marshaling service) đóng vai trò chuyển đổi dữ liệu từ JavaScript sang các kiểu dữ liệu nguyên gốc và ngược lại cũng như một tập các gắn kết (binding) làm nhiệm vụ chuyển đổi các phương thức JavaScript sang các lệnh nguyên gốc tương ứng.

●  Các máy ảo JavaScript (JavaScript Virtual Machine - VM) là Google’s V8 trên Android và WebKit’s JavaScriptCore trên iOS từ phiên bản 7.0 trở lên.

Ta cùng xem xét mã code sau :

var file = new java.io.File(path);

Các hành động xảy ra ở đây là:

●  JavaScript VM đánh giá mã nguồn.

●  Các gắn kết (binding) sẽ xác định các phương thức native được gọi tương ứng

 Dịch vụ ghép nối sẽ chuyển đổi String của JavaScript thành đối tượng java.lang.String

●  Kết quả của lời gọi hàm sẽ trở thành một đối tượng JavaScript hoạt động như một proxy tới đối tượng java.io.File được tạo ở phía Android. Khi một phương thức được gọi trên proxy này, nó sẽ chuyển thẳng tới thể hiện của đối tượng nguyên gốc.

Cơ chế này cho phép bạn xây dựng các ứng dụng nguyên gốc chỉ cần sử dụng code JavaScript. Thêm vào đó, bạn có đầy đủ tất cả sức mạnh, tính linh hoạt và khả năng mở rộng của JavasSript để tạo logic nghiệp vụ của mình – như các mô hình dữ liệu, truy cập dữ liệu, các view model / controller, …

Hình 1. Sơ đồ minh họa luồng thực thi ứng dụng NativeScript trên iOS

 

Hình 2. Sơ đồ minh họa luồng thực thi ứng dụng NativeScript trên Android

Vậy các ứng dụng NativeScript  khác với các ứng dụng lai (Hybrid) như nào?

Sự khác nhau chính giữa hai loại ứng dụng là UI Stack và User Input

HYBRID:

Giao diện người dùng được tạo và định kiểu thông qua CSS và HTML. Một thể hiện của trình duyệt nhúng trong ứng dụng và được dùng để hiển thị HTML và CSS

Các plugin Cordova (PhoneGap) được dùng để cung cấp truy xuất tới một số API native của nền tảng.

●  User Input được xử lý thông qua các thể hiện của trình duyệt nhúng và giao tiếp như các sự kiện JavaScript tới các phần tử DOM đang giữ tiêu điểm (focused)

NativeScript:

Các giao diện người dùng là các thể hiện tương ứng widget/visual nguyên gốc như android.widget.Button hay UIKit.UIButton.

Bộ thực thi NativeScript cung cấp khả năng truy xuất đầy đủ tới các API nguyên gốc như Camera, Location, hay File System, v.v..

User Input được xử lý bằng các xử lý nguyên gốc (ủy quyền) được khai báo trong JavaScript – như việc thực thi View.OnClickListener hay UIControl.addTarget.

Hiệu năng

Một câu hỏi nữa các bạn sẽ băn khoăn là hiệu năng xử lý NativeScript so sánh với các ứng dụng nguyên gốc thực thi trên Android và iOS thì sẽ ra sao?

Câu trả lời đó là việc bổ xung thêm lớp trìu tượng trung gian vào sẽ phải trả giá một phần hiệu suất gồm: việc diễn giải mã JavaScript và điều phối dữ liệu. Và thông qua việc ước lượng sơ lược thì chúng mất khoảng 10% hiệu năng nếu so với việc thực thi chức năng trực tiếp bằng mã nguyên gốc. Tuy nhiên trong hầu hết các trường hợp với việc suy giảm 10% gần như người dùng không cảm nhận thấy.

Ngoài ra, đội ngũ phát triển NativeScript đang cố gắng làm việc với các ý tưởng mới để tối ưu hơn nữa trong tương lai và một số các trải nghiệm đó sẽ được phát hành trong những phiên bản kế tiếp của nền tảng.

Các module và việc hỗ trợ yêu cầu nạp

Với việc thực thi đầy đủ, NativeScript hỗ trợ các module NativeScript và thực thi theo đặc tả CommonJS. Đặc điểm này cho phép chỉ mã JavaScript cần thiết cho trạng thái hiện tại của ứng dụng mới phải nạp vào. Sau đó, khi người dùng tương tác với ứng dụng, các module khác có thể sẽ được nạp thêm vào nếu cần.

Ví dụ, đoạn mã đơn giản sau cho thấy cách tạo một module độc lập, với tên là “about” và thể hiện một Activity mới trên Android:

 

var activityBody = {
         onCreate: function (bundle) {
                 this.super.onCreate(bundle);
         var relativeLayout = new android.widget.RelativeLayout(this);
                 this.setContentView(relativeLayout);
         }
};
exports.activity = com.tns.NativeScriptActivity.extends(activityBody);

Và module này có thể được yêu cầu nạp vào như sau:

var activity = require("about").activity;

Các module NativeScript dựng sẵn

Hình 3. Các module dựng sẵn (build-in) của NativeScript

Truy xuất các API nguyên gốc trực tiếp bằng JavaScript thật dễ dàng nhưng điều này có nghĩa bạn phải hiểu sâu về các API trên Android và iOS để biết cần gọi gì và khi nào. Với đội ngũ phát triển NativeScript thì mục đích chính là cung cấp một tập các module và API mà truy xuất dựa vào nền tảng tới nền tảng đích cơ sở.

Ví dụ, ta cùng xem xét đoạn mã download JSON từ internet - ở đây bạn cần thông qua HTTP – truy cập các API và các API hỗ trợ HTTP lại khác nhau ở từng nền tảng. Thông qua module http sẽ cung cấp các API mà bạn có thể dùng mà không cần quan tâm chi tiết tới các API nguyên gốc:

var http = require("http");
http.getJSON("http://www.reddit.com/r/aww.json?limit=30")
         .then(function (result) {
                  // result is JSON Object
         });

Sự thực thi phía dưới chức năng này sẽ khác nhau ở từng nền tảng, nhưng module sẽ làm việc đó cho ta. Theo cách đó, bạn có thể viết mã một lần và thực thi chúng trên tất cả các nền tảng được hỗ trợ.

Đây là danh sách các module hiện đã sẵn sàng sử dụng:

Các module lõi (Core modules)

application: Cung cấp việc trìu tượng hóa ứng dụng và tất cả các phương thức liện quan

console: Cho phép bạn đưa các thông báo tới console của thiết bị.

application-settings: Cho phép bạn lưu và phục hồi lại bất kỳ thông tin liên quan tới ứng dụng của mình

http: Cho phép bạn gửi các yêu cầu web và nhận về các phản hồi.

image-source: Cung cấp lớp  ImageSource làm nhiệm vụ đóng gói các vấn đề trìu tượng chung cho từng đối tượng ở nền tảng đích để xử lý ảnh

timer: Cho phép bạn tạo, khởi động, tạm dừng hay kích hoạt bộ hẹn giờ.

trace: Cho phép bạn dò và in ra các thông tin riêng dựa trên phân loại.

ui/image-cache: Cung cấp lớp Cache làm nhiệm vụ xử lý yêu cầu download ảnh và đặt chúng vào bộ đệm chung.

connectivity: Cho phép bạn kiểm tra kết nối Internet và giám sát việc thay đổi trạng thái.

Các module chức năng thiết bị (Device functionality modules)

camera: Cho phép bạn chụ ảnh với camera thiết bị.

location: Cho phép bạn sử dụng cảm biến toạ độ địa lý của thiết bị.

platform: Cung cấp thông tin về thiết bị, hệ điều hành và phần mềm.

fps-meter: Cho phép bạn nhận được thông tin đo đạc về số frame-trên-giây của ứng dụng.

file-system: Cho phép bạn làm việc với các hệ thống file của thiết bị. Trìu tượng hóa ở cấp cao cho các vấn đề như file, thư mục, các thư mục đặc biệt, đường dẫn, v.v..

ui/gestures: Cung cấp lớp GesturesObserver để cho phép bạn giám sát và phản hồi lại tương tác cảm ứng chạm của người dùng.

Các module dữ liệu (Data modules)

data/observable: Cung cấp lớp Observable thể hiện việc giám sát đối tượng hay dữ liệu theo mô hình Model-View-ViewModel (MVVM).

data/observable-array: Cung cấp lớp  ObservableArray để phát hiện và phản hồi lại các thay đổi của tập đối tượng.

data/virtual-array: Cung cấp lớp VirtualArray là một lớp nâng cao trong xử lý mảng để trợ giúp nạp các thành phần theo yêu cầu.

Các module giao diện người dùng (User interface modules)

ui/frame: Cung cấp lớp Frame thể hiện đơn vị logic View gắn với từng trường hợp điều hướng trong ứng dụng.

ui/page: Cung cấp lớp Page thể hiện một đơn vị logic cho việc điều hướng bên trong một Frame. Các ứng dụng NativeScript chứ nhiều trang.

color: Cho phép bạn tạo các màu sắc để dùng trong việc định kiểu UI.

text/formatted-string: Cung cấp lớp FormattedString và Span cho phép bạn tạo các nội dung được định dạng rich text.

xml: Cung cấp lớp XmlParser là một bộ phân tích SAX thuận tiện cho việc thực thi sax.

ui/styling: Cung cấp lớp Style để phản hồi lại việc hiển thị của các phần tử.

ui/animation: Cung cấp lớp Animation cho phép bạn tạo hiệu ứng hoạt hình các view thông qua các thuộc tính.

Bố cục (Layouts)

ui/layouts/stack-layout: Cung cấp lớp StackLayout cho phép bạn sắp xếp các layout con theo một đường.

ui/layouts/grid-layout: Cung cấp lớp GridLayout cho phép bạn sắp xếp các layout con vào vùng ô lưới gắn với các hàng và cột.

ui/layouts/absolute-layout: Cung cấp lớp AbsoluteLayout cho phép bạn sắp xếp các layout con với vị trí tùy ý hay đặt chúng trên nhiều lớp.

ui/layouts/wrap-layout: Cung cấp lớp WrapLayout cho phép bạn sắp xếp layout con theo một thứ tự tuần tự từ trái sang phải và tự ngắt dòng.

Widgets

ui/activity-indicator: Cung cấp lớp ActivityIndicator thể hiện một widget để hiển thị rằng một dịch vụ hiện đang bận xử lý.

ui/button: Cung cấp lớp Button là một widget nút bấm chuẩn.

ui/label: Cung cấp lớp Label là một widget nhãn chuẩn.

ui/text-field: Cung cấp lớp TextField thể hiện một hộp nhập text một dòng.

ui/text-view: Cung cấp lớp TextView thể hiện một hộp nhập text nhiều dòng.

ui/list-view: Cung cấp lớp ListView thể hiện một widget view danh sách chuẩn.

ui/image: Cung cấp lớp Image thể hiện một widget ảnh.

ui/progress: Cung cấp lớp Progress thể hiện thông báo tiến trình xử lý hay đang nạp.

ui/scroll-view: Cung cấp lớp ScrollView thể hiện một vùng được phép cuộn với các nội dung lớn hơn vùng hiển thị.

ui/search-bar: Cung cấp lớp SearchBar thể hiện một thành phần search bar chuẩn.

ui/slider: Cung cấp lớp Slider thể hiện một thành phần trượt chuẩn.

ui/switch: Cung cấp lớp Switch thể hiện một thành phần chuyển mạch chuẩn.

ui/tab-view: Cung cấp lớp TabView thể hiện một thành phần nội dung chuẩn có các tab.

ui/web-view: Cung cấp lớp WebView thể hiện widget trình duyệt chuẩn.

ui/html-view: Cung cấp lớp HtmlView thể hiện một widget view html chuẩn.

ui/dialogs: Cho phép bạn hiển thị nhiều hộp hội thoại khác nhau như cảnh báo (alert), hộp nhập (prompt), xác nhận (confirmation) và các các hộp hội thoại khác.

ui/list-picker: Cung cấp lớp ListPicker thể hiện một thành phần chọn từ danh sách chuẩn.

ui/date-picker: Cung cấp lớp DatePicker thể hiện một thành phần chọn ngày chuẩn.

ui/time-picker: Cung cấp lớp TimePicker thể hiện một thành phần chọn giờ chuẩn.

ui/placeholder: Cung cấp lớp Placeholder cho phép bạn thêm một widget native vào cây hiển thị.


vertical_align_top
share
Chat...