当前位置:统一通信/协作企业动态 → 正文

Facebook开源跨平台前端布局引擎Yoga

责任编辑:editor004 作者:薛命灯 |来源:企业网D1Net  2016-12-20 11:31:55 本文摘自:INFOQ

随着这几年前端技术的崛起,作为前端UI骨架的布局系统也在其中占据了越来越重要的位置。不管是在移动端、桌面端还是Web端,特别是不同设备的屏幕大小和分辨率千变万化,如何构建良好的布局系统以便应付这些变化已经变得越来越重要。

目前,各个平台都有自己的一套解决方案。iOS平台有自动布局系统,Android有容器布局系统,而Web端有基于CSS的布局系统。多种布局系统共存所带来的弊端是很明显的,平台间的共享变得很困难,而每个平台都需要专人来开发维护,增加了开发成本。

Facebook在这个问题上没有少下功夫。首先,Facebook在React Native里引入了一种跨平台的基于CSS的布局系统,它实现了Flexbox规范。基于这个布局系统,不同团队终于可以走到一起,一起解决缺陷,改进性能,让这个系统更加地贴合Flexbox规范。

随着这个系统的不断完善,Facebook决定对它进行重启发布,并取名Yoga。虽然目前还不知道为什么会给它取名Yoga,但从字面理解——瑜伽——我们很自然地联想起柔韧、舒展、变化等名词,这个跟布局系统的跨平台特性似乎不谋而合。借助Yoga,开发人员不仅可以在React Native里,还能在各个平台上快速地构建UI布局。

Yoga是基于C实现的。之所以选择C,首先当然是从性能方面考虑的。基于C实现的Yoga比之前Java实现在性能上提升了33%。其次,使用C实现可以更容易地跟其它平台集成。到目前为止,Yoga已经有以下几个平台的绑定:Java(Android)、Objective-C(UIKit)、C#(.NET)。而且已经有很多项目在使用Yoga,比如React Native、Components for Android、Oculus,等等。

不同于其它的一些布局框架,比如bootstrap的栅格系统或Masonry,它们要么不够强大,要么不支持跨平台。Yoga遵循了Flexbox规范,同时又将布局元素抽象成Node,为各个不同平台暴露出一组标准的接口,这样不同的平台只需实现这些接口就可以了。

当然,Facebook不会就此止步。作为一款跨平台的布局引擎,自然需要各个平台的开发人员一起努力来促进它的发展,所以Facebook把Yoga开源了。目前微软已经成为Yoga的贡献者之一,他们不仅修复缺陷,还为Yoga带来新的特性。

除了完全遵循Flexbox规范,Facebook还计划在未来为Yoga加入更多特性,这些特性将超出Flexbox的范畴。

Yoga的源码托管在GitHub上,有兴趣开发人员可以在上面进行反馈。

关键字:YOGAFacebook

本文摘自:INFOQ

x Facebook开源跨平台前端布局引擎Yoga 扫一扫
分享本文到朋友圈
当前位置:统一通信/协作企业动态 → 正文

Facebook开源跨平台前端布局引擎Yoga

责任编辑:editor004 作者:薛命灯 |来源:企业网D1Net  2016-12-20 11:31:55 本文摘自:INFOQ

随着这几年前端技术的崛起,作为前端UI骨架的布局系统也在其中占据了越来越重要的位置。不管是在移动端、桌面端还是Web端,特别是不同设备的屏幕大小和分辨率千变万化,如何构建良好的布局系统以便应付这些变化已经变得越来越重要。

目前,各个平台都有自己的一套解决方案。iOS平台有自动布局系统,Android有容器布局系统,而Web端有基于CSS的布局系统。多种布局系统共存所带来的弊端是很明显的,平台间的共享变得很困难,而每个平台都需要专人来开发维护,增加了开发成本。

Facebook在这个问题上没有少下功夫。首先,Facebook在React Native里引入了一种跨平台的基于CSS的布局系统,它实现了Flexbox规范。基于这个布局系统,不同团队终于可以走到一起,一起解决缺陷,改进性能,让这个系统更加地贴合Flexbox规范。

随着这个系统的不断完善,Facebook决定对它进行重启发布,并取名Yoga。虽然目前还不知道为什么会给它取名Yoga,但从字面理解——瑜伽——我们很自然地联想起柔韧、舒展、变化等名词,这个跟布局系统的跨平台特性似乎不谋而合。借助Yoga,开发人员不仅可以在React Native里,还能在各个平台上快速地构建UI布局。

Yoga是基于C实现的。之所以选择C,首先当然是从性能方面考虑的。基于C实现的Yoga比之前Java实现在性能上提升了33%。其次,使用C实现可以更容易地跟其它平台集成。到目前为止,Yoga已经有以下几个平台的绑定:Java(Android)、Objective-C(UIKit)、C#(.NET)。而且已经有很多项目在使用Yoga,比如React Native、Components for Android、Oculus,等等。

不同于其它的一些布局框架,比如bootstrap的栅格系统或Masonry,它们要么不够强大,要么不支持跨平台。Yoga遵循了Flexbox规范,同时又将布局元素抽象成Node,为各个不同平台暴露出一组标准的接口,这样不同的平台只需实现这些接口就可以了。

当然,Facebook不会就此止步。作为一款跨平台的布局引擎,自然需要各个平台的开发人员一起努力来促进它的发展,所以Facebook把Yoga开源了。目前微软已经成为Yoga的贡献者之一,他们不仅修复缺陷,还为Yoga带来新的特性。

除了完全遵循Flexbox规范,Facebook还计划在未来为Yoga加入更多特性,这些特性将超出Flexbox的范畴。

Yoga的源码托管在GitHub上,有兴趣开发人员可以在上面进行反馈。

关键字:YOGAFacebook

本文摘自:INFOQ

电子周刊
回到顶部

关于我们联系我们版权声明隐私条款广告服务友情链接投稿中心招贤纳士

企业网版权所有 ©2010-2024 京ICP备09108050号-6 京公网安备 11010502049343号

^