Modern Javascript WebApp 동향
+ SPA : Single Page Application
- 하나의 HTML 파일(Single Page)에 여러 화면을 담아 제공
- 화면이 바뀔 때마다 새로운 HTML 파일을 읽어들일 필요가 없어지기 때문에 응답성이 개선됨
- WebApp의 현재 상태/화면을 hash-url(한 HTML 페이지 안의 위치를 나타내기 위해 사용하는 #으로 시작되는 http://some.domain.com/some-page.html#some-location 과 같은 형태의 URL)로 관리
- hash-url을 이용하여 WebApp의 상태/화면 관리하는 개념을 Routing이라고 하고, hash-url을 해석해서 WebApp의 상태/화면을 관리하는 모듈을 Router라고 함
+ Off-line enabled WebApp
- HTML5의 off-line 지원 기능을 활용, 네트웍에 연결되어 있지 않아도 로컬에 캐시된 WebApp 코드를 이용해서 WebApp을 실행
- Off-line enabled WebApp이 되려면 서버의 도움 없이 실행될 수 있도록 모든 프로그램 로직이 front-end에 존재해야 함
+ BaaS : Back-end as a Service
- WebApp의 front-end에 모든 로직을 담고 정형화된 back-end를 RESTful API 형태로 제공하는 개념
- Back-end가 제공하는 데이터를 가공하는 모든 로직은 front-end에 존재해야 함
=> SPA, Offline enabled Web App, BaaS 등 Modern JS WebApp은 기본적으로 규모가 큰 front-end 코드를 요구함
=> front-end code의 규모가 커짐에 따라 소스코드의 유지/보수 비용을 절감하기 위해 MVC 패턴을 이용해서 WebApp 코드를 구조적으로 만들 필요가 생김
MVC 디자인 패턴
+ 디자인 패턴이란?
- 재사용 가능한 소프트웨어 디자인(설계)
- 검증된 문제 해결 방식
- 필요에 따라 유연하게 적용 가능
+ MVC 패턴이란?
- Model, View, Controller로 소프트웨어 구조를 나눔
- Model은 데이터를 표현
- View는 화면(보통 아무런 로직도 없음)을 표현
- Controller는 M과 V 사이의 조율, 비즈니스 로직을 처리
- 전통적으로 서버-사이드에서 많이 사용됨
MVC를 지원하는 Javascript f/w 종류
+ JavaScriptMVC
- 완성도 높은 성숙한 기술
- all-in-one 솔루션
- 대규모 프로젝트에 적합
- GrooveShark(미국의 음원 제공 서비스)에 적용됨
+ Backbone.js
- 경량
- SPA 제작에 최적
- 다른 컴포넌트와 함께 사용하기 좋음
- MetaLab, SoundCloud, BitTorrent 등에 적용됨
+ Spine.js
- 경량
- Class 개념 제공
- Backbone API에 기초하여 Backbone 개발자라면 추가 학습 비용이 낮음
+ Sammy.js
- Route 기반 앱 개발에 적합한 경량 프레임워크
- Controller만 제공 (M과 V를 제공하지 않음)
- PaperlessPost에 적용됨
+ SproutCore
- 데스크탑 어플 같은 Rich함을 지향하는 앱 개발에 적합
- 대규모 엔터프라이즈 앱 개발에 적합
- 애플 MobileMe에 적용됨
Reference
http://kanian77.wordpress.com/category/software-engineering/mvc/mvc-and-the-web/page/3/
- Tools For jQuery Application Architecture (Extended Slides)
http://addyosmani.com/toolsforjqueryapparchitecture/
http://blog.outsider.ne.kr/787
- Digesting JavaScript MVC ? Pattern Abuse Or Evolution?
http://addyosmani.com/blog/digesting-javascript-mvc-pattern-abuse-or-evolution/
- Scaling Isomorphic Javascript Code
http://blog.nodejitsu.com/scaling-isomorphic-javascript-code
- MVC Architecture for JavaScript Applications
http://michaux.ca/articles/mvc-architecture-for-javascript-applications
