Yoga: A cross-platform layout engine

Bài đăng này đã không được cập nhật trong 3 năm

Layout là thành phần quan trọng trong việc xây dựng giao diện người dùng cho bất kỳ loại thiết bị nào như mobile, destop hay web app, vì chúng mô tả kích thước và vị trí của views trên màn hình và mối quan hệ giữa các thành phần.

Ngày nay, layout đc xử lý khác nhau trên từng nên tàng, thông qua hệ thống Auto Layout trên iOS, composable containers trên Android, hay css trên web. Những dạng layout trên sẽ gây khó khăn cho team phát triển sản phẩm trong việc chia sẽ giải pháp giữa những nền tảng và sẽ làm tăng thêm thời gian phát triên sản phẩm vì phải fix những lỗi layout trên từng nền tảng.

Tại Facebook, chúng tôi muốn engineers có thể xây dựng sản phẩm cho nhiêu nền tảng mà ko cần phải học thêm những hệ thống layout mới cho từng nền tảng riêng biệt. Với React Native, chúng tôi sử dụng Flexbox spec để xây dựng layout cho đã nền tảng. Kể từ đó, các teams có thể cùng nhau fix bugs, performace và layout.

Hôm nay chúng tôi muốn giới thiệu 1 css-layout engine khác là Yoga, là một hệ thống độc lập được mở rộng từ React Native và cho phép các engineers product xây dựng layout nhanh chóng cho nhiều nền tảng.

Yoga được viết bằng ngôn ngữ C nhầm tối ưu hiệu năng, lên tới 33% so với java khi xay dựng layout trên Android. Ngoài ra C cũng dễ dàng tích hợp vào nhiều nên tảng khác nhau. Cho đến này, Yoga đã được tích hợp cho Java (Android), Objective-C (UIKit), và C# (.NET), và đang được sử dụng trong các project như React Native, Components for Android, and Oculus. Một vài màn hình trong Intagram cũng đã được viết lại bằng Yoga.

Đơn giản hoá những layouts phức tạp

Hãy cùng xem qua đoạn code sử dụng UIKit bindings. Giả sử ta sẽ viết layout cho bức ảnh dưới.

Với bất kỳ hệ thống layout nào, đều phải bắt đầu từ root. Ở đây, ta đã có kích thước và muốn khơi tạo view. UIKit bindings được viết theo category (design pattern) nên những view có sẵn có thể dễ dàng chuyển đổi sang Yoga.

UIView *root = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 500, 300)];
[root yg_setUsesYoga:YES];

Tiếp đến, sẽ tạo Image. Chúng ta ko cần phải xác định kích thước ảnh, Yoga sẽ làm việc đó. Mặc định, views sẽ căng ra đúng với kích thước của view cha, bằng cách dùng flexGrow chiều cao ảnh sẽ = chiều cao view - chiều cao text

UIImageView *image = [UIImageView new];
[image yg_setUsesYoga:YES];
[image yg_setFlexGrow:1];
[root addSubview:image];

Bước cuối cùng, sẽ tạo label để hiển thị text và sẽ set margin. Chú ý ko cần phải set height của label, Yoga sẽ sẽ làm việc đó giúp bạn.

UILabel *text = [UILabel new];
[text yg_setUsesYoga:YES];
[text yg_setMargin:20 forEdge:YGEdgeAll];
[root addSubview:text];

Khi đã set up xong view cần phải dùng Yoga để tính toán các view ở root views.

[root yg_applyLayout];

Vấn đề hiệu năng của Yoga được xem xét rất cẩn thận. Khi đang xây dựng layout, tất cả các thành phần sẽ mất 1 khoảng thời gian dài đẻ xử lý nên các views sẽ được tính toán lại ít nhất có thể, ở đây là 1 lần. Ngoài ra trong những lần gọi yg_applyLayout sau Yoga sẽ chỉ tính toán lại các views có sự thay đổi.

Open source

Để hoàn thiện trên nhiều nền tảng, Yoga cần sự đóng góp của những chuyên gia trên nhiều nền tảng và framework. Microsoft là công ty đóng góp quan trọng của Yoga, bao gồm việc fix lỗi và những tính năng mới.

Thúc đẩy sự phát triển của Yoga bằng việc cho phép developers trên tất cả các nền tàng cùng thảo luận và tối ưu layout. Việc chỉa sẻ các layout dùng chung của tất cả các nền tảng cho phép nhà phát triển chỉ cần tối ưu hiệu năng một lần.

Yoga github. https://facebook.github.io/yoga/