Tini Recycle Library

Chào các bạn, lại là mình đây. Vậy là đã gần một năm kể từ khi mình bắt đầu dùng Tini App. Mình thấy 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 nó lên Tiki App. Tuy nhiên, do 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, hôm nay mình sẽ hướng dẫn các bạn thư viện tini-recycle để tăng tốc độ code của bạn cho một dự án lớn.

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

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: https://developers.tiki.vn/docs/framework/miniapp-page/life-cycle#onload

() => 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

Ở trên mình đã giới thiệu qua về Tini Recycle, các hook cơ bản cho một dự án Tini App. Ở bài viết sau mình sẽ giới thiệu cho các bạn một số addvance hook để các bạn có thể code pro hơn nhé. Ngoài ra các bạn có nhu cầu sử dụng hook nào khác thì đừng ngại để dưới comment nhé. Mình sẽ hỗ trợ bạn hết mình 😘😘😘

Github: https://github.com/huynguyen6tiki/tini-recycle