아프리카 초원의 날씨만큼이나 변덕스러운 웹 세상에 또 하나의 주목할 만한 언어가 등장했다.
이름하여 Flapjax.
웬지 이름에서 AJAX의 냄세가 느껴지지 않는가?
Flapjax 홈페이지에서는 Flapjax를 다음과 같이 소개하고 있다.
Flapjax is a new programming language designed around the demands of modern, client-based Web applications. Its principal features include:
-
Event-driven, reactive evaluationprint time of last click of btn1 or btn2 time: {! merge($EVENT('btn1', 'click'), $EVENT('btn2', 'click')).
snapshot((new Date()).getTime()) !} -
Persistent data saved on a data store we providekeep a copy on the server of 'age' as it changes writePersistentObject($E('age'), {path: ['savedAge']});
-
Convenient data sharingcreate a link to share the current user's tasklist getSharingConsoleLink('receivepage.html?user=' + uidB, ['tasklist']);
-
Access-control for shared datadisplay whether the user can write to an object {! readPermissionsB({path:['tasklist']}).has('WRITE')?'yes':'no'!}
-
Interfaces to external Web servicesshow the first link of a user's delicious bookmarks <input type=text id=u value='enter name'/>:
{! getWebServiceObject_e({url: 'del.icio.us/feeds/json/'
+ $B('u'), serviceType: 'jsonLiteral'}).posts[0].d !} -
Optional templating syntaxprovide a live preview of a form value <input type=text id=age/>
preview: {! 'age:' + $B('age') !}
홈페이지에서는 Flapjax 를 새로운 언어로 규정하고 있는데 실제로 Flapjax 코드를 보면 전혀 낯설지가 않다.
그 이뉴는 Flapjax가 Javascript를 확장한 것이기 때문인데 다음 예제를 보면 무슨말인지 이해가 갈 것이다.
<html>
<head>
<script lang="text/javascript" src="/demos/flapjax.js">
</script>
<script lang="text/javascript">
var loader = [];
var flapjax = flapjaxInit(false, false);
</script>
<title>
Flapjax Demo: Where's the Mouse?: Flapjax Scripting
</title>
<script lang="text/javascript" type="">
function loader0()
{flapjax.insertDomB(flapjax.mouseTop_b(document), "Mtop");
flapjax.insertDomB(flapjax.mouseLeft_b(document), "Mleft");}
loader.push(loader0);
</script>
</head>
<body onload="flapjax.forEach(function(l){ l(); }, loader)">
<p>
The mouse's coordinates are
<
<span id="Mleft">
_
</span>
,
<span id="Mtop">
_
</span>
>.
</p>
</body>
</html>
위 예제는 마우스 포인터의 위치를 화면에 표시해주는 코드이다.
기존의 Javascript 코드와 전혀 다를바가 없다.
하지만, 사실 이 코드는 컴파일된 코드이다.
갑자기 무슨 컴파일이 나오는지 당황하겠지만 Flapjax는 Flapjax API를 이용해 코드를 작성하고 컴파일러를 통해서 아웃풋을 만들어야 브라우져에서 인식할 수 있다.
위 코드의 실제 Flapjax 코드는 아래와 같다.
<html>
<head>
<title>Flapjax Demo: Where's the Mouse?: Flapjax Scripting</title>
<script lang="flapjax">
insertDomB(mouseTop_b(document), 'Mtop');
insertDomB(mouseLeft_b(document), 'Mleft');
</script>
</head>
<body>
<p>
The mouse's coordinates are
<<span id="Mleft">_</span>,
<span id="Mtop">_</span>>.
</p>
</body>
</html>
이처럼 Flapjax를 이용하면 개발자가 작성할 코드가 줄어들게 되는데 Flapjax측은 그 양을 아웃풋의 두배정도까지 줄일 수 있다고 한다.
단순히 코드의 양을 줄이는것이 Flapjax의 전부라면 Flapjax에 의미를 둘 수는 없다.
Cameron Laird은 IBM 개발자 네트워크에 포스팅한 Flapjax 튜토리얼에서 Flapjax를 특징을 아래와 같이 설명하고 있다.
Flapjax는 Ajax를 손쉽게 코딩할 수 있는 방법을 제공하지만 Ajax를 편리하게 쓸 수 있는 래퍼 그 이상이다. 다음 섹션에서는 Flapjax에 대해 좀더 자세히 다루고자 한다. Flapjax에 대한 전체 내용을 다루기에는 본 튜토리얼의 목적에 벗어나는 감이 있어 일부만 소개한다. 본 기술문서에서는 다음 내용을 비롯하여 Ajax 프로그래밍 기술을 단순화하는 데 Flapjax가 어떤 역할을 담당하는지 보여준다.
- 브라우저의 "새로 고침" 업데이트 관리
- 사용자의 포인트 앤 클릭에 대한 응답
- 복잡한 웹 애플리케이션을 위한 네트워크 로드 최적화
- "외부" 서버 정보 검색
Flapjax는 입력(예: 최종 사용자의 동작과 선택)과 출력(예: 브라우저 창에서 보기) 간의 원활한 정보 교환, 즉 "반응"을 정의하고 표현하는 데 사용된다. 동시에 Flapjax는 기존 자바스크립트 작업과 호환 가능하다. Flapjax에는 자바스크립트에서 이미 쓰이고 있는 DHTML(Dynamic HTML)과 CSS(Cascading Style Sheets)가 사용되며, 현재 어떠한 새로운 시각적 요소도 추가되지 않았다. 이러한 관점에서 Flapjax는 순수하게 알고리즘 방식을 사용하고 "시각적"인 어떠한 것도 제공하지 않으며 이미 알고 있는 위젯을 더 쉽게 프로그래밍할 수 있도록 도와준다.
갈수록 AJAX 애플리케이션의 개발이 활발하게 이루어지고 있다.
더이상 AJAX는 고급 기술자들만의 전유물이 아니다.
다양한 프레임워크와 손쉽게 원하는 아웃풋을 만들어주는 언어와 툴들이 하루가 멀다하고 발표되고 있다.
Flapjax도 그 중 하나로, 앞으로 얼마만큼 개발자들의 호응을 얻으며 발전해 나갈지는 미지수다.
하지만 분명한것은 Flapjax는 배우기 어려운 언어도 아니며 사용하기 까다로운 언어도 아니라는 것이다.
그리고 그점은 분명 메리트로서 작용할 것이다.
'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글
| 수정이 가능한 텍스트 - 인라인 텍스트 에디터 (7) | 2007.05.29 |
|---|---|
| Javascript 객체 들여다보기 (0) | 2007.05.22 |
| Switching Tab (1) | 2007.04.18 |
| JavaScript: 세상에서 가장 오해가 많은 프로그래밍 언어 (2) | 2007.04.06 |
| Javascript 의 Object : new Object() ?===? {} (0) | 2007.04.06 |