Successfully reported this slideshow.
Your SlideShare is downloading. ×

[@NaukriEngineering] Virtual dom

Ad

Virtual Dom
FED | Naukri.com

Ad

What is Dom?
It’s a way of representing a structured document via objects.
The HTML DOM is always tree-structured - which ...

Ad

Challenge
Manual DOM manipulation is messy.
Keeping track of the previous DOM state is tough.
Dom is slow and should be to...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 10 Ad
1 of 10 Ad
Advertisement

More Related Content

Advertisement

[@NaukriEngineering] Virtual dom

  1. 1. Virtual Dom FED | Naukri.com
  2. 2. What is Dom? It’s a way of representing a structured document via objects. The HTML DOM is always tree-structured - which is allowed by the structure of HTML document. This is cool because we can traverse trees fairly easily. Unfortunately, easily doesn’t mean quickly here.
  3. 3. Challenge Manual DOM manipulation is messy. Keeping track of the previous DOM state is tough. Dom is slow and should be touched minimally and efficiently.
  4. 4. What is Virtual Dom virtual-dom is a collection of modules designed to provide a declarative way of representing the DOM for your app. It is lightweight and detached from the browser-specific implementation details.
  5. 5. HTML to Virtual DOM <div style={{ textAlign: 'center', lineHeight: (100 + count) + 'px', border: '1px solid red', width: (100 + count) + 'px', height: (100 + count) + 'px' }}>{count}</div> Virtual.createElement( 'div', { style: { textAlign: 'center', lineHeight: 100 + count + 'px', border: '1px solid red', width: 100 + count + 'px', height: 100 + count + 'px' } }, count );
  6. 6. Process involved
  7. 7. Uses cases Virtual Dom Let you write HTML as function of state. Let you create isomorphic apps. Ensure best practices of DOM reconciliation. Allows easy dom batching a performance enhancement.
  8. 8. Performance bits Virtual Dom will re-render full app on state change. Work with immutable data structures. Keep node hierarchy flat. Batch actual dom operations. Do page profiling and check for janks.
  9. 9. Thanks

×