6. 왜 개발자들이 좋아할까? (특히 BACK-
END)
코드 일관성 (개인 스타일 편차 적음)
구조적 (MVC 패턴)
코드량 감소 (이벤트 바인딩, 뷰 업데이트 코드
등)
코드의 재사용
양방향 데이터 바인딩(Two-Way Data
Binding)
다양한 Module을 활용한 빠른 개발
7. 간단 ANGULARJS 예제 #1
HTML Result Edit on
<html ng-app> <!-- (1) 하위 영역은 AnguarJS 어플리케이션으로 인식됨 -->
<head>
<title>AngularJS</title>
<!-- AngularJS 로딩 -->
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
</head>
<body>
<div>
<!-- (2) 데이터 바인딩을 위해 사용되는 지시자로, 값으로 지정한 'name'은 모델의 이름으로 사용 -->
<input type='text' ng-model='name' />
<!-- (3) 데이터의 출력을 위한 템플릿 표현 식으로, 이중 중괄호로 묶어 사용한다. 이곳에 사용된 모델명인 'name'은
ng-model='name'과 바인딩 되어 처리된다. -->
<h2>{{name}}</h2>
</div>
</body>
</html>
8. 간단 ANGULARJS 예제 #2
HTML JS Result Edit on
<html ng-app="myApp">
<head>
<title>AngularJS</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
</head>
<body>
<!--
컨트롤러는 모듈 내에 정의되며, HTML 요소와 묶이도록 구성된다.
컨트롤러에는 비즈니스 로직이 구현되며, 데이터와 이벤트 핸들러 함수 등이 포함된다.
-->
<div ng-controller="myController1">
<ul>
<li ng-repeat="fruit in fruits">
<span>{{fruit.name}}</span> / <span>{{fruit.qty}}</span>
</li>
</ul>
<button ng-click="setValue()">변경</button>
</div>
11. 개발방법 비교:
DOM 제어 VS ANGULARJS
Doubleclick to edit a todo
Created by Sindre Sorhus
Part of TodoMVC
jQuery
Example
Source
jQuery is a fast, small, and featurerich
JavaScript library. It makes things like
HTML document traversal and
manipulation, event handling,
animation, and Ajax much simpler with
an easytouse API that works across
a multitude of browsers. With a
combination of versatility and
extensibility, jQuery has changed the
way that millions of people write
JavaScript.
“
”
todos
What needs to be done?
14. 개발방법 비교:
DOM 제어 VS ANGULARJS
구분 종류 크기(byte) Total(byte)
DOM 제어(Jindo) HTML 1,164 4,951 (100%)
JavaScript 3,787
AngularJS HTML 2,059 3,161 (63.84%)
JavaScript 1,102
20. 고려사항: 성능 #1 TODOMVC BENCHMARK
Step Tests Run All
Backbone 1.1.2
Backbone/Adding100Items
Backbone/CompletingAllItems
Backbone/DeletingAllItems
Ember 1.8.1 + Handlebars 1.3.0
Ember/Adding100Items
Ember/CompletingAllItems
Ember/DeletingItems
Angular 1.2.27
Angular/Adding100Items
Angular/CompletingAllItems
Angular/DeletingAllItems
React 0.12.1
React/Adding100Items
React/CompletingAllItems
React/DeletingAllItems
Om 0.5.0 + React 0.9.0
Om/Adding100Items
Om/CompletingAllItems
Om/DeletingAllItems
http://dsuket.github.io/todomvc-perf-comparison/
21. 고려사항: 성능 #2 초기 로딩&렌더링
http://www.filamentgroup.com/lab/mv-initial-load-times.html
22. 고려사항: 성능 #3 데이터 처리
100개 목록 데이터가 HTML에 포함되어 처리되는 경우
리스트 0디지털타임스 오후 1:15
리스트 1디지털타임스 오후 1:15
리스트 2디지털타임스 오후 1:15
리스트 3디지털타임스 오후 1:15
리스트 4디지털타임스 오후 1:15
리스트 5디지털타임스 오후 1:15
리스트 6디지털타임스 오후 1:15
리스트 7디지털타임스 오후 1:15
리스트 8디지털타임스 오후 1:15
리스트 9디지털타임스 오후 1:15
금융 증권 부동산
홈 정치 경제 연예 사회 IT 생활 세계 포토
로딩 속도 : 72ms
리스트 0 디지털타임스 오후 1:15
리스트 1 디지털타임스 오후 1:15
리스트 2 디지털타임스 오후 1:15
리스트 3 디지털타임스 오후 1:15
리스트 4 디지털타임스 오후 1:15
리스트 5 디지털타임스 오후 1:15
리스트 6 디지털타임스 오후 1:15
리스트 7 디지털타임스 오후 1:15
리스트 8 디지털타임스 오후 1:15
리스트 9 디지털타임스 오후 1:15
금융 증권 부동산
홈 정치 경제 연예 사회 IT 생활 세계 포토
로딩 속도 : 138ms
일반적 방식 ← click to refresh → AngularJS
23. 고려사항: 성능 #4 데이터 바인딩
데이터 편차에 따른 처리 속도
리스트 0디지털타임스 오후 1:15
리스트 1디지털타임스 오후 1:15
리스트 2디지털타임스 오후 1:15
리스트 3디지털타임스 오후 1:15
리스트 4디지털타임스 오후 1:15
리스트 5디지털타임스 오후 1:15
리스트 6디지털타임스 오후 1:15
금융 증권 부동산
100 200 300 400 500 600 700 800 900
1000 1100 1200 1300 1400 1500 1600 1700
1800 1900 2000
로딩 속도 :
리스트 0 디지털타임스 오후 1:15
리스트 1 디지털타임스 오후 1:15
리스트 2 디지털타임스 오후 1:15
리스트 3 디지털타임스 오후 1:15
리스트 4 디지털타임스 오후 1:15
리스트 5 디지털타임스 오후 1:15
리스트 6 디지털타임스 오후 1:15
금융 증권 부동산
100 200 300 400 500 600 700 800 900
1000 1100 1200 1300 1400 1500 1600 1700
1800 1900 2000
로딩 속도 :
One-Way Data Binding vs. Two-Way Data Binding