자바스크립트 MVC 프레임웍

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

– MVC and the Web

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

 

 

출처 : http://ingeec.tistory.com/52