JavaScript 2014 프론트엔드 기술 리뷰
26
-
Upload
kenu-heo -
Category
Technology
-
view
9.029 -
download
5
Transcript of JavaScript 2014 프론트엔드 기술 리뷰
이번 얘기는
❖ 프론트엔드 프레임워크 트렌드!
❖ 자바스크립트 MVC 프레임워크 비교!
❖ 프론트엔드 테스트 자동화
2004년 이후 web2.0과 더불어
X-internet 제품
executable internet!자바 + *플랫폼!<embed> 일종의 ActiveX!플래시 기술도 ActiveX!
크롬 때문에
탈IE 움직임
전세계 트렌드와 한국은 아주 다름!
http://gs.statcounter.com/#browser-ww-monthly-200807-201401
http://gs.statcounter.com/#browser-KR-monthly-200807-201401
아이폰 안드로이드 덕분에
HTML5 급성장
2009년 구글!2010년 스티브 잡스 vs Flash!2014년 HTML5 스펙 완성 예정!웹 애플리케이션 제작 목적!특별히 One Page App(OPA) http://daphyre.deviantart.com/art/HTML5-Logos-and-Badges-380429526
자바스크립트 제3의 물결
달라진 위상
대충 베껴쓰던 옛날!구글맵이 나오고 난 뒤!Ajax 용어 등장!Prototype.js, YUI, Dojo, Mootools, ExtJS!자바스크립트 라이브러리 춘추전국시대!2004~2007!jQuery로 천하통일
http://goo.gl/2ngPQz
브라우저 탈출
COMMONJS
javascript: not just for browsers any more!!
exports.add = function() {};!
var add = require(‘math’).add;!http://wiki.commonjs.org/wiki/Modules/1.0
JS Platform
Node.js
자바스크립트 플랫폼!서버도 자바스크립트!커맨드라인툴!! * express!! * phonegap, cordova!! * weinre!! * grunt!! * yeoman
http://nodejs.org/logos/
그래서 만들어진 Ecosystem
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/
자바스크립트 MV* 프레임워크 비교
JS MVCFramework 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/
구글에서 만든 AngularJS 인기!< > anglar Tag!
JS MVC trends
JS MVC 사용시 주의사항
❖ 검색엔진과 페이스북 미리보기 이슈!
❖ 구글 Analytics와 모니터링 이슈!
❖ 느리고 복잡해진 빌드 이슈!
❖ 테스트 이슈!
❖ 느린 API 호출로 인한 지연 이슈!
❖ 5 surprisingly painful things about client-side JS https://sourcegraph.com/blog/switching-from-angularjs-to-server-side-html
무한 스크롤 페이지 SEO❖ 구글의 가이드!❖ <link rel="prev"…>!
❖ <link rel="next"…>
http://googlewebmastercentral.blogspot.kr/2014/02/infinite-scroll-search-friendly.html
프론트엔드 테스트 자동화
테스트 어렵다
사람이 할 짓이
자동화 도구 활용 필요!jQuery가 사용하는 QUnit!git clone https://github.com/jquery/jquery.git!npm install -g locally!cd jquery!locally!http://localhost:8080/test
너무 많은 브라우저
업보
http://karma-runner.github.io!멀티 브라우저 테스트
http://eamodeorubio.github.io/bdd-with-js/#/36
성능 테스트
JSperf
브라우저마다 다른 성능!http://jsperf.com!
http://jsperf.com/jquery-v-query-selector
해상도 테스트
pageres
npm install -g pageres!pageres http://okjsp.net/jsp/recent.jsp 1024x768 1600x900!
JS Test 참고
❖ QUnit http://qunitjs.com!
❖ JSCoverage http://blog.siliconforks.com/category/jscoverage/!
❖ Karma http://karma-runner.github.io
감사합니다
