페이스북 스파르탄 프로젝트의 비밀병기 Bolt.JS

[출처 : kth 웹어플리케이션팀, 2011년11월10일]

웹 서비스와 어플리케이션 개발을 위해 대부분의 경우 jQuery를 사용한다. 가볍고 훌륭한 이 프레임웍은 전 세계 개발자의 열기에 힘입어 거의 웹개발을 위한 표준 프레임웍이 되었다. jQuery 외에도 jQueryMobile과 Sencha Touch, jQTouch 등 몇가지 프레임웍이 더 있고 계속해서 새로운 종류가 등장하고 있다. 그만큼 프론트엔드 개발분야가 다양하다는 것을 시사하지만 프레임워크마다 좋은 점을 내세우고 개발의 편의성과 효율성을 자랑하는 가운데 정작 프레임워크 간에는 어떤 상호 연결성도 없으며 각각의 프레임워크를 위해 제작된 플러그인이나 라이브러리를 목적에 맞게 조절하지 않고는 그냥 가져다 쓸 수 없다. 이런 점 때문에 개발자는 프로젝트에 프레임워크별로 의존성이 생기는 것을 꺼리게 되고 프로젝트마다 저마다의 고유한 라이브러리나 프레임워크를 제작하려는 경향을 보였다.

이런 문제의 근본 원인은 자바스크립트가 중/대형 규모의 어플리케이션 제작이나 재 사용성 확보에 있어 반드시 제공해야하는 ‘모듈화 프로그래밍 구조’에 무게를 두고 설계된 언어가 아니기 때문이다. YUI와 PrototypeJS 에 이어 jQuery를 활용하는 시기가 지나는동안 개발자들은 모듈화 프로그래밍 문제를 해결하기 위해 자체적으로 꾸준한 시도를 해왔으나 폭넓은 사용자 층을 얻지 못하였다. 그러던중, 2009년 1월에 Kevin Dangoor에 의해서 “ServerJS”라는 이름의 프로젝트가 시작되었다. 곧 “CommonJS”로 변경된 이 프로젝트는 웹 브라우저 밖의 환경을 위한 자바스크립트 ecosystem 을 기술하는 것을 목적으로 하고 자바스크립트의 가장 취약한 부분중에 하나였던 ‘모듈화 개발을 위한 API 표준’을 제시하여 중/대형 규모의 어플리케이션 제작에 물꼬를 트게 하였다.

바로 이 CommonJS API 규격을 바탕으로 Facebook에 의해 제작된 Bolt.JS는 공개되자마자 전 세계 개발자의 상당한 관심을 끌었으나 돌연 GitHub등에서 소스가 삭제되고 어떠한 추가 공지도 없이 제대로 작성되지 않은 홈페이지 문서만 제공될 뿐이다. 홈페이지 문서와 관련된 기사를 훝어보던 중, 단순한 UI 프레임워크가 아님을 직감하였고 여러 경로를 뒤진후에 얻은 소스를 분석하였다. 예상대로 공식문서에서 보이는 것보다 훨씬 잠재력이 있다는 것과 웹 어플리케이션 제작에 있어 상당 부분에 영향을 줄 수 있다는 것을 이 리뷰를 통해 기술하고자 한다.

개요:
BoltJS는 오직 HTML5와 자바스크립트만을 사용하여 환상적인 모바일 웹 어플리케이션을 제작하는 것을 도와주는 UI 프레임웍이다. 서버사이드 처리 과정이 필요없으며 자바스크립트로만 작성되어 브라우저에서 동작하는 BoltJS는 현재 모바일 WebKit 기반 브라우저에 맞춰져 있다. 현재 Facebook의 Spartan 프로젝트가 모바일 WebKit에 초점을 맞추고 있기 때문이다.

구조 및 내장 기능:
Bolt.JS는 공개된 베타버전에서만 13,496 라인에 이르는 코드로 작성되어 있으며 다음과 같은 주요 패키지를 CommonJS 규격에 맞추어 자체적으로 포함하고 있다.

도식 1. Bolt.JS 구조

iScroll v4는 모바일용 HTML5 어플리케이션에 스크롤 관련 필수 기능을 제공하며 tokenizerTypeahead는 유용한 입력기능을, underscore.js 는 functional programming에서 쓰이는 고차함수 (higher-order function) 라이브러리로써 모듈성과 템플릿 기능을 제공한다. 이중에 눈여겨 봐야 할 것은 Javelin.JS 인데, 이벤트 처리를 모바일 웹 어플리케이션 제작에 최적화 시킨 프레임웍이다. Javelin.JS는 또 하나의 주제가 되므로 본 리뷰에서는 제외하였다.
또한, 모바일 웹 어플리케이션 제작에 있어 핵심적인 레이아웃과 ‘View’ 라 명명되는 내장 UI가 상당수 제공된다:

도식 2. Bolt.JS UI components

특징: LDAP 처럼 CommonJS 스펙을 구현하였다는 점이다.
서버사이드 자바스크립팅 환경인 NodeJS 역시 CommonJS 스펙에 기반하여 API를 작성하였기에 안정버전이 0.6 이지만 사용가능 모듈수는 2011년 11월 8일 현재 4870개에 달하며 다양한 서버측 요구조건에 맞는 모듈을 쉽게 찾을 수 있다. 2010년 초반에 소개된 NodeJS 가 불과 2년이 되지 않은 시점에서 이렇게 발전할 수 있었던 것은 저마다 제각각의 API를 가졌던 jQuery, ExtJS, YUI는 달리 CommonJS API에 기반하여 모듈을 제작할수 밖에 없는 구조 때문이다. Bolt.JS 역시 표준화된 API 덕분에 어플리케이션 개발자는 서로의 모듈을 손쉽게 가져다 사용할 수 있으며 통합개발환경 (Facebook이 제작한다는 루머가 있지만 확인하지 못하였다) 의 도움을 받아 고수준의 어플리케이션을 손쉽게 만들 수도 있는 것이다.

예제 코드:
전통적인 ‘HelloWorld’를 표시하는 예제를 통해 Bolt.JS의 활용을 살펴보자. 우선, 기존 웹 어플리케이션과는 달리 ‘패키지’ 개념이 있다는 점이 틀리다. 패키지는 .html 파일과 .js, .css 등으로 구성되며 package.json 파일에 JSON 포맷으로 기술되야 한다. 이 역시 CommonJS 요구사항이다.

package.json:

{
“bolt_build_manifest” : [{ “sources”: [ “css”, [“”, “js”]],
“package_target”: “pkg”, // 이름이 ‘pkg’인 폴더를 가리킨다
“package_name”: “helloworld”}] }

– View를 정의하는 helloworld.js:

require.define({‘helloworld’: function(require, exports, module) {

var core = require(‘javelin/core’);
var View = require(‘view’).View;

var HelloView = core.createClass({
extend: View,

declare: function(options) {
return{
content: “Hello World!”
}}
})

exports.init = function() {
require(‘builder’).build({
view: HelloView
}).placeIn(document.body);
}

}});

– Control 을 담당하는 helloworld.js (위의 것과 이름이 같지만 다른 폴더에 있다):

var core = require(‘javelin/core’);
var View = require(‘view’).View;

var HelloView = core.createClass({
extend: View,
declare: function(options) { return{ content: “Hello World!” }}
});

exports.init = function() {
require(‘builder’).build({ view: HelloView }).placeIn(document.body);
}

– 마지막으로, helloworld.html이다 (helloworld.css 파일은 생략):

<html>
<head>
<title>Hello World Application</title>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<meta name = “viewport” content=”initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,target-densityDpi=device-dpi” />
<link rel=”stylesheet” href=”lib/bolt.css” type=”text/css” media=”screen” charset=”utf-8″>
<link rel=”stylesheet” href=”pkg/helloworld.css” type=”text/css” media=”screen” charset=”utf-8″>
<script src=”lib/bolt.js”></script>
<!– HelloWorld JS –>
<script type=”text/javascript” charset=”utf-8″ src=”pkg/helloworld.js”></script>
</head>
<body>
<script type=”text/javascript” charset=”utf-8″>
var helloworld = require(‘helloworld’);
helloworld.init();
</script>
</body>
</html>

단순한 예제여서 Bolt.JS의 특징을 한번에 파악할 수는 없지만, 모듈 기반의 개발방식을 한눈에 알 수 있다. CommonJS 규약을 지키는 Node.JS 모듈을 Bolt.JS의 모듈로써 사용할 수도 있을 것이다. 성공적인 중/대형 규모의 어플리케이션의 특징가운데 하나는 모듈화에 있으므로 Bolt.JS의 API 표준화 정책은 많은 개발자의 참여를 불러일으킬 것이라 예측할 수 있다.

활용:
지정된 프레임워크가 없는 사내 개발환경에 CommonJS 규약에 의한 개발방식은 언뜻 생각해도 몇몇 부분에서 시너지 효과를 가져올 것이라 쉽게 예측할 수 있다:

– 각 부서별/팀별로 중복으로 제작할 필요가 없고, 부서별로 모듈을 유지보수하는 비용이 줄어들 것이다.
– 사내에서 개발하는 것 자체가 글로벌에 적용될 수 있다.

결론:
Apple AppStore에 휘말리지 않겠다는 의지를 보인 Facebook의 행보는 HTML5 어플리케이션 개발의 흐름에 한번더 큰 변화를 가져다 줄 것이며 글로벌 사업을 향하는 여러 업체의 사업방향에도 영향을 줄 것이다. 따라서, Bolt.JS 와 CommonJS 표준화 개발방식을 검토할 필요가 있다는 것을 강조한다.

(주)리화이트 대표 / CEO & Founder

Next ArticleOPEN API 제공을 위한 SOA(Service Oriented Architecture)