Yoga for web? #733

New Issue

2018-03-14T20:09:45-07:00

trusktr commented

2018-03-14 20:09:45 -07:00

(Migrated from github.com)

The website doesn't mention anything about using Yoga in web apps. Can Yoga be used in web apps (f.e. inside of Chrome web browser)?

(The Playground gives a hint at this, but not sure if that's just a mock)

The website doesn't mention anything about using Yoga in web apps. Can Yoga be used in web apps (f.e. inside of Chrome web browser)? (The Playground gives a hint at this, but not sure if that's just a mock)

danielbuechele commented

2018-03-21 07:56:22 -07:00

(Migrated from github.com)

Yes, it is possible to use Yoga from within a browser. This is what the playground on the website is doing. The JS version of Yoga is available on npm yoga-layout.

Yes, it is possible to use Yoga from within a browser. This is what the playground on the website is doing. The JS version of Yoga is available on npm `yoga-layout`.

❤️ 1

trusktr commented

2018-03-21 11:28:03 -07:00

(Migrated from github.com)

Cool! Is there (will there be) documentation for how to use the JS api in the browser? Or did I miss it somewhere?

For example, if I look at a documentation page, https://yogalayout.com/docs/aspect-ratio, I see it explains a concept, but it doesn't provide any clue as to what actual API I need to call (API docs).

Also, the Playground seems to only offer code for Litho, ComponentKit, or React Native, so it isn't clear that there's a web-only (f.e. React, not React-Native) option.

Maybe the "React Native" is the same as what we use in the web, just stick DOM elements in them? If so, would be great to make that clear in the documentation.

Cool! Is there (will there be) documentation for how to use the JS api in the browser? Or did I miss it somewhere? For example, if I look at a documentation page, https://yogalayout.com/docs/aspect-ratio, I see it explains a concept, but it doesn't provide any clue as to what actual API I need to call (API docs). Also, the Playground seems to only offer code for Litho, ComponentKit, or React Native, so it isn't clear that there's a web-only (f.e. React, not React-Native) option. Maybe the "React Native" is the same as what we use in the web, just stick DOM elements in them? If so, would be great to make that clear in the documentation.

danielbuechele commented

2018-03-21 11:30:50 -07:00

(Migrated from github.com)

We should add this to the documentation! You're welcome to submit a PR for that. You can find the flowtype definition here: https://github.com/facebook/yoga/blob/master/javascript/sources/entry-common.js#L123

trusktr commented

2018-03-21 11:33:29 -07:00

(Migrated from github.com)

You're welcome to submit a PR for that.

Not sure I'm qualified enough yet. I haven't used Yoga before, and was curious to see if I could even use it in the web (as all the hints seemed to point otherwise, but I figured "how could it not run in the web, it's Facebook" and plus I saw the Playground).

I'm curious: in the web, how does it run in another thread? Does it use workers?

> You're welcome to submit a PR for that. Not sure I'm qualified enough yet. I haven't used Yoga before, and was curious to see if I could even use it in the web (as all the hints seemed to point otherwise, but I figured "how could it not run in the web, it's Facebook" and plus I saw the Playground). I'm curious: in the web, how does it run in another thread? Does it use workers?

danielbuechele commented

2018-03-21 11:42:55 -07:00

(Migrated from github.com)

No, in the browser it is running in the regular JS thread. However, running it in a WebWorker could be interesting though, but depends on the usecase. For the playground, we did not run in any performance issues.

Here is a short (untested) explanation on how to use this. I'll add this to the docs later.

import yoga, {Node} from 'yoga-layout';

const root = Node.create();
root.setWidth(500);
root.setHeight(300);
root.setJustifyContent(yoga.JUSTIFY_CENTER);

const node1 = Node.create();
node1.setWidth(100);
node1.setHeight(100);

const node2 = Node.create();
node2.setWidth(100);
node2.setHeight(100);

root.insertChild(node1, 0);
root.insertChild(node2, 1);

root.calculateLayout(500, 300, yoga.DIRECTION_LTR);
console.log(root.getComputedLayout());
// {left: 0, top: 0, width: 500, height: 300}
console.log(node1.getComputedLayout());
// {left: 150, top: 0, width: 100, height: 100}
console.log(node2.getComputedLayout());
// {left: 250, top: 0, width: 100, height: 100}

open in playground

No, in the browser it is running in the regular JS thread. However, running it in a WebWorker could be interesting though, but depends on the usecase. For the playground, we did not run in any performance issues. Here is a short (untested) explanation on how to use this. I'll add this to the docs later. ```js import yoga, {Node} from 'yoga-layout'; const root = Node.create(); root.setWidth(500); root.setHeight(300); root.setJustifyContent(yoga.JUSTIFY_CENTER); const node1 = Node.create(); node1.setWidth(100); node1.setHeight(100); const node2 = Node.create(); node2.setWidth(100); node2.setHeight(100); root.insertChild(node1, 0); root.insertChild(node2, 1); root.calculateLayout(500, 300, yoga.DIRECTION_LTR); console.log(root.getComputedLayout()); // {left: 0, top: 0, width: 500, height: 300} console.log(node1.getComputedLayout()); // {left: 150, top: 0, width: 100, height: 100} console.log(node2.getComputedLayout()); // {left: 250, top: 0, width: 100, height: 100} ``` [open in playground](https://goo.gl/ffFzXv)

trusktr commented

2018-03-21 13:45:59 -07:00

(Migrated from github.com)

Interesting, thanks! I a considering using this for some layout features of infamous, for 2D layouts (but the actual content can be anything, including 3D WebGL meshes mixed with DOM). (I'm also looking at adding Autolayout.js, with VFL). Maybe I can make it easy to specify which layout engine to use with my elements.

Interesting, thanks! I a considering using this for some layout features of [infamous](https://github.com/trusktr/infamous/), for 2D layouts (but the actual content can be anything, including 3D WebGL meshes mixed with DOM). (I'm also looking at adding Autolayout.js, with VFL). Maybe I can make it easy to specify which layout engine to use with my elements.

arvsu commented

2018-09-23 21:27:47 -07:00

(Migrated from github.com)

No, in the browser it is running in the regular JS thread. However, running it in a WebWorker could be interesting though, but depends on the usecase. For the playground, we did not run in any performance issues.

Here is a short (untested) explanation on how to use this. I'll add this to the docs later.

import yoga, {Node} from 'yoga-layout';

const root = Node.create();
root.setWidth(500);
root.setHeight(300);
root.setJustifyContent(yoga.JUSTIFY_CENTER);

const node1 = Node.create();
node1.setWidth(100);
node1.setHeight(100);

const node2 = Node.create();
node2.setWidth(100);
node2.setHeight(100);

root.insertChild(node1, 0);
root.insertChild(node2, 1);

root.calculateLayout(500, 300, yoga.DIRECTION_LTR);
console.log(root.getComputedLayout());
// {left: 0, top: 0, width: 500, height: 300}
console.log(node1.getComputedLayout());
// {left: 150, top: 0, width: 100, height: 100}
console.log(node2.getComputedLayout());
// {left: 250, top: 0, width: 100, height: 100}

open in playground

Hi Daniel,
I have installed yoga-layout via "npm install yoga-layout". I have created a javascript file containing code as mentioned above. Its executing fine but i am not getting the same output as you have mentioned above.

My Output :
// Layout { left: 0,right:0, top: 0,bottom:0, width: 500, height: 300 }
// Layout { left: 0,right:0, top: 50,bottom:0, width: 100, height: 100 }
// Layout { left: 0,right:0 top: 150,bottom:0, width: 100, height: 100 }

I am using yoga-layout for the first time.So, i am not able to figure out what went wrong.
Can you please help me out or suggest anything that i might have missed?

> No, in the browser it is running in the regular JS thread. However, running it in a WebWorker could be interesting though, but depends on the usecase. For the playground, we did not run in any performance issues. > > Here is a short (untested) explanation on how to use this. I'll add this to the docs later. > > ```js > import yoga, {Node} from 'yoga-layout'; > > const root = Node.create(); > root.setWidth(500); > root.setHeight(300); > root.setJustifyContent(yoga.JUSTIFY_CENTER); > > const node1 = Node.create(); > node1.setWidth(100); > node1.setHeight(100); > > const node2 = Node.create(); > node2.setWidth(100); > node2.setHeight(100); > > root.insertChild(node1, 0); > root.insertChild(node2, 1); > > root.calculateLayout(500, 300, yoga.DIRECTION_LTR); > console.log(root.getComputedLayout()); > // {left: 0, top: 0, width: 500, height: 300} > console.log(node1.getComputedLayout()); > // {left: 150, top: 0, width: 100, height: 100} > console.log(node2.getComputedLayout()); > // {left: 250, top: 0, width: 100, height: 100} > ``` > > [open in playground](https://goo.gl/ffFzXv) Hi Daniel, I have installed yoga-layout via "npm install yoga-layout". I have created a javascript file containing code as mentioned above. Its executing fine but i am not getting the same output as you have mentioned above. My Output : // Layout { left: 0,right:0, top: 0,bottom:0, width: 500, height: 300 } // Layout { left: 0,right:0, top: 50,bottom:0, width: 100, height: 100 } // Layout { left: 0,right:0 top: 150,bottom:0, width: 100, height: 100 } I am using yoga-layout for the first time.So, i am not able to figure out what went wrong. Can you please help me out or suggest anything that i might have missed?

danielbuechele commented

2018-09-25 03:23:37 -07:00

(Migrated from github.com)

Ah, your nodes are displayed along the Y-axis. This means it is using flex-direction: column. You should be able to fix this by adding root.setFlexDirection(yoga.FLEX_DIRECTION_ROW).

Ah, your nodes are displayed along the Y-axis. This means it is using `flex-direction: column`. You should be able to fix this by adding `root.setFlexDirection(yoga.FLEX_DIRECTION_ROW)`.

arvsu commented

2018-09-25 23:13:34 -07:00

(Migrated from github.com)

Ah, your nodes are displayed along the Y-axis. This means it is using flex-direction: column. You should be able to fix this by adding root.setFlexDirection(yoga.FLEX_DIRECTION_ROW).

Thanks a lot Daniel. It worked fine.

> Ah, your nodes are displayed along the Y-axis. This means it is using `flex-direction: column`. You should be able to fix this by adding `root.setFlexDirection(yoga.FLEX_DIRECTION_ROW)`. Thanks a lot Daniel. It worked fine.

susananddaicy commented

2024-01-18 05:21:09 -08:00

(Migrated from github.com)

Yes, it is possible to use Yoga from within a browser. This is what the playground on the website is doing. The JS version of Yoga is available on npm yoga-layout.

I see the npm yoga-layout， but i do not know how to use to show the playground on the website, the api is less

> Yes, it is possible to use Yoga from within a browser. This is what the playground on the website is doing. The JS version of Yoga is available on npm `yoga-layout`. I see the npm `yoga-layout`， but i do not know how to use to show the playground on the website, the api is less

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#733