JavaScript 2014 프론트엔드 기술 리뷰
- 1. 트렌드를 읽다 프론트엔드 기술 리뷰 허광남! [email protected]
- 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
- 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/
- 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!
- 26. 감사합니다