如何評價 Facebook開源的 YOGA？

01-03

跨平檯布局庫 Yoga

單純技術上沒啥複雜的，應該被實現好多次了，畢竟比瀏覽器還簡單的布局系統。但是從戰略意義上，也許非常值得記一筆。最近微信小程序和 weex 的事情讓我很警覺，前端是不是要變天了？

Google 經營了那麼多年，到 polymer 這檔事情各種吐槽，angular 也是吐槽不斷，pwa 也推得像是只賣吆喝，反而 Facebook 搞的稀奇古怪的玩意搶盡了風頭。還有 react native，竟然玩出了這麼大的局面。瀏覽器平台 js 作為唯一語言頻頻受到挑戰，接下來還有 webassembly 的重擊。react native 是個例子，用 HTML5 技術來做 app，效果並不好，也許好要很多年，但是在原生平台實現 HTML5 部分的特性，來達到接近原生 app 的體驗，看來很有可能啊。如果各個大廠合縱連橫開始玩，把傳統的瀏覽器逼進角落也不是沒有可能的事情。

這樣的局面之下，用 js 作為 DSL 描述業務，然後跨平台運行 app 很有可能。除了純粹的業務，還有一部分重要的可以公用的代碼是界面設計，也就是組件和布局。這樣看來複用布局演算法實際上是整個大棋局上某個標誌性事件，我說可能性。所以我個人對這個本事沒啥技術突破性的庫還是狠在意的。

還沒試用過，剛看了下facebook/Yoga 官網，單看概概念很棒。

一句話講：facebook/Yoga 是一個CSS3/Flexbox 的跨平台實現（不再限於html）。

CSS3/Flexbox

在html中，有兩個方案拯救了前端布局，適應了移動互聯網（mobile）的發展，主要應用就是「自適應布局」。這兩個方案：其中一個是CSS3標準的Flexbox；另一個是以bootstrap為主的，一系列前端框架中的柵格系統（grid system）。

CSS3/Flex主要解決布局中的問題(此處稱flexbox布局以前為傳統布局)：

方向性（傳統布局方向是從左向右，從上至下）

彈性伸縮（傳統尺寸定義是通過像素等來精確定義）

元素對齊

這幾個方面，通過Flexbox都算是完美解決。

facebook/Yoga

但CSS3/Flexbox僅限於html中(或其子集的實現，如RN)，而布局的需要則不止於此。傳統的桌面程序（不同平台，不同語言，不同框架）都有布局的實現，即然Flexbox很強大，所以被移植過去。

感慨：這真是一個WEB前端崛起的時代。各種解決方案輸出向其它領域。

現在有很多開源的布局庫了，大致就分為兩種：一種就是單純對系統 API 的封裝，另一種就是擁有自己的 Concept 和 Engine 的框架。

第一種其實沒什麼技術含量，無非是將系統的 API 封裝為一些便利類，增添一些語法糖（比如鏈式調用），增加版本處理等等。典型代表如 iOS 的 Masonry。這類庫是不能做到跨平台的，因為其它平台壓根就沒有它所依賴的布局 API。

第二種已經有自己的理念和自己實現的布局演算法和引擎了，之前見過一個不怎麼熱門的庫：

brickkit-ios，它是一個基於 UICollectionView 的布局庫，自己實現了一些布局邏輯，但是它的跨平台性也幾乎沒有，雖然布局演算法是自己的，但是因為與系統 API 耦合太大，移植的難度很高。

而對於 yoga，它有自己的理念與演算法，採用 Flexbox 的布局理念，同時又將布局元素抽象成 Node，暴露出不同平台間都支持的介面，這樣核心的部分直接用 C / C++ 寫，其它平台對 Node 進行擴展實現即可。這樣一來不僅僅能支持 native 應用，連 Web 甚至 TTY 程序也可以支持，這與其它框架相比就是一大進步了。

但是至於 YOGA 布局性能如何還有待測試，有興趣可以自己 clone 下來玩一玩，但是目測侵入性比較強，至少使用 YOGA 布局的 Node 內部就不能再用 AutoLayout 了。