Tổng quan về framework

Tini App Framework được thiết kế để cho phép các nhà phát triển xây dựng ứng dụng của mình với trải nghiệm native app trên nền tảng Tiki một cách dễ dàng và đa dạng tính năng nhất có thể.

Một ứng dụng Tini App bao gồm 2 thành phần chính đó là app và page. Trong đó app là thể hiện của toàn ứng dụng (tương đương với UIApplicationDelegate của iOS hoặc Application của android). Page là đại diện của một màn hình trong ứng dụng và trong một ứng dụng sẽ có thể bao gồm một hoặc nhiều pages.

Cấu trúc thư mục của một Tini App đơn giản sẽ bao gồm:

- miniapp-project/
 |- src/
   |- pages/
     |- index/
     |  index.js
     |  index.json
     |  index.txml
     |  index.tcss
   |  app.js
   |  app.json
   |  app.tcss
 |  package.json

Đại diện của app bao gồm 3 files và phải được đặt ở thư mục gốc của dự án:

Tập tin	Bắt buộc	Mô tả
app.js	✓	Logic của ứng dụng
app.json	✓	Cấu hình cho ứng dụng
app.tcss	✕	StyleSheet cho toàn ứng dụng

Mỗi page trong app bao gồm các files sau và được đặt trong thư mục bất kỳ từ thư mục gốc của dự án:

Tập tin	Bắt buộc	Mô tả
index.js	✓	Logic của page
index.txml	✓	Thể hiện UI của page sử dụng txml syntax
index.tcss	✕	StyleSheet áp dụng cho page
index.json	✕	Cấu hình của page

Note: Tên file có thể là bất kỳ và tất cả các loại file cần có cùng tên và phải cùng đặt chung thư mục.

Reactive Data Binding

Mỗi màn hình trên Tini App được phân tách thành 2 layers riêng biệt là Logic Layer và View Layer. Việc phát triển View Layer sử dụng syntax txml. Logic Layer thì được phát triển sử sử dụng ngôn ngữ Javascript. Và việc trao đổi thông tin giữa 2 layers này dựa trên hệ thống reactive data binding.

Nói một cách khác 2 layers dù tách biệt nhưng vẫn luôn được đồng bộ. Một khi dữ liệu thay đổi từ logic layer sẽ được update lập tức tương ứng trên view layer.

<view>
  <text>Hello {{name}}</text>
</view>

Page({
  data: {
    name: 'Guest'
  },
  onLoad() {
    // set data để thay đổi view
    this.setData({
      name: 'Nguyen Van A'
    });
  }
});

Trong ví dụ trên biến name trong object data ở logic layer sẽ được bind với biết name ở view layer.

Khi ứng dụng được chạy, hàm onLoad sẽ được chạy và việc setData({ name }) sẽ lập từng cập nhật biến name ở trong data ở view layer.

Quản lý Page

Việc chuyển đổi giữa các màn hình hoàn toàn được quản lý bởi framework và cung cấp rất nhiều cơ chế mở để nhà phát triển có thể chuyển đổi giữa các page một cách dễ dàng.

Ngoài ra framework cũng cung cấp rất đa dạng lifecycle của một page, để nhà phát triển có thể tuỳ biến theo mọi nhu cầu của việc phát triển một ứng dụng.

Tất cả các hoạt động phức tạp đều được xử lý bởi framework, nhờ đó nhà phát triển có thể tập trung vào business logic của mình thông qua việc thay đổi data hoặc handle các page lifecycle methods. Việc này sẽ giúp rút ngắn rất nhiều quy trình phát triển một ứng dụng.

// Ví dụ 1 page logic với các lifecycle methods
Page({
  data: {},
  onLoad(query) {},
  onReady() {},
  onShow() {},
  onHide() {},
  onUnload() {}
});

Components

Framework cung cấp nhiều nhất có thể các UI Components từ đơn giản tới phức tạp theo design system của Tiki. Bằng cách kết hợp các thành phần đó lại, nhà phát triển có thể xây dựng các ứng dụng với những trải nghiệm tốt nhất cho khách hàng với thời gian ngắn nhất.

JSAPIs

Bên cạnh các UI Components thì framework còn cung cấp đa dạng các JSAPIs giúp nhà phát triển dễ dàng sử dụng các tính năng của thiết bị cũng như các dịch vụ của Tiki.