O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
이항희
● 34살
● 자바카페 운영진
● undefine:D 운영진
● 6년차 웹 프로그래머
● JS MVC Framework tipJS 컨트리뷰터
● atconsole.com 팀블로그 필자
최근 Front-End
복잡해지고 거대해지는 중
● Website는 Web Application으로 변화
● 사용자의 눈이 높아짐 - 다양한 UI/UX
● Cross-Browsing
● Cross-Flatform
● Responsive
사용되는 JavaScript 량이
대폭 증가
SNS Web Application
한번 만들어 볼까...?
난 패기넘치는
신입 개발자!
Facebook?
기본적인 타임라인
상단 고정 네비게이션 메뉴 바
비동기 실시간 친구 타임라인
온라인 친구 목록 및 채팅
검색어 자동완성 텍스트 박스
툴팁 컨트롤
드랍다운 메뉴 바
Modal 레이어
바닥부터 구현...
그럴 능력도 없었기 때문인가?
거인의 어깨 위에 올라서서 더 넓은 세
상을 바라보라
아이작 뉴턴
Front-End Framework
몇 개나 아
시나요?
잠깐...Framework, Library?
● 코딩 방식에서 능동과 수동
● 축구공과 축구경기장의 차이
● 대체적으로 Library는 혼용하기 쉽지만
Framework는 혼용이 어렵다.
Framework and Library
간략한 구분...
● Util
● Widget
● Application (full-stack)
Util
Util Library 트렌드
천하통일 기세 jQuery
● 사용량 측면에서 보면 JavaScript 그 자체가
되어가는 듯
● jQuery에 의존하는 또 다른 Framework 들이
등장할 정도
● De-facto?
Widget
Widget Library 트렌드
깔끔한 Widget, Ext.JS
● 생각보다 다양한 기능
○ Widget
○ Class System
○ Util (Dom Control, Ajax, extend etc...)
○ MVC Framework
● 약간의 학...
Application
Library and Frameworks
Library와 Framework 로 구분해보면
Library, Framework
Library Framework
Backbone Ember
Knockout AngularJS
Spine Batman
CanJS Meteor
http://blog.stevensanders...
Application Library 트렌드
Backbone.js
● Library
● 정말 작은 크기
○ 800 라인의 파일 하나뿐
○ 사용법이 간단하여 학습 비용도 적음
● Underscore.js 에 의존성
● Model과 View의자연스러운 연동
● 다른 ...
Application Framework트렌드
AngularJS
● Framework
● DOM의 선언적 바인딩으로 복잡한 셀렉터 구
문 삭제
● Directive를 통해 DOM을 확장, 새로운 재활용
컨트롤을 만들어낼 수 있다
● Google의 강력한 Push
●...
tipJS
● MVC Framework
● 간단한 문법으로 MVC 패턴을 적용 가능
● 다른 라이브러리와 결합이 자유로움
● AOP 지원
● 문서가 한글
● 피드백이 빠름!
http://todomvc.com/
QnA
Próximos SlideShares
Carregando em…5
×

JavaScript 프레임워크 살펴보기

11.834 visualizações

Publicada em

  • Login to see the comments

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

×