14. Angular
완전하고 빠른 프레임워크
React
활발하고 오픈 되어 있으며 합리적인 프레임워크
VueJS
가볍고 친숙하며 장점만을 합쳐놓은 프레임워크
그러던 중 나타난 프레임워크들
그리고 프레임워크는 그 모든 것을 쉽게 만들어주었나니..
15. Angular
완전하고 빠른 프레임워크
React
활발하고 오픈 되어 있으며 합리적인 프레임워크
VueJS
가볍고 친숙하며 장점만을 합쳐놓은 프레임워크
그러던 중 나타난 프레임워크들
그리고 프레임워크는 그 모든 것을 쉽게 만들어주었나니..
16. Angular
완전하고 빠른 프레임워크 인기가 없음, 오버엔지니어링
React
활발하고 오픈 되어 있으며 합리적인 프레임워크 너무 힙함
VueJS
가볍고 친숙하며 장점만을 합쳐놓은 프레임워크 DOM 테스트하기 힘듦
그러던 중 나타난 프레임워크들
그리고 프레임워크는 그 모든 것을 쉽게 만들어주었나니..
17. Angular
모든 기능이 내장되어 있으며 성능이 훌륭하지만, 진입장벽이 가장 높음
React
에코시스템이 활발하게 움직이고 또 그것을 장려하지만
의존과 버전에 민감하고 라이브러리 자체의 기능만으로는 부족함
VueJS
프레임워크 자체가 가볍고 진입장벽이 낮으며 각 프레임워크의 장점을 흡수
다만 크기가 커질 수록 재활용성은 떨어지며, 테스트하기 어렵고 느림
이를 풀어 설명하자면
51. AOT 성능 변화
크기 (minified)
지연시간 (initial load)
메모리 (snapshot)
442KB
585ms
38.5MB
198KB
305ms
15.3MB
-55%
-48%
-60%
JIT AOT
JIT AOT
52. VirtualDOM
VirtualDOM (가상 DOM)
뷰 모델에서 발생하는 변경사항을 메모리에서 관리하는 논리적 DOM에서 먼저 감지 한 후
실제 DOM의 업데이트를 최소화하여 성능을 향상시키고 UX 측면에서 발생하는 문제를 줄임
미지원
지원
지원
VirtualDOMViewModel
Element A
Element B1
Element B2
Element B
Element A
Element B1
Element B2
Element B
header
.list-item
.list-item
.container
NativeDOM
(Real DOM)
diff patch
53. VirtualDOM
기존의 비싼 비용의 Native DOM 처리를 javascript 상의 diff 알고리즘을 통해
저렴한 비용으로 효율적인 처리가 가능해짐
MDN에 공개된 브라우저 Layout 처리
54. Angular의 최적화가 적용되지 않은 케이스에서는
VueJS가 성능이 빠를 것으로 예상됩니다.
(VueJS에서 제공하는 자료와 벤치마크 데이터 참조)
57. 마이크로 프로젝트에는 VueJS 권장
서버사이드 랜더링이 필요한 프로젝트에는 React
대규모의 프로젝트에는 Angular
58. 템플릿
{{interpolation}}
[1way data binding]
[(2way data binding)]
(1way data binding (event))
{{interpolation with pipe | pipeName}}
*ngFor *ngIf
[ngSwitch] [hidden] [innerHTML] [ngClass]
(click) (keypress) (blur) (input) (change)
…
React에서 공식적으로
제공하는 템플릿은 없습니다.
모든 것을
JSX 혹은 Javascript를 이용하여
표현합니다.
react-templates
라이브러리를 이용하면
다른 프레임워크와 유사하게
템플릿을 사용하실 수 있습니다.
v-directive-name:parameter
{{interpolation | filter}}
v-bind:id v-if v-html
v-for v-else v-else-if
v-show v-bind:class v-bind:style
v-on:event-name
v-bind:bind-target-name
{{interpolation}}
:store-name
v-model
61. Angular Change Detection & NgZone
NgZone의 몽키패칭된 이벤트로부터 변화를 감지하여 Change Detection Strategy에 맞게 변화를 전파
setTimeout, addEventListener,
requestAnimationFrame
NgZone
Monkey Patched
Tick
62. 1
React Reconciliation & React Fiber
React Reconciliation
React FibershouldComponentUpdate()
Dealing control by element types
(aka. Pair-wise diff)
2 3
Dealing control by key
(aka. List-wise diff)
Update DOM
render() 호출 시 VirtualDOM 생성 및 Dirty model을 감지하여 React Reconciliation 과정을 진행 후 React Fiber 혹은 DOM 변경
63. VueJS watcher & VirtualDOM
data 프로퍼티에서 Object.defineProperty()를 통해 Watcher가 변화를 감지 변화를 수신 시
render 함수에 의해 VirtualDOM에 따른 DOM 변경