Virtual dom

Virtual Dom
how to work virtual dom

Contents
Virtual DOM 이해하기
● Virtual DOM의 등장배경
● Virtual DOM의 concept
Virtual DOM 만들기
● Simple Virtual DOM FW을 만들어 보자
(virtual DOM의 internal 구현)

Virtual DOM의 등장배경 - DOM
● DOM (Document Object Model)
그림 출처: https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/

● DOM의 Good Point
○ Cross-platform, cross-browser을 지원한다
○ Web page 구조를 쉽게 표현한다
○ 사용하기 쉽고, control 할 수 있는 API가 제공된다
● DOM의 Bad Point
○ DOM manipulation에서 성능의 문제가 있다(느리다)

● DOM Manipulation
○ element
○ attribute
○ events
○ style

Virtual DOM의 등장배경 - DOM manipulation 느리다?
● 많은 문서에서 DOM manipulation이 ‘느리다’ 라고 한다
● 왜? ‘느리다’ 인지 잘 설명되어 있지 않다

Virtual DOM의 등장배경 - DOM manipulation 느린가?
● pure javascript가 원래 가장 빠른거 아닌가?
● pure javascript가 결국 최종적인 manipulation API 아닌가?

Virtual DOM의 등장배경 - DOM manipulation 느림의 진실
● 사실 DOM manipulation은 느리지 않음
● 그리고 결국 DOM조작을 하려면, DOM API를 써야함

Virtual DOM의 등장배경 - dom manipulation이 느리다?
● 그럼 왜 DOM Manipulation이 느리다고 할까?
그림:http://combiboilersleeds.com/images/confuse/confuse-0.jpg

Virtual DOM의 등장배경 - dom manipulation을 하면 Browser에서 일어나는 일
● rendering engine basic flow
출처: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

webkit gecko
출처: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#The_rendering_engine

HTML source DOM Tree Render Tree

● reflow(layout)
○ render tree의 전체 또는 일부를 다시 확인하고, 노드의 크기를 계산해야 할때 발생
○ 적어도 최소한 한번은 발생(페이지가 처음 그려질때)
● repaint
○ 화면이 다시 그려져야(update) 하는 경우 발생.
● what triggers a reflow or a repaint?
○ Adding, removing, updating DOM node
○ Hiding DOM node
■ display:none (reflow and repaint)
■ visibility: hidden (repaint only)
○ moving, animating a DOM node on the page
○ Adding a stylesheet, tweaking style properties
○ user action such as resizing the window, changing the font size, scrolling...

● Browser는 reflow, repaint을 최대한 최적화 하여 동작.
● But, Browser의 최적화를 무력화 시키는 경우 존재

Virtual DOM의 등장배경 - dom manipulation이 느리다는 말의 의미
● DOM의 manipulation이 느리다? (X)
● DOM의 rendering calculation이 느리다! (o)
○ dom의 manipulation을 할 때 발생하는...

Virtual DOM의 concept - dom manipulation 횟수 최소화
● DOM의 manipulation을 빠르게 한다? (X)
● DOM의 manipulation에서 발생하는 rendering을 최소화 하자 (O)
=> DOM manipulation의 횟수를 최소화 하자

Virtual DOM의 concept - dom manipulation 횟수 최소화 예제
html & code JS manipulation (each) JS manipulation (ones)

Virtual DOM의 concept - dom manipulation 횟수 최소화 정리
● 여러분은, 이미 Virtual DOM의 concept을 사용했을 수 있습니다.
● 변경할 사항을 “가상의” 위치에서 처리하고, “실제 DOM”의 조작을 최소화!
넌 이미 알
고 있다.

Virtual DOM의 concept - What is virtual DOM?
● 가상의 DOM을 만들고 관리하는 것
● 가상의 DOM이란?
○ 무엇이든 될 수 있다~!!.
○ JSON, XML, Function, TEXT, annotation, etc ….

Virtual DOM의 concept - Virtual DOM JSON으로 이해해 보기
DOM JSON DOM
<ul class =”list”>
<li> item 1 </li>
<li> item 2 </li>
</ul>
{
type: ‘ul’,
props: {
‘class’: ‘list’
},
children: {
{ type: ‘li’, props: {}, children: [‘item 1’] },
{ type: ‘li’, props: {}, children: [‘item 2’] }
}
}
● JSON으로 DOM을 표현하기

Virtual DOM의 concept - Virtual DOM JSON으로 이해해 보기
DOM JSON DOM
<ul class =”list”>
<li> item 1 </li>
<li> item 2 </li>
</ul>
{
type: ‘ul’,
props: {
‘class’: ‘list’
},
children: {
{ type: ‘li’, props: {}, children: [‘item 3’] }
}
}
● JSON DOM을 update 하기
⇒ 실제 dom manipulation없이,
JSON에 대한 조작으로 DOM을
update
⇒ 여러 JSON으로
manipulation을 한 이후 최종적
으로만 dom manpulation

Virtual DOM의 문제점
● Virtual Table을 생성해야함
○ in-memory 사용의 증가
● DIFF의 필요성
● 개발자가 Virtual DOM의 개념을 이해 못하고 구현시, 큰 성능 향상이 없을 수 있음

Virtual DOM의 internal 구현을 한번 시도해보기
● 임의의 simple한 virtual dom을 구현합니다.
● How to write your own Virtual DOM의 글을 토대로 하였습니다.

Virtual DOM의 internal 구현을 한번 시도해보기 - Real DOM > JSON
DOM
JSON
JSON 표현

Virtual DOM의 internal 구현을 한번 시도해보기 - JSON > Function
JSON 표현
Function
사용

Virtual DOM의 internal 구현을 한번 시도해보기 - JSX 표현
JSX 표현
JSX가
Transpiled되면

Virtual DOM의 internal 구현을 한번 시도해보기 - JSX 표현
참고: https://jsfiddle.net/deathmood/5qyLubt4/?utm_source=website&utm_medium=embed&utm_campaign=5qyLubt4

Virtual DOM의 internal 구현을 한번 시도해보기 - VirtualDOM to Real DOM
참고: https://jsfiddle.net/deathmood/cL0Lc7au/?utm_source=website&utm_medium=embed&utm_campaign=cL0Lc7au

Virtual DOM의 internal 구현을 한번 시도해보기 - VirtualDOM to Real DOM update
● 다음 사항들을 고려해야 한다.
○ add
○ remove
○ replace
○ compare child node

● diff (change)을 판단하는 함수

● update 함수

● update 함수
children check

● update 함수 전체 버전
참고: https://jsfiddle.net/deathmood/0htedLra/?utm_source=website&utm_medium=embed&utm_campaign=0htedLra

Virtual DOM의 internal 구현을 한번 시도해보기 - 남은 내용들
● Property 처리
● Event 처리
● component로 만들기

Virtual DOM 정리
● 그래서 뭐?
○ dom manipulation을 최소화 하는 방법을 사용하는게 좋다 (꼭 virtual dom이 아니어도…)
○ virtual dom의 원리를 알고 쓰는게 좋다 (web 개발자라면 특히나…)
○ 이 자료를 보고, virtual dom에 대한 기본 개념 이해가 높아졌으면 좋겠다...

Reference
● youtube
○ 만화 형태의 간단한 설명 - https://www.youtube.com/watch?v=BYbgopx44vo
○ 바벨에서 세미나 발표한 설명, data-binding에 초점, 핵심은 비슷, - https://www.youtube.com/watch?v=BYbgopx44vo
○ 간단하고 핵심적인 5분 이하 동영상 - https://www.youtube.com/watch?v=OoS5AK6qz1Q
○ Diff 알고리즘 및 browser DOM을 최대한 조금 건드린다는 설명 - https://www.youtube.com/watch?v=mLMfx8BEt8g
● ppt
○ why and how to use virtual dom - https://www.slideshare.net/DaiweiLu/why-and-how-to-use-virtual-dom
○ reactjs - https://facebook.github.io/react/blog/2014/02/15/community-roundup-16.html
● articles
○ virtual dom vs incremental dom - https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/
○ data의 변화를 감지하고, dom을 변경하는 fw 소개 - http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
○ dom 이 느린 이유 - http://stackoverflow.com/questions/6817093/but-whys-the-browser-dom-still-so-slow-after-10-years-of-effort
○ browser에서 rendering 설명 (좋은자료) - https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
○ browser에서 rendering & paint 관련 설명 (좋은 자료) - http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
○ virtual dom와 dom의 차이 - http://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/
○ virtual dom 이란? - https://jbi.sh/what-is-virtual-dom/
○ virtual dom 짧은 설명, dom의 문제 - https://www.codecademy.com/articles/react-virtual-dom
○ dom manifulation의 문제 (좋은자료) - https://www.accelebrate.com/blog/the-real-benefits-of-the-virtual-dom-in-react-js/
○ virtual dom 벤치마크 - https://vdom-benchmark.github.io/vdom-benchmark/
○ jsx 설명 - https://www.fullstackreact.com/p/jsx-and-the-virtual-dom/
○ server side, virtual dom - https://www.afas.nl/blog/virtual-dom-how-inefficiency-can-lead-to-better-performance
○ how to write your own virtual DOM - https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060
○ Inner workings of virtual DOM - https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf

Virtual dom의 concept을 이해하기. - Virtual DOM - ReactJS에서의 concept

Virtual dom의 concept을 이해하기. - Virtual DOM - ReactJS에서의 concept
"use strict"
class Test extends React.Component {
updateDom(cnt) {
this.setState({
cnt: cnt
});
}
...
render() {
return (
<div>
<div>5 dom change test</div>
<button onClick={this.test}>test start</button>
<button onClick={this.simpleFor}>simpleFor start</button>
<div id="dom1">{this.state.cnt + 1}</div>
</div>
);
}
}
ReactDOM.render(
<Test />,
document.getElementById('root')
);
참고: https://jsfiddle.net/gseok/4jo353Lq/

The inner working of virtual DOM
참고: https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf

React JSX
● XML 처럼 element을 작성 (View)
● JSX에 의해 React.createElement로 치환
● React.createElement는 Virtual DOM, 일종의 Object을 리턴함

React JSX
● <h1> hello, world</h1>은, React.createElement는 Virtual DOM, 일종의 Object을 리턴함
● ReactDOM.render 함수는, 실제 DOM으로 rendering 하는 역할
○ 실제 code를 분석해보면, createElement을 호출하는 부분을 발견할 수 있다.
○ https://github.com/facebook/react/blob/master/src/renderers/dom/fiber/ReactDOMFiberComponent.js

Virtual dom

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Virtual dom

Similar to Virtual dom (20)

Recently uploaded

Recently uploaded (8)

Virtual dom

Editor's Notes