[Building a Super App] Tini Recycle Library

Tini App tiết kiệm thời gian khá nhiều để bạn phát triển một ứng dụng, từ bước setup môi trường, code cho tới triển khai lên Tini App. Tuy nhiên, là một framework mới nên sẽ còn rất nhiều thiếu sót và các thư viện hỗ trợ cũng hạn chế. Vì vậy, Tini Community giới thiệu đến bạn thư viện tini-recycle, nhằm giúp bạn tăng tốc độ code cho một dự án lớn. Cùng hiểu thư viện tini-recycle qua bài viết dưới đây.

I. Vì sao sử dụng tini-recycle

Bây giờ, các bạn xem 2 code mẫu bên dưới

// page1/index.js
Page({
    data: { user: null, loading: true },
    async onLoad() {
        this.setData({ loading: true });
        let user = await getCurrentUser();
        if (!user) user = await this.login();
        this.setData({ user, loading: false });
    },
    async login() {
        // Logic To Login
    },
});
// page2/index.js
Page({
    data: { user: null, loading: true },
    async onLoad() {
        this.setData({ loading: true });
        let user = await getCurrentUser();
        if (!user) user = await this.login();
        this.setData({ user, loading: false });
    },
    async login() {
        // Logic To Login
    },
});

Các bạn có thể thấy, 2 page không khác nhau lắm về flow login của user nhưng phải lặp lại 2 lần. Các bạn có thể tách các function login để sử dụng lại. Tuy nhiên, phần onLoad các bạn không có cách nào tách ra được vì có các method như this.setData.

Vậy hướng giải quyết là gì? Tini Recycle sẽ giúp bạn giải quyết vấn đề này

II. Sử dụng Tini Recycle như thế nào

1. Cài đặt

yarn add tini-recycle
Hoặc
npm install --save tini-recycle

2. Basic Code

import { $page } from "tini-recycle";

const authHook = () => [
    {
        data: { user: null, loading: true },
        async onLoad() {
            this.setData({ loading: true });
            let user = await getCurrentUser();
            if (!user) user = await this.login();
            this.setData({ user, loading: false });
        },
        async login() {
            // Logic To Login
        },
    },
];

$page(
    authHook(),
    {
        data: {
            // others state
        },
        onTap() {
            console.log(this.data.user, this.data.loading)
            // Return user and loading data
        }
    }
);

3. Các method

import { $page, $component, hooks } from "tini-recycle"
$page(...hooks: Hook[])
$component(...hooks: Hook[])

type Config = TiniPageConfig | TiniComponentConfig;
type Hook = Config | [Hook] | (config: Config) => Hook

III. Các hooks thường dùng

1. Cài đặt

import { hooks } from "tini-recycle"

hooks.hookLoadMore Chỉ support cho $page

type Option = {
    throttleWait: number, // default 50 - Nhận sự kiện scroll mỗi {throttleWait} giây
    threshold: number, // default 1000 - Nhận sự kiện khi end of scroll trước {threshold}px
    disabled: boolean, // default fale - Stop sự kiện loadmore
    methodName: string, // default "onLoadMore" - Tên method được gọi khi cuộn xuống dưới cùng
}
hooks.hookLoadMore: (option: Option) => any

Ví dụ

$page(
    hooks.hookLoadMore({ methodName: 'onLoadMore', throttleWait: 50, threshold: 300 }),
    {
        data: {
            items: [],
        },
        page: 1,
        async onLoadMore() {
            const { items, page } = await api.getItems({ page: this.page });
            this.page = page;
            this.setData({ items: [...this.data.items, ...items] });
        }
    }
)

hooks.hookQueryParser Hook giúp chuyển giá trị query trong onLoad từ string sang Object Chi tiết: Tham khảo trang developers.tiki.vn

() => any
$page(
    hooks.hookQueryParser(),
    {
        onLoad(query) {
            console.log(typeof query); // Object not string
        },
    }
);

hooks.hookMapPropsToMethods

(mapping: Record<[methodName: string],[propName: string]>) => any

Ví dụ

$component(
    hooks.hookMapPropsToMethods(["handleLogin", "onLogin"]),
    {
        onTap() {
            this.handleTap(); // === this.props.onLogin()
        },
    }
);

hooks.hookMapPropsToData

type Data = Record<string,any>;
type Props = Record<string,any>;
((props: Props, data: Data) => [newData: Data]) => any

Ví dụ

$component(
    hooks.hookMapPropsToData(function (props) {
        return { id: props.id.toString() };
    }),
    {
        onTap() {
            console.log(this.data.id);
        },
    }
);

IV. Global Hooks

Ở trên các bạn sẽ sử dụng các hook cho từng page. Ví dụ hooks.hookQueryParser() gần như page nào cũng sử dụng. Vậy cách nào để apply nó cho tất cả page

// app.js
$page.addBeforeAll(hooks.hookQueryParser());

Ngoài ra Tini Recycle còn cung cấp các method global hook khác như

// app.js
$page.addBeforeAll(hook: Hook);
$page.addAfterAll(hook: Hook);
$component.addBeforeAll(hook: Hook);
$component.addAfterAll(hook: Hook);

V. Tổng kết

Nội dung trên đã giới thiệu qua về Tini Recycle, các hook cơ bản cho một dự án Tini App. Các bài viết sau sẽ giới thiệu một số addvance hook để có thể giúp các bạn code tốt hơn. Ngoài ra, nếu có nhu cầu sử dụng hook nào khác, đừng ngại để lại comment, đội ngũ Tini App sẽ hỗ trợ.

Bạn có thể xem thêm các bài viết:

1 Like