JavaScript 프레임워크 살펴보기

10,501 views

Published on

1 Comment
27 Likes
Statistics
Notes
No Downloads
Views
Total views
10,501
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
144
Comments
1
Likes
27
Embeds 0
No embeds

No notes for slide

JavaScript 프레임워크 살펴보기

  1. 1. 이항희 ● 34살 ● 자바카페 운영진 ● undefine:D 운영진 ● 6년차 웹 프로그래머 ● JS MVC Framework tipJS 컨트리뷰터 ● atconsole.com 팀블로그 필자
  2. 2. 최근 Front-End
  3. 3. 복잡해지고 거대해지는 중 ● Website는 Web Application으로 변화 ● 사용자의 눈이 높아짐 - 다양한 UI/UX ● Cross-Browsing ● Cross-Flatform ● Responsive
  4. 4. 사용되는 JavaScript 량이 대폭 증가
  5. 5. SNS Web Application 한번 만들어 볼까...? 난 패기넘치는 신입 개발자!
  6. 6. Facebook? 기본적인 타임라인
  7. 7. 상단 고정 네비게이션 메뉴 바 비동기 실시간 친구 타임라인 온라인 친구 목록 및 채팅
  8. 8. 검색어 자동완성 텍스트 박스 툴팁 컨트롤
  9. 9. 드랍다운 메뉴 바
  10. 10. Modal 레이어
  11. 11. 바닥부터 구현... 그럴 능력도 없었기 때문인가?
  12. 12. 거인의 어깨 위에 올라서서 더 넓은 세 상을 바라보라 아이작 뉴턴
  13. 13. Front-End Framework
  14. 14. 몇 개나 아 시나요?
  15. 15. 잠깐...Framework, Library?
  16. 16. ● 코딩 방식에서 능동과 수동 ● 축구공과 축구경기장의 차이 ● 대체적으로 Library는 혼용하기 쉽지만 Framework는 혼용이 어렵다. Framework and Library
  17. 17. 간략한 구분... ● Util ● Widget ● Application (full-stack)
  18. 18. Util
  19. 19. Util Library 트렌드
  20. 20. 천하통일 기세 jQuery ● 사용량 측면에서 보면 JavaScript 그 자체가 되어가는 듯 ● jQuery에 의존하는 또 다른 Framework 들이 등장할 정도 ● De-facto?
  21. 21. Widget
  22. 22. Widget Library 트렌드
  23. 23. 깔끔한 Widget, Ext.JS ● 생각보다 다양한 기능 ○ Widget ○ Class System ○ Util (Dom Control, Ajax, extend etc...) ○ MVC Framework ● 약간의 학습으로 Sencha Touch 로 바로 Mobile 개발도 가능함 ● 학습 비용이 어느정도 있다 ● 디자인 수정이 어렵다는건 큰 단점
  24. 24. Application Library and Frameworks
  25. 25. Library와 Framework 로 구분해보면
  26. 26. Library, Framework Library Framework Backbone Ember Knockout AngularJS Spine Batman CanJS Meteor http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/
  27. 27. Application Library 트렌드
  28. 28. Backbone.js ● Library ● 정말 작은 크기 ○ 800 라인의 파일 하나뿐 ○ 사용법이 간단하여 학습 비용도 적음 ● Underscore.js 에 의존성 ● Model과 View의자연스러운 연동 ● 다른 Library나 Framework와 혼용하기도 쉽 다.
  29. 29. Application Framework트렌드
  30. 30. AngularJS ● Framework ● DOM의 선언적 바인딩으로 복잡한 셀렉터 구 문 삭제 ● Directive를 통해 DOM을 확장, 새로운 재활용 컨트롤을 만들어낼 수 있다 ● Google의 강력한 Push ● IE 에서 성능이 저하되는 등 성능 이슈 존재
  31. 31. tipJS ● MVC Framework ● 간단한 문법으로 MVC 패턴을 적용 가능 ● 다른 라이브러리와 결합이 자유로움 ● AOP 지원 ● 문서가 한글 ● 피드백이 빠름!
  32. 32. http://todomvc.com/
  33. 33. QnA

×