隨著這幾年前端技術(shù)的崛起,作為前端UI骨架的布局系統(tǒng)也在其中占據(jù)了越來(lái)越重要的位置。不管是在移動(dòng)端、桌面端還是Web端,特別是不同設(shè)備的屏幕大小和分辨率千變?nèi)f化,如何構(gòu)建良好的布局系統(tǒng)以便應(yīng)付這些變化已經(jīng)變得越來(lái)越重要。
目前,各個(gè)平臺(tái)都有自己的一套解決方案。iOS平臺(tái)有自動(dòng)布局系統(tǒng),Android有容器布局系統(tǒng),而Web端有基于CSS的布局系統(tǒng)。多種布局系統(tǒng)共存所帶來(lái)的弊端是很明顯的,平臺(tái)間的共享變得很困難,而每個(gè)平臺(tái)都需要專人來(lái)開發(fā)維護(hù),增加了開發(fā)成本。
Facebook在這個(gè)問(wèn)題上沒有少下功夫。首先,F(xiàn)acebook在React Native里引入了一種跨平臺(tái)的基于CSS的布局系統(tǒng),它實(shí)現(xiàn)了Flexbox規(guī)范?;谶@個(gè)布局系統(tǒng),不同團(tuán)隊(duì)終于可以走到一起,一起解決缺陷,改進(jìn)性能,讓這個(gè)系統(tǒng)更加地貼合Flexbox規(guī)范。
隨著這個(gè)系統(tǒng)的不斷完善,F(xiàn)acebook決定對(duì)它進(jìn)行重啟發(fā)布,并取名Yoga。雖然目前還不知道為什么會(huì)給它取名Yoga,但從字面理解——瑜伽——我們很自然地聯(lián)想起柔韌、舒展、變化等名詞,這個(gè)跟布局系統(tǒng)的跨平臺(tái)特性似乎不謀而合。借助Yoga,開發(fā)人員不僅可以在React Native里,還能在各個(gè)平臺(tái)上快速地構(gòu)建UI布局。
Yoga是基于C實(shí)現(xiàn)的。之所以選擇C,首先當(dāng)然是從性能方面考慮的?;贑實(shí)現(xiàn)的Yoga比之前Java實(shí)現(xiàn)在性能上提升了33%。其次,使用C實(shí)現(xiàn)可以更容易地跟其它平臺(tái)集成。到目前為止,Yoga已經(jīng)有以下幾個(gè)平臺(tái)的綁定:Java(Android)、Objective-C(UIKit)、C#(.NET)。而且已經(jīng)有很多項(xiàng)目在使用Yoga,比如React Native、Components for Android、Oculus,等等。
不同于其它的一些布局框架,比如bootstrap的柵格系統(tǒng)或Masonry,它們要么不夠強(qiáng)大,要么不支持跨平臺(tái)。Yoga遵循了Flexbox規(guī)范,同時(shí)又將布局元素抽象成Node,為各個(gè)不同平臺(tái)暴露出一組標(biāo)準(zhǔn)的接口,這樣不同的平臺(tái)只需實(shí)現(xiàn)這些接口就可以了。
當(dāng)然,F(xiàn)acebook不會(huì)就此止步。作為一款跨平臺(tái)的布局引擎,自然需要各個(gè)平臺(tái)的開發(fā)人員一起努力來(lái)促進(jìn)它的發(fā)展,所以Facebook把Yoga開源了。目前微軟已經(jīng)成為Yoga的貢獻(xiàn)者之一,他們不僅修復(fù)缺陷,還為Yoga帶來(lái)新的特性。
除了完全遵循Flexbox規(guī)范,F(xiàn)acebook還計(jì)劃在未來(lái)為Yoga加入更多特性,這些特性將超出Flexbox的范疇。
Yoga的源碼托管在GitHub上,有興趣開發(fā)人員可以在上面進(jìn)行反饋。