Angular Material - Difference between flat trees and nested trees

Question

Flat tree :

In a flat tree, the hierarchy is flattened; nodes are not rendered inside of each other, but instead are rendered as siblings in sequence

Nested tree :

In Nested tree, children nodes are placed inside their parent node in DOM. The parent node has an outlet to keep all the children nodes.

I have an 800 elements nomenclature that I display using a flat tree.
I tried using a nested tree first, because it seemed like the most appropriate tree. It takes a blink to build it, but the DOM needs 5 seconds to load the tree, so I tried the flat tree, and it works perfectly now.

The question is, what is the point of using a nested tree if the flat tree's result is the same ? The tree is rendered correctly and the DOM understands its hierarchy.

Flat tree's DOM:

A nested tree is harder to build and clearly overloads the DOM everytime it gets displayed. What can a nested tree do, that a flat tree can't ? The Material doc is unclear.

Gui

What do you mean by "the DOM needs 5 seconds to load the tree?" Are you saying the nested tree is slower / more resource intensive? – Andizhan

Answer 1

Whether the HTML is rendered dynamically via Angular or simply a flat file, there are some definite major benefits to a nested tree.

• You can take advantage of event bubbling, which can greatly reduce the amount of code needing to be written to capture user interaction with the DOM. Also, when you need to capture more than one event, nesting can make that easier as well.
• You have more control over formatting by being able to apply styling to parent nodes that will be inherited by child elements.
• Nested trees are huge benefit when using CSS preprocessors like LESS or Sass. Greatly reduces the amount of styles needing to be written.
• While performance between rendering the two trees may be the same, when you have to consider users with slow connections or poor mobile service, the rule of thumb is the less DOM elements the better.

Melanson

Answer 2

The Angular Material docs now provide more information on the benefits of either approach. The documentation states that:

• Flat trees are generally easier to style and inspect. They are also more friendly to scrolling variations, such as infinite or virtual scrolling. Flat trees generally offer better performance.
• Nested trees are easier to work with when hierarchical relationships are visually represented in ways that would be difficult to accomplish with flat nodes.

Loser

Answer 3

The major difference is the way the underlying data source is organised:

• Flat tree does not use nested objects and the whole data is just 1-dimensional array where nested nodes or leaves are put just after the parent node.

• Parent1
• Parent1Child1
• Parent1Child2
• Parent1Child3
• Parent1Child3Child1
• Parent2

etc.

• Nested tree uses hieararchy of parents and children where leaves are stored as a nested child collection properties.

• Parent1
  • Child11
  • Child12
  • Child13
    • Child31
• Parent2

etc.

Myrnamyrobalan

Answer 4

you must also consider the fact that flatTrees tries to flatten your tree before rendring, so having a 3000 nodes tree would bee painful for the flatTree since it will browse all the nodes to build a list from. and this may be very consuming.

Tadich