From 3e9d022c5a80260d5eb67e642e11993746e464f5 Mon Sep 17 00:00:00 2001 From: Ombuweb Date: Sun, 20 Nov 2022 19:25:52 +0100 Subject: [PATCH 1/3] docs: initial content for The Layout Process --- content/guide/the-layout-process.md | 50 +++++++++++++++++++++++++++++ content/sidebar.ts | 4 +++ 2 files changed, 54 insertions(+) create mode 100644 content/guide/the-layout-process.md diff --git a/content/guide/the-layout-process.md b/content/guide/the-layout-process.md new file mode 100644 index 00000000..9fbcba1e --- /dev/null +++ b/content/guide/the-layout-process.md @@ -0,0 +1,50 @@ +--- +title: The Layout process +--- + +Getting views to render with the right dimensions and positions requires a run of the layout process. When rendering, a recursive process runs through every view in the **view hierarchy** in two passes — a measure pass and a layout pass. + +During **the measure pass** every view is measured to obtain its desired size. The following properties are considered during the measuring: + +- `width`, `height` +- `minWidth`, `minHeight` +- `visibility` +- `marginTop`, `marginRight`, `marginBottom`, `marginLeft` + +During **the layout pass** every view is placed in a specific layout slot. The slot is determined by the result of the measure pass and the following properties: + +- `marginTop`, `marginRight`, `marginBottom`, `marginLeft` +- `horizontalAlignment`, `verticalAlignment` + +The layout process is by nature an resource-intensive process and it's performance highly depends on the number views (and complexity). + +:::tip +Try to keep the view hierarchy as flat as possible by utilizing different [Layout Containers](/ui-and-styling#layout-containers) rather than relying on excessive view nesting. + +**For example:** don't treat `` as a `
` — instead try to use a `` with specific `rows` and `columns` to achieve the same result: + +```html + + + + + + + + + +``` + + + +```html + + + + + +``` + +One-offs are fine with the `` approach, but building a whole app with the first approach will usually result in poor performance. + +::: \ No newline at end of file diff --git a/content/sidebar.ts b/content/sidebar.ts index c95688b9..5cf748ec 100644 --- a/content/sidebar.ts +++ b/content/sidebar.ts @@ -107,6 +107,10 @@ export default [ text: 'Code Sharing', link: '/guide/code-sharing', }, + { + text: 'The Layout Process', + link: '/guide/the-layout-process' + } ], }, // { From 0086900e980a13f651cf63f769be6a523c225dda Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Sat, 2 Sep 2023 12:13:35 -0700 Subject: [PATCH 2/3] Update content/guide/the-layout-process.md Co-authored-by: Sean Kelly <36159246+SeanKelly369@users.noreply.github.com> --- content/guide/the-layout-process.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/guide/the-layout-process.md b/content/guide/the-layout-process.md index 9fbcba1e..ce7dddee 100644 --- a/content/guide/the-layout-process.md +++ b/content/guide/the-layout-process.md @@ -19,7 +19,7 @@ During **the layout pass** every view is placed in a specific layout slot. The s The layout process is by nature an resource-intensive process and it's performance highly depends on the number views (and complexity). :::tip -Try to keep the view hierarchy as flat as possible by utilizing different [Layout Containers](/ui-and-styling#layout-containers) rather than relying on excessive view nesting. +It's a good practice to minimize deep nesting of views. Instead, utilize different [Layout Containers](https://chat.openai.com/ui-and-styling#layout-containers) to achieve a simpler and more organized view hierarchy. This approach improves readability, maintainability and performance. **For example:** don't treat `` as a `
` — instead try to use a `` with specific `rows` and `columns` to achieve the same result: From f49fa145338fd8674adb79260ee039eb49a6c0cb Mon Sep 17 00:00:00 2001 From: Nathan Walker Date: Sat, 2 Sep 2023 12:18:46 -0700 Subject: [PATCH 3/3] chore: cleanup --- content/guide/the-layout-process.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/content/guide/the-layout-process.md b/content/guide/the-layout-process.md index ce7dddee..93eeb5c9 100644 --- a/content/guide/the-layout-process.md +++ b/content/guide/the-layout-process.md @@ -1,8 +1,8 @@ --- -title: The Layout process +title: The Layout Process --- -Getting views to render with the right dimensions and positions requires a run of the layout process. When rendering, a recursive process runs through every view in the **view hierarchy** in two passes — a measure pass and a layout pass. +The ability for all your views to render with the right dimensions and positions requires a run of "the layout process". When rendering, a recursive process runs through every view in the **view hierarchy** in two passes — a measure pass and a layout pass. During **the measure pass** every view is measured to obtain its desired size. The following properties are considered during the measuring: @@ -19,10 +19,12 @@ During **the layout pass** every view is placed in a specific layout slot. The s The layout process is by nature an resource-intensive process and it's performance highly depends on the number views (and complexity). :::tip -It's a good practice to minimize deep nesting of views. Instead, utilize different [Layout Containers](https://chat.openai.com/ui-and-styling#layout-containers) to achieve a simpler and more organized view hierarchy. This approach improves readability, maintainability and performance. +It's a good practice to minimize deep nesting of views. Instead, utilize different [Layout Containers](/ui/#layout-containers) to achieve a simpler and more organized view hierarchy. This approach improves readability, maintainability and performance. **For example:** don't treat `` as a `
` — instead try to use a `` with specific `rows` and `columns` to achieve the same result: +- Bad Practice: + ```html @@ -35,6 +37,7 @@ It's a good practice to minimize deep nesting of views. Instead, utilize differe ``` +- Good Practice: ```html @@ -45,6 +48,6 @@ It's a good practice to minimize deep nesting of views. Instead, utilize differe ``` -One-offs are fine with the `` approach, but building a whole app with the first approach will usually result in poor performance. +One-offs are fine with the `` approach, but building an entire app with the first approach will usually result in poor performance. ::: \ No newline at end of file