ShadowDOM and rootDOM - Calculate the DOM max depth and width

An automated way to find the depth and width of shadowDOM/RootDOM

                                Find depth & width of shadowDOM / RootDOM
                        

As DOM tree grows in an excessive size, the side effect in page loading is sometimes beyond our control. The side effects will be in page runtime, memory usage, network load.

Hence, we have to be carefully monitoring the DOM tree growths with a necessary automation tests to ensure that the “DOM Depth” and “DOM Width” are in within the threshold or optimal limit.

Heey Heeey stop stop stop !!!. What is DOM Depth( should I measure in cm?? ) what is DOM Width( does DOM gains weight ? )

I had this doubt too. so, Let us first understand, what is DOM Depth, DOM Width.

DOM Depth

The DOM depth is defined by the distance the between the nested nodes to parent element . Below is an example of DOM tree with a DOM depth of 12

DOM Width

The DOM width is defined by the number of root level DOM nodes
( which may or may not have the branches) in a DOM tree. Below is an example of DOM tree with DOM width of 10

Find the DOM Depth and Width ( based on Lighhouse logic )

We can calculate the DOM depth and width of an entire tree or from a particular element or node. Below is the logic to find the depth and width of a DOM element. This logic is based out of the implementation from google lighthouse.

The above function accepts two parameters. The first parameter “element” defines the starting element for the calculation. by default it will take “body” element, but you can pass any particular element from where you need to start calculate the DOM width and depth.

Calculate DOM width and depth for ShadowDOM

The Shadow DOM allows hidden trees to be attached in the regular DOM tree. it starts with a shadow root, underneath we can have any number of element.

The above function can be used to include shadowDOM elements also while calculating the depth and width of the tree. This can be achieved by passing the parameter “deep =true”.

console.log(getDomStatus(document.body, true));// Includes shadowDOMThe sample result will be :

sample result from above function.

Now, you understood the concept of DOM depth and width and what is the logic to calculate the size of it (including shadowDOM). You can use this function in your integration or unit tests to ensure your page or web component DOM tree size is not exceeding the optimal limit.

Thanks for reading !.

Native web components vs Lit element: The key practical differences

To cope with the faster development of different front-end frameworks. Always there is a clear need that the UI we develop is should be framework agnostic, not fall into a trap of particular framework-based (Angular/React/Vue) implementation. Here is where the reusable HTML web components help in our product designs.

There is quite some way to develop shareable web components. Here in this article, I will mainly discuss the “Lit element” based web component and how it differs from a “vanilla/native w3c standard custom web component” development.

Let us first quickly understand about these two approaches before doing deep comparison.

LIT web component

Lit the word is derived from one of the ES6 features called the “template LITeral” function and that is the basis for the entire Lit rendering engine framework. Lit is lightweight library for building and supports simple API for web component managing tasks like managing properties, attributes, rendering..etc.

Vanilla web component

Vanilla/native web components can be created by extending the native HTMLElement class and registering to the browser by calling customElements.define API.

As we know, we can achieve a custom web component from either a vanilla web component or a LIT-based component. But below are key features highlights which approach makes a developer’s life easier, and produce less code, easy maintenance, and better performance.

Let us do comparison with key functionalities for managing web component.

Coding syntax

Vanilla Web component => Imperative
Lit Element => Declarative

 Rendering Template

Vanilla Web Component => JS InnerHtml binding Or <template> cloning nodesLit Element => Lit Template (Tagged Template Literals functions)

Lifecycle hooks

Vanilla Web Component => constructor, connectedCallback disconnectedCallback, attributeChangedCallback, adoptedCallbackLit Element => Lit introduces a set of render lifecycle callback methods on top of the native Web Component callbacks

Styles/ CSS

Vanilla Web Component => Normal CSS stylesheet Lit Element => Constructable stylesheet

ShadowDOM

Vanilla Web Component => Yes, SupportedLit Element => Yes, supported

Property Binding

Vanilla Web Component => Achieved by getter / setter propertiesLit Element => Lit handles it as part of reactive lifecycle

Attribute Binding

Vanilla Web Component => Achieved with attributedChangedCallbackLit Element => Lit handles it as part reactive lifecycle

Event listeners

Vanilla Web Component => Event listener needs to be initialized programmatically in the connectedCallback and diconnectedCallback lifecycle.Lit Element => In lit templates supports adding event listener to node with @EVENT_NAME binding syntax.

React/Redux hooks Vs equivalent implementation in React class feature

I am writing this article as an attempt to challenge myself to do a deep dive comparison between react/redux hooks used in functional component vs the equivalent implementation in react class component.

Note: I could not find equivalent class feature implementation for all the hooks. But I tried to the maximum which I can.

In this article, we will discuss the below list of mapping b/w react & redux hooks and it is equivalent implementation in class components. 

                                        React and Redux hooks Vs class feature mappings

useState hook Vs equivalent implementation in class Component

useEffect hook Vs equivalent implementation in class component

useRef hook Vs equivalent implementation in class Component

useMemo hook Vs equivalent implementation in class component

useSelector redux hook Vs redux Connect (mapStateToProps)

useDispatch redux hook Vs redux Connect(mapDispatchToProps)