Yoga is a New Open Source, Cross Platform Layout Engine

NewsDoru Ciobanu • December 08, 2016 • 3 minutes READ

Every great design starts with a great layout.

The key element of any user interface is the layout. Layouts establish consistency between interface elements so that page visitors or app users will enjoy a great experience on a website or mobile application. Further, a consistent layout saves a lot of developer hours.

Over time, developers had to adapt to different screen sizes, technologies and UX paradigms. Ten years ago, a 1024X768 resolution was the most common display resolution. Now, this accounts for less than 4 percent of screens. While we can’t predict the future, we’ll probably switch to holographic displays and 3D interfaces. Until then, virtual and augmented reality, in-car displays or wearables are an ongoing revolution. Things are going to get complicated.

However, a great design will always be based on a well thought layout. Ideally, to deliver a seamless, intact and consistent experience across platforms, a unique layout system should be used. Unfortunately, in practice, universal cross platform solutions are still not polished enough. That’s why we use auto layout on iOS, composable containers on Android, and different CSS-based frameworks on the web. The diverse set of layout systems makes building for several platforms inconsistent and convoluted. When targeting different platforms, specific platform bugs are significantly contributing to delays, additional expenses and lost developer hours.

Yoga – The Layout Engine

Facebook aims to mitigate this issue by implementing a cross-platform layout library based on the Flexbox specification. Used internally at Facebook, Yoga, a CSS-layout, has been released to the general public. While Facebook intends to keep the library fully compatible with the specification, it will add additional functionality and properties to Yoga, in order to cover a wider area of use case scenarios.

Technically, Yoga is a stand-alone layout engine that allows developers to build layouts for multiple platforms. Specifically designed for this purpose, Yoga won’t support tables, floats or styling properties that have no impact on layouts.

Yoga is based on C for speed but can be extended to more platforms and frameworks. If you are proficient in either Java, C#, Objective-C or C, then you’re ready to work with the library. For now, the cross-platform library is being used for projects such as React Native, Components for Android and Oculus. In the near future, the CSS-layout will also be incorporated into the ComponentKit. Some code samples are available on Yoga’s Github page. Dive into them, and you’ll see the immense potential that Yoga has.

Installing Yoga

Installing Yoga is a manual process. Add the library as a git submodule and build Yoga with Buck. Buck is not required for using Yoga as you can use a more traditional approach by integrating the library into your existing build system by including the C library from the root yoga directory and the language bindings you intend to use. There is a built-in example to get you started. Two lines of code will get it running.

$ git clone https://github.com/facebook/yoga
$ open yoga/YogaKit/YogaKitSample/YogaKitSample.xcodeproj

For the lazy ones, there is a JSFiddle for testing the library.

Obviously, Yoga will be available on various management systems. While an exact date is not set, it is expected somewhere around the first quarter of 2017.

Have a look at some Yoga examples. If you like what you see, then you can become a contributor. Will Yoga become an essential tool for any developer engineering user interfaces? Time will tell, but with backing from Facebook and Microsoft, Yoga is set to have a bright future.