1. 트렌드를 읽다
프론트엔드
기술 리뷰
허광남!
kenu@okjsp.net

2. 이번 얘기는
❖
프론트엔드 프레임워크 트렌드!
❖
자바스크립트 MVC 프레임워크 비교!
❖
프론트엔드 테스트 자동화

3. 2004년 이후 web2.0과 더불어
X-internet 제품
executable internet!
자바 + *플랫폼!
<embed> 일종의 ActiveX!
플래시 기술도 ActiveX!

4. 크롬 때문에
탈IE 움직임
전세계 트렌드와 한국은 아주 다름!
http://gs.statcounter.com/#browser-ww-monthly-200807-201401
http://gs.statcounter.com/#browser-KR-monthly-200807-201401

5. 아이폰 안드로이드 덕분에
HTML5 급성장
2009년 구글!
2010년 스티브 잡스 vs Flash!
2014년 HTML5 스펙 완성 예정!
웹 애플리케이션 제작 목적!
특별히 One Page App(OPA)
http://daphyre.deviantart.com/art/HTML5-Logos-and-Badges-380429526

6. HTML5 게임들이…
와르르르
chrome.angrybirds.com!
flapmmo.com!

7. www.quakejs.com

8. 자바스크립트 제3의 물결
달라진 위상
대충 베껴쓰던 옛날!
구글맵이 나오고 난 뒤!
Ajax 용어 등장!
Prototype.js, YUI, Dojo, Mootools, ExtJS!
자바스크립트 라이브러리 춘추전국시대!
2004~2007!
jQuery로 천하통일
http://goo.gl/2ngPQz

9. 브라우저 탈출
COMMONJS
javascript: not just for browsers any more!!
exports.add = function() {};!
var add = require(‘math’).add;!
http://wiki.commonjs.org/wiki/Modules/1.0

10. JS Platform
Node.js
자바스크립트 플랫폼!
서버도 자바스크립트!
커맨드라인툴!
!
* express!
!
* phonegap, cordova!
!
* weinre!
!
* grunt!
!
* yeoman
http://nodejs.org/logos/

11. 그래서 만들어진
Ecosystem

13. Paypal이 JS간 이유는?
작고 빨라졌어요
더 적은 인원으로 개발이 2배 더 빨라졌고,
Built almost twice as fast with fewer people!
코드의 라인 수가 33%만큼 줄었으며
Written in 33% fewer lines of code!
40%줄어든 파일 갯수로 만들어 집니다
Constructed with 40% fewer files
https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/

14. 자바스크립트 MV* 프레임워크 비교

15. JS MVC
Framework
UI Bindings Composed Views Web Presentation Layer
Plays Nicely With Others
Backbone.js
✗
✗
✓
✓
SproutCore 1.x
✓
✓
✗
✗
Sammy.js
✗
✗
✓
✓
Spine.js
✗
✗
✓
✓
Cappuccino
✓
✓
✗
✗
Knockout.js
✓
✗
✓
✓
Javascript MVC
✗
✓
✓
✓
Google Web Toolkit
✗
✓
✗
✗
Google Closure
✗
✓
✓
✗
Ember.js
✓
✓
✓
✓
Angular.js
✓
✗
✓
✓
Batman.js
✓
✗
✓
✓
http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/

16. 구글에서 만든 AngularJS 인기!
< > anglar Tag!

17. JS MVC trends

18. JS MVC 사용시 주의사항
❖
검색엔진과 페이스북 미리보기 이슈!
❖
구글 Analytics와 모니터링 이슈!
❖
느리고 복잡해진 빌드 이슈!
❖
테스트 이슈!
❖
느린 API 호출로 인한 지연 이슈!
❖
5 surprisingly painful things about client-side JS
https://sourcegraph.com/blog/switching-from-angularjs-to-server-side-html

19. 무한 스크롤 페이지 SEO
❖
구글의 가이드!
❖
<link rel="prev"…>!
❖
<link rel="next"…>
http://googlewebmastercentral.blogspot.kr/2014/02/infinite-scroll-search-friendly.html

20. 프론트엔드 테스트 자동화

21. 테스트 어렵다
사람이 할 짓이
자동화 도구 활용 필요!
jQuery가 사용하는 QUnit!
git clone https://github.com/jquery/jquery.git!
npm install -g locally!
cd jquery!
locally!
http://localhost:8080/test

22. 너무 많은 브라우저
업보
http://karma-runner.github.io!
멀티 브라우저 테스트
http://eamodeorubio.github.io/bdd-with-js/#/36

23. 성능 테스트
JSperf
브라우저마다 다른 성능!
http://jsperf.com!
http://jsperf.com/jquery-v-query-selector

24. 해상도 테스트
pageres
npm install -g pageres!
pageres http://okjsp.net/jsp/recent.jsp
1024x768 1600x900!

25. JS Test 참고
❖
QUnit
http://qunitjs.com!
❖
JSCoverage
http://blog.siliconforks.com/category/jscoverage/!
❖
Karma
http://karma-runner.github.io

26. 감사합니다