5 ms·

I 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 th

I 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 ago
I 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 ago
Just curious, when/why would you want to code UI layout in C# vs using a template ?
- BinaryIdiot 10y ago
  Hmm 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 ago
    XAML is the state of the art, which is cross-platform thanks to Xamarin.Forms.
  - SonicSoul 10y ago
    c# 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#
amelius 10y ago
> will this be eventually ported to JavaScript? It's already cross-platform; cross-language would probably be a little much to ask :)
- BinaryIdiot 10y ago
  > It's already cross-platform; cross-language would probably be a little much to ask :) I'm not sure I follow; it's supported in multiple languages already. Am I missing something?
afro88 10y ago
They totally could have done it clean like this for Swift and I struggle to understand why they did it in the old Obj-C way: extension methods with yg_ prefix, static constants instead of enums, unnecessary configuration after instantiation.
- emilsjolander 10y ago
  I just happen to be more familiar with obj-c :) I agree that a swift API would probably look very cool. Would be fun to see this come from the community.
phantom_package 10y ago
Hopefully it does get ported to javascript. In the meantime, if you happen to use react, https://github.com/necolas/react-native-web https://github.com/necolas/react-native-web is a good way to use react-native's styling approach (which uses css-layout under the hood) on the web.
brian-armstrong 10y ago
You might be able to accomplish this with emscripten, which is pretty capable. You'd need appopriate bindings to have it control the DOM
oblio 10y ago
I'm not sure how you're supposed to use this from C# in real life, though. Ok, you have a layout engine. For what widgets? Windows.Forms? WPF? Xamarin Forms? Can those even use a third party layout engine? I'm slightly confused :)
- sixdimensional 10y ago
  To be honest, I'm a .NET developer and I'm not entirely sure either. None of the tests they wrote show any integration with existing widget engines. One thought I had is that one could use this layout engine to do the calculations for the positioning of visual objects on the screen, but you would have to essentially build a fully integrated layout manager that renders to the particular framework you're using. Maybe overridding the hooks for existing layout managers that come with the particular UI framework (for example, WPF has layout managers). For example, in WinForms, if you build the UI programmatically rather than old fashioned drag-and-drop, you could set X/Y positions, widths/sizes etc. per the constraints generated by this engine. Needs to be observable/reactive so the UI changes are fed back into the engine and then the UI automatically changes - much like existing layout manager tech. Perhaps doing this work/exercise was left to the open source community/reader. There aren't any examples/tests showing how to integrate this layout manager with any existing .NET UI widget frameworks. It looks like they wrote the integration with .NET in C# (on MacOS as well), and tested the layout engine itself, but that's about it. EDIT: Possible hooks for old WinForms maybe? https://msdn.microsoft.com/en-us/library/z9w7ek2f(v=vs.110).aspx https://msdn.microsoft.com/en-us/library/z9w7ek2f(v=vs.110)....
- ville 10y ago
  Also Microsoft is using Yoga (previously known as css-layout) in React Native for Windows: https://github.com/ReactWindows/react-native-windows https://github.com/ReactWindows/react-native-windows
ohitsdom 10y ago
I'd prefer it the other way around. CSS is already ubiquitous, would it be possible to make an implementation for a cross-platform tool?
smnscu 10y ago
> I'm curious though, will this be eventually ported to JavaScript? Here's a similar but seemingly dead project: http://gridstylesheets.org/ http://gridstylesheets.org/
hokkos 10y ago
I wonder why they didn't use new in C#, maybe they are under realtime constraint with unity on oculus and they use a pool.
DiThi 10y ago
> will this be eventually ported to JavaScript? It has been ported already. https://www.npmjs.com/package/css-layout https://www.npmjs.com/package/css-layout Oddly enough there's no git repository. Only the npm package has the pure JS code. And the last release was from last year. Fortunately it looks it was easy to port, if one needs a more recent version.
- e1g 10y ago
  It's actually the exact opposite flow ;) css-layout is the original project, it was written in JS and then automatically translated into Java & co. It had some bugs, and Facebook rewrote the thing directly to a native implementation but decided to drop JS as they were not using that variation internally. This is a shame as I love CSS-layout for calculating tween points in layout animations on the web. FB said at this point they have no plans for an official JS port of the new version aka yoga.
  - kentor 10y ago
    Bummer. I was using css-layout to lay out svg elements[0] [0]: https://kentor.me/posts/creating-diagrams-with-react-svg-and-css-layout/ https://kentor.me/posts/creating-diagrams-with-react-svg-and...
sixdimensional 10y ago
I found it kind of ironic that their tests in .NET for the C# code only run on MacOS currently! :) So hard to remember that finally we are in a world where that is possible. "We have a script which to launch C# test on macOS, csharp/tests/Facebook.Yoga/test_macos.sh."
sgrove 10y ago
I believe the canonical JS implementation is (or will be?) https://github.com/jordwalke/ReLayout https://github.com/jordwalke/ReLayout - written in Reason and compiled to JS via Bucklescript. Lots of very nice reasons and benefits for this, including readable JS with good performance.
- jordwalke 10y ago
  Hi, I'm one of the contributors to ReLayout. I originally worked on ReactJS, and ReactNative which made use of Yoga (then, css-layout), and now I'm working on Reason and ReLayout (which is a port of Yoga to Reason). I definitely wouldn't call ReLayout the canonical way to compile Yoga to JS. While we intend to keep ReLayout up to date with the Yoga implementation, we're ultimately doing this because we'd like to experiment with combining ReactJS's API, the new Fiber architecture, with a deeply integrated Flex Box layout algorithm. Feel free to message us if you're interested in tracking the results of the experiment, but but for now, I'm just excited to see Yoga launch. The Yoga project and team have been incredibly helpful with our experiment and I'm excited to see more apps integrate Yoga going forward. Congrats! I can't go back to not using FlexBox now that I've gotten hooked on it. (edited: Formatting)

emilsjolander 10y ago

I 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 ago

Just curious, when/why would you want to code UI layout in C# vs using a template ?

BinaryIdiot 10y ago
Hmm 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 ago
  XAML is the state of the art, which is cross-platform thanks to Xamarin.Forms.
- SonicSoul 10y ago
  c# 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#

amelius 10y ago

> will this be eventually ported to JavaScript? It's already cross-platform; cross-language would probably be a little much to ask :)

BinaryIdiot 10y ago
> It's already cross-platform; cross-language would probably be a little much to ask :) I'm not sure I follow; it's supported in multiple languages already. Am I missing something?

afro88 10y ago

They totally could have done it clean like this for Swift and I struggle to understand why they did it in the old Obj-C way: extension methods with yg_ prefix, static constants instead of enums, unnecessary configuration after instantiation.

emilsjolander 10y ago
I just happen to be more familiar with obj-c :) I agree that a swift API would probably look very cool. Would be fun to see this come from the community.

phantom_package 10y ago

Hopefully it does get ported to javascript. In the meantime, if you happen to use react, https://github.com/necolas/react-native-web https://github.com/necolas/react-native-web is a good way to use react-native's styling approach (which uses css-layout under the hood) on the web.

brian-armstrong 10y ago

You might be able to accomplish this with emscripten, which is pretty capable. You'd need appopriate bindings to have it control the DOM

oblio 10y ago

I'm not sure how you're supposed to use this from C# in real life, though. Ok, you have a layout engine. For what widgets? Windows.Forms? WPF? Xamarin Forms? Can those even use a third party layout engine? I'm slightly confused :)

sixdimensional 10y ago
To be honest, I'm a .NET developer and I'm not entirely sure either. None of the tests they wrote show any integration with existing widget engines. One thought I had is that one could use this layout engine to do the calculations for the positioning of visual objects on the screen, but you would have to essentially build a fully integrated layout manager that renders to the particular framework you're using. Maybe overridding the hooks for existing layout managers that come with the particular UI framework (for example, WPF has layout managers). For example, in WinForms, if you build the UI programmatically rather than old fashioned drag-and-drop, you could set X/Y positions, widths/sizes etc. per the constraints generated by this engine. Needs to be observable/reactive so the UI changes are fed back into the engine and then the UI automatically changes - much like existing layout manager tech. Perhaps doing this work/exercise was left to the open source community/reader. There aren't any examples/tests showing how to integrate this layout manager with any existing .NET UI widget frameworks. It looks like they wrote the integration with .NET in C# (on MacOS as well), and tested the layout engine itself, but that's about it. EDIT: Possible hooks for old WinForms maybe? https://msdn.microsoft.com/en-us/library/z9w7ek2f(v=vs.110).aspx https://msdn.microsoft.com/en-us/library/z9w7ek2f(v=vs.110)....
ville 10y ago
Also Microsoft is using Yoga (previously known as css-layout) in React Native for Windows: https://github.com/ReactWindows/react-native-windows https://github.com/ReactWindows/react-native-windows

ohitsdom 10y ago

I'd prefer it the other way around. CSS is already ubiquitous, would it be possible to make an implementation for a cross-platform tool?

smnscu 10y ago

> I'm curious though, will this be eventually ported to JavaScript? Here's a similar but seemingly dead project: http://gridstylesheets.org/ http://gridstylesheets.org/

hokkos 10y ago

I wonder why they didn't use new in C#, maybe they are under realtime constraint with unity on oculus and they use a pool.

DiThi 10y ago

> will this be eventually ported to JavaScript? It has been ported already. https://www.npmjs.com/package/css-layout https://www.npmjs.com/package/css-layout Oddly enough there's no git repository. Only the npm package has the pure JS code. And the last release was from last year. Fortunately it looks it was easy to port, if one needs a more recent version.

e1g 10y ago
It's actually the exact opposite flow ;) css-layout is the original project, it was written in JS and then automatically translated into Java & co. It had some bugs, and Facebook rewrote the thing directly to a native implementation but decided to drop JS as they were not using that variation internally. This is a shame as I love CSS-layout for calculating tween points in layout animations on the web. FB said at this point they have no plans for an official JS port of the new version aka yoga.
- kentor 10y ago
  Bummer. I was using css-layout to lay out svg elements[0] [0]: https://kentor.me/posts/creating-diagrams-with-react-svg-and-css-layout/ https://kentor.me/posts/creating-diagrams-with-react-svg-and...

sixdimensional 10y ago

I found it kind of ironic that their tests in .NET for the C# code only run on MacOS currently! :) So hard to remember that finally we are in a world where that is possible. "We have a script which to launch C# test on macOS, csharp/tests/Facebook.Yoga/test_macos.sh."

sgrove 10y ago

I believe the canonical JS implementation is (or will be?) https://github.com/jordwalke/ReLayout https://github.com/jordwalke/ReLayout - written in Reason and compiled to JS via Bucklescript. Lots of very nice reasons and benefits for this, including readable JS with good performance.

jordwalke 10y ago
Hi, I'm one of the contributors to ReLayout. I originally worked on ReactJS, and ReactNative which made use of Yoga (then, css-layout), and now I'm working on Reason and ReLayout (which is a port of Yoga to Reason). I definitely wouldn't call ReLayout the canonical way to compile Yoga to JS. While we intend to keep ReLayout up to date with the Yoga implementation, we're ultimately doing this because we'd like to experiment with combining ReactJS's API, the new Fiber architecture, with a deeply integrated Flex Box layout algorithm. Feel free to message us if you're interested in tracking the results of the experiment, but but for now, I'm just excited to see Yoga launch. The Yoga project and team have been incredibly helpful with our experiment and I'm excited to see more apps integrate Yoga going forward. Congrats! I can't go back to not using FlexBox now that I've gotten hooked on it. (edited: Formatting)