JavaScript 2014 프론트엔드 기술 리뷰

12,251 views

Published on

Published in: Technology
10 Comments
103 Likes
Statistics
Notes
No Downloads
Views
Total views
12,251
On SlideShare
0
From Embeds
0
Number of Embeds
731
Actions
Shares
0
Downloads
302
Comments
10
Likes
103
Embeds 0
No embeds

No notes for slide

JavaScript 2014 프론트엔드 기술 리뷰

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

×