13 ms·
Yoga: A cross-platform layout engine
- smaili 10y agoPage - https://facebook.github.io/yoga/ https://facebook.github.io/yoga/ GitHub - https://github.com/facebook/yoga https://github.com/facebook/yoga
- olalonde 10y ago> Yoga also does not support styling properties that have no impact on layout, such as color or background properties. Does that mean that Yoga is too low level to be used directly by application developers? Who's the intended audience?
- wilonth 10y agoYoga is a Layout engine, not a UI or graphics engine. It's output is basically just the size and position of those objects put into it. So you'd need a bridge to use it for existing UI systems or build a new UI system on top of it (just like what React Native did).
- deleted 10y ago[deleted]
- phn 10y agoI'm especially happy to see the C in CSS go away. Flexbox and the explicit inheritance used in react native makes styling so much nicer.
- RubenSandwich 10y agoYoga's layout API is very similar, if not a direct copy, of the web's Flexbox. Which funny enough means that we might get a chance to use Flexbox on the desktop before we can use it on the web. (I'm looking at you IE and your continuing partial support: http://caniuse.com/flexbox http://caniuse.com/flexbox)
- alexkavon 10y agoI wouldn't hold my breath waiting for IE to fully support it.
- nightski 10y agoUh, Edge already fully supports it. I don't think they are adding new features to IE anymore.
- RubenSandwich 10y agoYou bring up a good point, in Windows 10 Edge is already the default browser. My comment is more joke then anything substantial. I think realistically anyone who isn't targeting enterprise could use Flexbox and be fine most of the time.
- spicyj 10y agoYes, it's directly based on CSS Flexbox. See more info about the similarities and differences here – in particular a few default values are different: https://facebook.github.io/yoga/docs/learn-more/ https://facebook.github.io/yoga/docs/learn-more/
- RubenSandwich 10y agoThank you for providing these excellent docs from day 1. Can I suggest that you change the background color of the flex item in the jsfiddle example of the default values, https://jsfiddle.net/emilsjolander/jckmwztt/ https://jsfiddle.net/emilsjolander/jckmwztt/, to something besides white as it took me a moment to realize that I was looking at a flex item as white backgrounds are very common.
- drcode 10y agoIs there a plan to add support for the extensions (especially AspectRatio) in React web? I would greatly welcome them.
- reitanqild 10y ago
- deleted 10y ago[deleted]
- crudbug 10y agoGreat work guys. I think now we can start on CSS => Compiled Style Sheets. :)
- sickbeard 10y agoLooks nice but the naming is wrong. We shouldn't expropriate well known names for tech solutions
- vortico 10y agoI think it's nice. It describes its function perfectly and "facebook yoga" will soon return this project in the first result.
- RyanZAG 10y agoCould be a big part behind companies re-purposing common words? If you give it a unique word, it becomes it's own thing. But if it's something like "Yoga", then you will always have to refer to it as "Facebook Yoga" which is very good for the Facebook brand.
- OldSchoolJohnny 10y agoI agree with you wholeheartedly about the naming. This is becoming a serious issue with many different things. Try to search for info about the visual studio "Code" editor for example. Facts and common sense are not fashionable in this age though unfortunately as evidenced by your (current) low vote on your comment.
- matt4077 10y agovscode. Also: It's not a "fact" that such names are a bad choice. It's an opinion. Personally I prefer evocative names, and that requires – almost by definition – to reuse words already in use. It's also not "fashionable" or "trendy". To quote Aristoteles: "The young people today are rotten to the core, or they would have never named this software 'R'". The alternative is the pharmaceutical naming system which includes a review to ensure that names are not just unique, but unlikely to confuse even with bad handwriting. The result is an endless stream of forgettable, but pronounceable, UUIDs with too many 'Z's. (... and "Plan B", which is probably my favorite example of evocative naming).
- amelius 10y ago
- adamnemecek 10y agoWhy not just embrace Cassowary (https://en.wikipedia.org/wiki/Cassowary_(software) https://en.wikipedia.org/wiki/Cassowary_(software)) aka the algorithm behind Cocoa's Auto Layout? Auto Layout isn't perfect but I think that it's fundamentally the API/UI that you are working with, the concepts are definitely at the right level of abstraction. Some sort of DSL could really solve this. Flexbox could be implemented as a framework on top of this.
- drcode 10y agoPete Hunt, one of the original developers of React at Facebook, began work on a Cassowary-like layout engine at one point and came to the conclusion (whether rightly or wrongly) that arbitrary constraint-based layout is too user hostile to pursue further. I too like constraint-based layout, but I have to admit flexbox is nice in that it has very predictable behavior. The main hangup I have with flexbox is that it doesn't allow for layout based on aspect ratios, but Yoga has extensions that resolve this issue.
- adamnemecek 10y ago> Pete Hunt, one of the original developers of React at Facebook, began work on a Cassowary-like layout engine at one point and came to the conclusion (whether rightly or wrongly) that arbitrary constraint-based layout is too user hostile to pursue further. I think that pg's point #2 from this post applies http://paulgraham.com/javacover.html http://paulgraham.com/javacover.html
- OldSchoolJohnny 10y agoOff topic but I read #2 and I can't for the life of me think of why he would consider Cobol a bad language, perhaps he has no personal experience with it.
- adamnemecek 10y agoThere are some mentions here http://paulgraham.com/popular.html http://paulgraham.com/popular.html "It is a mistake to try to baby the user with long-winded expressions that are meant to resemble English. Cobol is notorious for this flaw. A hacker would consider being asked to write."
- jordanlev 10y agoCurious how using this for a complete page layout "feels" to someone who's familiar with designing websites. Since flexbox is intended for 1-dimensional layout only (as opposed to the old-school display:table or the forthcoming Grid spec, which are intended for 2-dimensional layout), I wonder what they do to make it work well for the full page / screen layout (in terms of ease of coding, not the display algorithm itself).
- woah 10y agoThe vast majority of interfaces are nested 1-d layouts
- polskibus 10y agoCan i use this in react?
- drcode 10y agoNot yet (other than react native) Which is a shame, since the lack of aspect ratio support is one of Flexbox's failings (and apparently resolved with Yoga)
- BinaryIdiot 10y agoI like the concept and the C# code is just hands down the best example out of all of them (yet another reason I miss coding in C#). I'm curious though, will this be eventually ported to JavaScript? Yeah yeah I know "flexbox is already on the web!" but if you could write a layout in this fashion versus using style sheets then you could take it and directly apply it to any of your applications (even if you have to convert between languages the exact same setup is still there it's just a straight up conversion). Overall cool idea and implementation. Curious to see where it goes from here.
- emilsjolander 10y agoI agree the C# code is super nice :) There is interest from the community to contribute an emscripten version. If a PR comes my way I will be happy to merge it.
- SonicSoul 10y agoJust curious, when/why would you want to code UI layout in C# vs using a template ?
- BinaryIdiot 10y agoHmm good question. The last time I did C# I did a little WPF and mostly Win or Web Forms so I'm not sure what the state of creating GUIs with C# / .Net is. If this technique affords me better cross platform support then it likely makes sense to use it but as far as using it versus a template I'm not really sure.
- miguelrochefort 10y agoXAML is the state of the art, which is cross-platform thanks to Xamarin.Forms.
- SonicSoul 10y agoc# is generally for back end logic. UI's are generally done using templates on web/wpf/winforms platforms. Especially on the web it makes little sense to do layouts in c#
- mstevens1435 10y agoprtkorhuirkfniugriufbugfurfjuryvbfjfyjdtkruefyeghfgutevdfkhryihvjhrvfuvbjkfhjbvhkjfvhjyyfifugruygvufygciudfgyufcydvyufcydvctysshcvyvshch
- omouse 10y agoI wonder if this competes with Qt or GTK?
- awalton 10y agoNo it does not. But, with some hand wringing you could probably write a Gtk+ GtkLayout-based widget that used this engine to do layout rather than box packing or ebassi's constraint stuff that's going into Gtk+ 3.89.x/4.x. ...I'm not sure that you'd actually want to, but that's a different issue.
- mstevens1435 10y agoprtkorhuirkfniugriufbugfurfjuryvbfjfyjdtkruefyeghfgutevdfkhryihvjhrvfuvbjkfhjbvhkjfvhjyyfifugruygvufygciudfgyufcydvyufcydvctysshcvyvshch
- jgalloway___ 10y agoI like Facebook creating platforms but it is unclear, at least to me, what the problem is they are trying to solve here.
- matt4077 10y ago"Please implement this user interface for Android, iOS, and Windows Phone."
- emilsjolander 10y agoThere are a couple of things which we set out to solve with Yoga. These are two things. - One layout concept across different platforms. This allows developers to more easily collaborate and jump between platforms and re-use knowledge. - Decouple layout from rendering. A lot of UI frameworks couple layout tightly with rendering which often ties the layout to be run on the main thread. By decoupling layout we are able to run it asynchronously. https://code.facebook.com/posts/531104390396423/components-for-android-a-declarative-framework-for-efficient-uis/ https://code.facebook.com/posts/531104390396423/components-f... Talks about how we make use of this.
- shurcooL 10y agoIs anyone thinking of creating a Go binding for this?
- amelius 10y agoOkay, question: can it perform the following task elegantly? Say, I build a declarative tree describing a layout, and I render it. Now I remove one item from the tree. Can the layout engine efficiently remove the item from the view, and... (now it comes) provide an animation for it? As in, the item slowly losing opacity, then the surrounding items moving closer together? (Or a different animation depending on settings). Of course, the opposite should also be possible (i.e., inserting an item). Implement this, and we're a step beyond CSS, because so far this has not been possible (elegantly) in CSS. I.e., remove the element from the DOM tree, and it is gone immediately (without the animation). And no amount of CSS can fix this.
- emilsjolander 10y agoYoga itself does not handle animation but by using another animation system on top of Yoga it should be very possible. I have not yet tried it myself but by wrapping a layout change in a UIView animation block the above should be doable (on iOS but similar should hold on other platforms).
- amelius 10y agoInteresting. Could it be done efficiently? I.e., without walking the complete tree on every update?
- dimillian 10y agoIt's platform specific, as I understand Yoga, it's just a nicer way to write UI code as I see it. On iOS for example, you should totally be able to wrap it be able to wrap Yoga code in existing animation engine, like UIView animation, layer animations and UIKit dynamics. So it'll be as efficient as the system its running on implemented its layout and animation engine. In the case of iOS, it would be amazingly efficient.
- ams6110 10y agoAnimation effects like this are more annoying than anything else, anyway.
- pcwalton 10y agoWhy not use parallelism? Parallel layout tends to be a major speed boost in our experience, and we have a parallel implementation of flexbox already. See Meyerovich 2010 [1] for the basic idea; you can adopt it to flexbox relatively easily. Additionally, I'm a bit skeptical about the use of C here: this stuff tends to end up exposed to the user and security-sensitive. [1]: http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.207.1244&rep=rep1&type=pdf http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.207...
- aseipp 10y agoFor React Native, at least, I think the threat model is a little different. Browsers have to deal with any hostile webpage, so all input can be considered hostile to something like the layout engine -- but here, you're baking the application along with the engine and shipping it wholesale. But I guess it depends on the details of how Yoga actually integrates and what its surface area actually is. That said, I think the more likely conclusion for security vulnerabilities is the one you allude to, where people will probably end up reusing this component elsewhere and exposing the engine to potentially hostile input somewhere along the line, and it might not end well.
- pcwalton 10y agoRight, it's not an issue with React Native. My concern is that people will end up using this in browser-like settings with untrusted content. Do they adequately guard against stack overflow with deeply nested layouts, for example?
- vjeux 10y agoParallelization is something that I've wanted to do for a long time and as you mentioned, flexbox is well suited for that :) Would love for someone to try and implement it!
- namuol 10y agoI'd love to see this defined as a formal spec so it might be implemented in JS. Having access to raw layout calculations in React applications would solve the need to peek at the DOM all the time in so many cases.
- king_magic 10y agoVery, very interesting - curious about whether the C# bit supports Xamarin on iOS and Android, or if the C# piece is just Windows-only (not super clear from the documentation).
- emilsjolander 10y agoI'm not very familiar with Xamarin but I think it should work. If it doesn't please file an issue on the repo.
- oblio 10y agoHow do you see it being used? I'm especially interested in the C# widget toolkit you used this with, if any.
- emilsjolander 10y agoI haven't worked much with the c# bindings myself. It should be able to integrate into most widget toolkits fairly seamlessly I would think.
- yladiz 10y agoOne thing I've thought about recently is Facebook's Patent grants, and it's one thing that makes me uneasy about using any open source technology from Facebook like React (I currently do but am thinking to move to Preact because of the nicer MIT license and that it's analogous to React in many ways) because they're generally given a patent grant. I'm not a lawyer so I don't know if the grant would hold up in court since it's not actually in the license itself, only referenced in the readme but if I had a patent and Facebook infringed on it my license is terminated if I assert my patent rights against Facebook even if it is valid and doesn't pertain to specific React technologies. This has been discussed heavily in the past but suffice it to say it's pretty scary and bears thought. This library looks very useful for those who use React Native or want a layout engine in C# or Java for their mobile app, but as someone who works in an industry (bio/chem engineering) who develops applications around tools in that industry and thinking that Facebook may one day enter that field, or even if we create a software patent for some idea we create while developing the tools, it makes me uneasy whenever a new Facebook open source project, especially one with the potential to become popular in a specific area of software development, is introduced. Also, another thing to keep in mind is not every big company does this with their open source tech. For example, Angular and Visual Studio Code are both under MIT license.
- olalonde 10y agoMaybe I'm misunderstanding the license terms but I feel like this is a bit of a "Maserati Problem", at least, if you are not competing directly with Facebook. If you are worried you might want to sue Facebook for patent infringement some day, you could still use React today and switch to Preact or some other library "just in time".
- ebiester 10y agoJust because you are not competing with Facebook today does not mean that Facebook will not be competing with you tomorrow.
- deleted 10y ago[deleted]
- tn13 10y agoUsing the name "Yoga" for your software is cultural appropriation. Facebook should not do it. It is equivalent of naming a sports team Rednecks.
- tyleraldrich 10y agoIs Yoga a derogatory term? I've never heard it used in such a way, so I think that's quite the false equivalence.
- tn13 10y agoDoes not matter. It is not a good idea to use other people's cultural heritage to name "things". In fact the downvotes here suggest how deeply prejudiced and racist people are on HN.
- grzm 10y agoIn fact the downvotes here suggest how deeply prejudiced and racist people are on HN. Is it fair to generalize like this across all the members of HN? You might argue that this is the case for those that down-voted, but everyone?
- miguelrochefort 10y agoWhy not use something like XAML instead? Much more readable and powerful.
- mwcampbell 10y agoI wonder why the new C implementation is faster on Android than the old Java implementation, even though the former comes with some overhead for JNI and the inability for the ART ahead-of-time compiler to do any cross-module optimziation between Java and native code. Is it because C has structs, which java still doesn't have?
- amelius 10y agoWhat is the footprint of this library in bytes? And is it light on dependencies?
- emilsjolander 10y agoIf you are using purely the C library it is very small and has no dependencies. I can't remember the exact size as it was a while ago I looked but check it out.
- abledon 10y agoI really dislike how software is able to hijack meaning of nouns in our regular lives. To call a software 'Yoga' is so tasteless lol.
- rajathagasthya 10y ago> To call a software 'Yoga' is so tasteless lol. Or hip, depending on where you are :)
- mrcheesy 10y agoStatic layouts are hardly "complex." The complexity comes from animating between different layout states, animating elements in a list, animating elements relative to other elements (e.g., parallax), animating element size changes, etc. It seems confusing to me to have "layout" as a separate component rather than having it be tightly integrated with the rest of the UI framework.
- bnycum 10y agoLooks like a nice library, but maybe I'm missing one thing in the examples. In the examples they define an image and text views, but only in the iOS Obj-C example are they a native image or text view. How do you define the YogaNode to say be a TextBox in C#?
- WhitneyLand 10y agoIs there a designer online to easily build these layouts? (not counting generic flex box tools)
- deleted 10y ago[deleted]
- rsp1984 10y agoIs it just me or does anyone else also feel a bit left behind by this? They say it has bindings for Android and yea, I can generate these Yoga objects in Java but how exactly would I integrate this with my Android view hierarchy? Do I need to use React for that? The documentation says exactly nothing about this. What's the piece of information that I'm missing?
- la6470 10y agoWhy would you use a name like Yoga? I mean can you imagine calling something Tai Chi or Buddhism or Christianity ?? Yoga is a philosophy with a much deeper meaning than a software platform so I think you sort Of trivialized it even though I believe you had the best intention?
- tumult 10y agoI made a similar library earlier this year. It builds as C or C++ and is only two files (MIT license): https://github.com/randrew/layout https://github.com/randrew/layout The API is similar to Yoga. I hadn't seen Yoga before, and I'm surprised at how similar it is. It seems like Yoga is about the same age (or older?) than my Layout library. It's meant to be easily embedded into existing software, such as game engines, OpenGL-based tools, custom GUI libraries, etc. without requiring its own complicated build system. Its API and layout engine seems to work in a way similar to Yoga, but it doesn't have pre-made bindings for any existing GUI toolkits. There is, however, an example binding for the Lua scripting language. API comparison: Yoga: YGNodeRef root = YGNodeNew(); YGNodeStyleSetWidth(root, 500); YGNodeStyleSetHeight(root, 120); YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow); YGNodeRef image = YGNodeNew(); YGNodeStyleSetWidth(image, 80); YGNodeStyleSetMargin(image, YGEdgeEnd, 20); YGNodeInsertChild(root, image, 0); Layout: lay_context ctx; lay_init_context(&ctx); lay_id root = lay_item(&ctx); lay_set_size_xy(&ctx, root, 500, 120); lay_set_contain(&ctx, root, LAY_ROW); lay_id image = lay_item(&ctx); lay_set_size_xy(&ctx, image, 80, 0); lay_set_margins_ltrb(&ctx, image, 0, 0, 20, 0); lay_insert(&ctx, root, image); The Layout library can handle laying out tens of thousands of items in a few microseconds, so I would expect Yoga to have similar performance. (Layout is meant to work stutter-free and waste-free with layouts that could be animated or changing every frame in a game engine.) One major difference I noticed, though, is that Yoga seems to allocate for each individual node, whereas Layout uses a single resizable contiguous buffer. This is gives it pretty good CPU cache performance (writes are all in their own separate region of the buffer) and allows you to do complete rebuilds of the layout hierarchy without any heap allocations. It's nice if you have a dynamic layout and want to keep the layout calculations fast/cheap. It might be interesting to do benchmarks of the two libraries in different scenarios. Are there any other libraries similar to Yoga and Layout?
- m0llusk 10y agoYoga is also the new Lenovo laptop. Human languages need better support for namespaces.
- sheraz 10y agoI would think that the industry vertical is namespace enough. Hardware laptop vs software library?
- andersonk 10y agoIs this a more general-purpose, polyglot version of Vaadin?
- skbohra123 10y agoI wish they had chosen a different name, Yoga is too popular a name to be chosen for something like this.
- unwind 10y agoCool to see Facebook release code in C! I clicked the "C" tag in the blog post, and this is the only post referencing C. Heh. Anyway, finally code from an Internet Giant in a language I care about enough to go and take a look at. It seems ... smallish, which was a pleasant surprise. The core Yoga/ folder contains six files which is certainly fewer than I expected. Didn't have time to do a full read-through, but one thing that I couldn't ignore is the use of a pointer-hiding typedef for the core layout node: typedef struct YGNode *YGNodeRef; I'm really opposed to "hiding the asterisk" in C, since whether or not a thing is a pointer typically matters, and code becomes harder to read when you need to think about this more. Even stranger, though, is that then most function protypes look like this: void YGNodeMarkDirty(const YGNodeRef node); So, you have a function called "mark" which really sounds like a mutating, modifying, operation. But it's declared to take a constant node reference! Peeking at the code, what it does boils down to: if (!node->isDirty) { node->isDirty = true; ... } So it really is modifying, there's no trickery involved (like having node be a handle or indirect reference). It then recurses upwards through the chain of parent nodes, like you'd expect. This works since the "const" here doesn't apply to the pointed-at object (it's distinct from the un-typedef:ed version "const struct YGNode * node"), it applies to the reference. So the code jumps through these hoops and adds a const to the external interface, which doesn't matter, all it does is say "yeah, this function won't re-assign the reference variable to point at something else". Which, in my opinion, is not very useful information, as opposed to "this function doesn't write to the object you pass in" which you'd get with the non-asterisked version. Can anyone shed some light on why one would do this?
- fit2rule 10y agoI'd guess that its because changing the value of the *Pointer would actually be a bug, and const args are used to catch these kinds of bugs...