[Thông báo] thay đổi về kiến trúc bên trong của custom component

Ở tiniapp, team luôn cố gắng cải thiện sản phẩm làm sao để việc phát triển ứng dụng thuận tiện hơn, nhanh hơn và cũng như chất lượng hơn. Tuy nhiên sẽ có những thay đổi với mục tiêu đó có thể dẫn tới việc không tương thích cho những apps hiện tại. Ở trong các phiên bản framework sắp tới, team xin thông báo tới các developers về một số thay đổi có thể ảnh hưởng tới ứng dụng của bạn trên Tiki.

Để xác định xem ứng dụng của mình có ảnh hưởng không, các bạn có thể tải và sửu dụng beta studio ở link:

https://tiniapp-media.tikicdn.com/tini-studio/prod/1.20.26/macosx/Tini-App-Studio-v1.20.26.dmg

Truy cập ứng dụng của bạn với latest framework ở link:

(cần phải có cài tiki app)

Những thay đổi trong kiến trúc component bao gồm:

1. Đồng bộ lifecycle giữa render và worker:

Ở tiniapp để phát triển tính năng bạn sẽ viết logic code (trong các file .js) và được chạy ở worker và define UI (trong các file .txml) được chạy ở render. Render và worker được chạy ở thread độc lập nhau được gọi là Worker Thread và Render Thread.

Logic của component sẽ thường như sau:

Component({
  onInit() {},
  didMount() {},
  deriveDataFromProps() {},
  didUpdate() {},
  didUnmount() {},
  methods: {
    doSth() {}
  }
})

Những hàm trong methods sẽ được gọi là component methods và ngoài đó là lifecycle methods.

Ở kiến trúc cũ, nhưng lifecycle methods có thể được gọi ngay cả trước sự confirm render về lifecycle liên quan.

Ví dụ: khi bạn setData(), framework sẽ tập tức fire didUpdate thay vì chờ render thực sự đổi UI lại.

Trong kiến trúc mới khi lifecycle fire thì bạn có thể tự tin là UI tương ứng đã được updated.

2. Tách biệt lifecycle methods và component methods

Ở trong kiến trúc cũ, component methods có thể được định nghĩa ngoài methods:

Component({
  didMount() {
    console.log(this.getMessage()); // hello world
  },
  getMessage() {
    return "hello world"
  },
});

Tuy nhiên với kiến trúc mới component bắt buộc phải năm trong methods

Sai:

Component({
  didMount() {
    console.log(this.getMessage()); // error undefined is not function
  },
  getMessage() {
    return "hello world"
  },
});

Đúng:

Component({
  didMount() {
    console.log(this.getMessage()); // hello world
  },
  methods: {
    getMessage() {
      return "hello world"
    },
  }
});

3. Bug fixes và improvement cho ref handler

Tìm hiểu thêm về ref ở đây: ref | Tini App

Thững thay đổi trên sẽ được release ở những framework chính thức sắp tới, các bạn có thể test ảnh hưởng của thay đổi với ứng dụng của mình dựa trên bản studio có để ở đầu bài hoặc theo dõi những warnings có thể có ở DevTools:

Nếu có bất kỳ feedback hoặc sự hỗ trợ nào các bạn chia sẻ trên thread này để team hỗ trợ sớm nhất có thể nhé. Rất xin lỗi vì sự bất tiện này và rất cám ơn các bạn đã đồng hành cùng Tiniapp team.

Thanks,
Viet.

2 Likes