隨著這幾年前端技術(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)行反饋。