Layouting solution about lightning HOT 5 CLOSED

Hi rybon,

Thanks for your suggestion!

Flexbox is nice when you need to target multiple devices/screen resolutions. But the main purpose of this framework is developing UIs on embedded devices and there the screen resolution is usually fixed. Also, the current layout system is tightly integrated with the rest of the framework and has a lot of specific optimizations. Using Flexbox would bring a bigger learning curve, more complexity and will not improve performance. So, to be honest, we think that it's not the way to go for us.

Kind regards,
Bas

from lightning.

Rybon, we started to realise that we needed a layout solution after all. I looked into Yoga but it’s written in C++ and compiled to wasm. Introducing a black box like that doesn’t feel right. I opted for writing my own to keep control over performance and features.

from lightning.

Cool. I was merely suggesting it, as it is used in React Native and other projects and has a familiar CSS flexbox API.

There might be other solutions out there as well. I think, having a drawing engine (Cairo / Skia), a text rendering engine (Pango or similar), a layouting engine such as Yoga and binding it all together in Node.js to an OpenGL drawing surface is all you really need. The only thing I'm not sure about is how to obtain FPS syncing with the display when something like requestAnimationFrame is not available in Node.js. I see you are using setTimeout, which works, but having direct access to the refresh rate via the display port and syncing to that would be preferable. Does Linux have support for that that Node.js can hook into?

Have you looked into Flutter and what can be learned from their approach? They basically use Skia and the Chrome text tendering engine and bind it to an OpenGL drawing context. They use Dart, but a have a sufficiently smart compiler that can compile the UI code down to assembly, making it very fast and efficient. My only gripe with it is that it isn't quite React-like enough (JSX syntax for example). But otherwise, very intriguing.

from lightning.

Your basic idea is right, though you will also need to provide textures, opengl commands and features such as z indexing and clipping.

As for vsync in opengl, that’s solved by the eglSwapBuffers command. We can simply use setImmediate and only fall back to setTimeout if no rendering needed to be performed (no changes on screen).

from lightning.

Implemented flexbox on master. See https://github.com/WebPlatformForEmbedded/Lightning/blob/master/examples/layout/layout.html

from lightning.