JavaScript 프레임워크 살펴보기

이항희

● 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

● 약간의 학습으로 Sencha Touch 로 바로 Mobile 개발도 가능함

● 학습 비용이 어느정도 있다● 디자인 수정이 어렵다는건 큰 단점

ApplicationLibrary and Frameworks

Library와 Framework 로 구분해보면

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/

Application Library 트렌드

Backbone.js

● Library● 정말 작은 크기

○ 800 라인의 파일 하나뿐○ 사용법이 간단하여 학습 비용도 적음

● Underscore.js 에 의존성● Model과 View의자연스러운 연동● 다른 Library나 Framework와 혼용하기도 쉽다.

Application Framework트렌드

AngularJS

● Framework● DOM의 선언적 바인딩으로 복잡한 셀렉터 구문 삭제

● Directive를 통해 DOM을 확장, 새로운 재활용 컨트롤을 만들어낼 수 있다

● Google의 강력한 Push● IE 에서 성능이 저하되는 등 성능 이슈 존재

tipJS

● MVC Framework● 간단한 문법으로 MVC 패턴을 적용 가능● 다른 라이브러리와 결합이 자유로움● AOP 지원● 문서가 한글● 피드백이 빠름!

http://todomvc.com/

QnA