布局引擎 Flexbox

Question

随着前端技术的崛起，作为前端 UI 骨架的布局系统也在其中占据着重要的位置。

我们思考下两个问题：

1. 设备屏幕大小和分辨率千变万化，如何构建良好的布局系统以应付这些变化？
2. 各个平台都有自己的一套布局方案，比如 iOS 有自动布局系统，Android 有容器布局系统，而 Web 端有基于 CSS 的布局系统。多种布局系统共存，怎么降低开发成本？

答案就是：Flexbox！

布局方案 —— Flexbox

A Complete Guide to Flexbox

一份完整的指导手册，内容大部分是根据 w3c 的文章来写的，每个属性都给出了示例图，非常容易理解。

Flexbox 布局详解

英文不好的小伙伴可以看这份翻译的指导手册。

应用方案

Yoga

Facebook 在 React Native 里引入了一种跨平台的基于 CSS 的布局系统 Yoga，Yoga 遵循了 Flexbox 规范，同时又将布局元素抽象成 Node，为各个不同平台暴露出一组标准的接口，不同的平台只需实现这些接口即可，这让开发人员不仅可以在 React Native 里，还能在各个平台上快速地构建 UI 布局。

到目前为止，Yoga 已经有以下几个平台的绑定：Java（Android）、Objective-C（UIKit）、C#（.NET）。而且已经有很多项目在使用 Yoga，除了 React Native，还有 Components for Android、Oculus……

Litho

Litho 是一个高效构建 Android UI 的声明式框架。颠覆式提出了高效回收 View 的策略，使得复杂数据流的绘制更加迅速，滑动更加流畅。

Litho 简介

清晰说明了 Litho 诞生的背景，所要解决的问题，以及具体是如何解决问题的。

说一说 Facebook 开源的 Litho

作者阐述了自己对 Litho 的分析与想法，Litho 理念虽然先进，但也存在开发体验差、不支持复杂动画等缺点，对于一般的应用来讲，常规的优化手段已经完全可以满足需求。Litho还是更适用于对性能优化有强烈需求的应用。

小结

Yoga、Litho和React Native简要对比

UI框架归根结底有两种实现，一种是基于原生框架做封装，提供一种语法糖功能，一种是自己实现了整套引擎。Yoga属于第一种，Litho属于第二种。