Dojo 대표적인 AJAX Framework 소개

Web2.0과 AJAX & XFORMS

목차

1. AJAX란?

2. AHAH

3. AJAX Framework

    i. JSON

    ii. DWR

    iii. Prototype

    iv. Dojo Toolkit

    v. Yahoo UI Library

    vi. Rico

    vii. Script.aculo.us

4. XFORMS & XSLT & CSS

1. AJAX(Asynchronous JavaScript And Xml) 란?

    A. 개요

    i. 대화식 웹 어플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.
        1. 표현 정보를 위한 HTML(또는 XHTML)과 CSS
        2. 동적인 화면 출력 및 표시 정보와의 상호 작용을 위한 DOM, JAVASCRIPT
        3. 웹 서비스와 비동기식으로 데이터를 교환하고 조직하기 위한 XML, XSLT, XMLHttpRquest
    ii. DHTML(Dynamic HTML)이나 LAMP(Linux, Apache, Mysql, PHP)와 같이 AJAX는 그 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용되는 기술의 묶음을 지칭하는 용어이다.

    B. Ajax의 장점

    i. 필요한 데이터만을 웹 서버에 요청해서 받은 후 클라이언트에서 데이터를 처리하기 때문에 서버와 클라이언트 간 데이터 송수신의 양을 줄일 수 있다.
    ii. 웹 브라우저와 웹 서버 사이에 교환되는 데이터의 양과 웹 서버의 데이터 처리량도 줄어들기 때문에 어플리케이션의 응답성이 좋아진다.

    C. Ajax의 단점

    i. 이기종 브라우징 지식(Cross Browsing Knowhow)가 필요하다.
    ii. Ajax를 쓸 수 없는 Browser에 대한 대책이 필요하다.
        1. MS ? IE5.0 이상
        2. 게코 ? 모질라, 파이어포스, 넷스케이프7.0 이상 등등
        3. 애플 ? 사파리 1.2 이상
        4. 오페라8.0 이상, 오페라 모바일 브라우저 8.0 이상
    iii. 브라우저 별로 상이한 DOM 핸들링으로 XML을 파싱하는데 오류가 날 수 있다.
    iv. JavaScript는 소스가 노출되기 쉽고 또한 AJAX의 서버측 Business Logic이 일부 Client에서 처리되면 Business Logic 이 노출되기 때문에 보안에 대해서 취약하다.
    v. 비동기식 이기 때문에 현재 상황에 대한 정보를 사용자는 알 수가 없다. 따라서 사용자에게 현재 상황에 대한 정보를 알려 줄 필요가 있다.(저장중, 로딩중…)
    vi. AJAX 기반의 웹 페이지에서는 브라우저의 ‘뒤로 가기’Action을 구현하고자 한다면 상태값들을 저장해야만 하는데 구현하기 힘들다. 또한 페이지에 대한 Bookmark를 수행 할 때에도 이 같은 문제가 발생한다. 최근 이런 문제들을 해결하기 위한 방법들이 소개되지만 아직까지 사용자들에게 혼란을 줄 수 있는 요소이다.
    vii. 비동기식 이기 때문에 시간의 입력 순서대로 진행되어야 하는 프로세서에서는 오류를 발생시킬 수 있는 가능성이 있다.
    viii. 요청이 남발하면 역으로 서버 부하가 늘어날 수 있다.

2. AHAH(Asynchronous HTML And)

    A. 개요

    i. Ajax 와 같이 XML-HTTP 기능이 요청을 초기화하기 위해 사용되지만, 응답을 받았을 때 요청의 상태변화는 함수에 의해 통제되며 그 함수는 응답을 DOM을 이용한 XML로 파싱하지 않은 대신 비 표준인 innerHTML 속성을 이용하여 문서의 대상 element에 응답 내용을 직접적으로 삽입한다.
    ii. innerHTML은 주요 웹 브라우저에 의해 지원되는 읽기, 쓰기가 가능한 속성이며 MS의 IE에서 처음 소개되었다.

    B. AHAH의 장점
    i. 파싱이 필요없다. 데이터를 XML로 바꾸고, 다시 XML을 파싱해서 필요한 정보를 추출, 가공하고 그것을 다시 DOM을 구성하는 AJAX방식 과정이 불필요하다.
    ii. Document.getElementById(“”).innerHTML = result; 처음부터 HTML로 보내고 HTML로 받는다.

    C. AHAH의 단점
    i. AJAX만큼 DOM을 컨트롤 하는데 있어서 정교하지 못하다.

3. AJAX Framework

    A. JSON(JavaScript Object Notation)

    i. XML, Lisp list, Hash literal, JSON, YAML(YetAnotherMarkupLanguage) 등은 모두 Tree형 데이터를 기록하기 위한 포맷이다.
    ii. 클라이언트 측 JavaScript에서 구조적인 데이터를 파싱하고 빌드하기 위한 방법으로 XML을 DOM으로 접근하여 쓰는 방법과 JSON 등이 있는데 XML을 사용하여 DOM을 다루는 것은 힘들다.
    iii. JSON은 경량의 데이터 교환 형식, Client상에서 JavaScript 객체로 쉽게 변환되는 포맷으로 데이터를 직렬화하는 방법은 아래와 같은 2가지의 기본구조로 구성된다.
        1. name : value 형태의 쌍으로 collection 타입(Object, record, 구조체, dictionary, hash table, key가 있는 list, 연상배열)
        2. 값들이 순서화 되어있는 list.(array, vector, list, sequence)
 

    B. DWR(Direct Web Remotion)

    i. 서버사이드 빈과, JavaScript, DWR Servlet으로 구성되어 있는 Apache 라이센스를 가진 라이브러리이다.
    ii. JSON 이 Client side Framework라면 DWR 은 JavaScript Client side code로부터, Server side Java Object 에 대한 RPC(Remote Procedure Call ? 원격 프로시저 호출)를 하는 기능을 규정하는 Framework이다.
    iii. 서버 측 자바 객체를 JavaScript code로 노출하는 엔진이다.
    iv. Client side 에서 XMLRequest 객체를 직접 다루거나 Server의 Response을 직접 다룰 필요가 없다.
    v. 객체 직렬화 코드를 작성하거나 서드파티 Tool을 사용하여 객체를 XML로 전환 할 필요가 없다.
    vi. Servlet code를 작성하여 AJAX 요청들을 자바 도메인 객체에 직렬화 할 필요가 없다.
    vii. DWR은 application에 Servlet으로서 전개된다. 이 Servlet은 두 가지 중요한 역할을 한다.
        1. 각각의 클래스에 대해 DWR은 JavaScript를 동적으로 생성하여 웹 페이지에 포함시킨다.
        2. 생성된 JavaScript에는 자바 클래스에 상응하는 스텁 함수가 포함되어 있고 막후에는 XMLRequest도 수행한다. 이러한 요청들은 DWR Servlet으로 보내지고, 요청들은 server side 자바 객체에 대한 메소드 호출로 변환하고, JavaScript로 인코딩 하여 메소드의 리턴 값을 다시 Client로 보낸다.
    viii. DWR은 일반적인 UI 작업을 수행하는 것을 돕는 JavaScript 유틸리티 함수도 제공한다.

    C. Prototype

    i. 자바스크립트 AJAX 오브젝트를 포함한 AJAX 인터랙션에 초점을 맞추고 있다. 이는 요청을 하거나, 문서의 일부를 업데이트 하거나, 문서에 내용을 삽입하거나, 문서의 일부를 주기적으로 업데이트 하는 것과 같은 기본적인 태스크를 수행 할 몇가지 오브젝트를 포함하고있다.
    ii. AJAX 요청을 나타낼 일련의 자바스크립트 오브젝트들을 포함하고 있으며
    iii. 페이지 내 컴포넌트에 접근하거나 DOM을 조작하는 유틸리티 기능도 포함하고 있다.
    iv. Script.aculo.us와 Rico는 프로토타입의 최상위에 구축되었으며
    v. UI효과를 제공하고 드래그 앤 드랍을 지원한다.
    vi. prototype은 AJAX 인터랙션을 비롯 기본적인 몇 개의 태스크만 지원하는 것을 찾는 사람들에게 적합하다. 만약 UI 효과도 원한다면 Rico나 Script.aculo.us를 선택하는 것이 좋다.
    vii. Prototype 설명서 -

    D. Dojo Toolkit

    i. 리치한 웹 애플리케이션(rich web application)의 개발을 지원하기 위한 API들과 위젯(widget)들을 포함하고 있다.
    ii. intelligent packaging system, UI 효과, Drag and drop API, widget API, event abstraction, client storage API, AJAX 인터랙션 API등을 포함한다.
    iii. 브라우저의 '뒤로(back)' 버튼 감지 기능, url 바의 url을 북마크하는 기능, client 쪽에서 AJAX나 자바스크립트가 완전히 지원되지 않을 때 부드러운 처리 기능과 같은 네비게이션 관련 서포트와 같은 보편적인 사용에 관한 문제들을 해결해 준다.

    E. Yahoo UI Library

    i. 유틸리티 라이브러리이며, 리치 클라이언트를 지원하는데 API를 사용하는 위젯들의 집합으로, 크로스 브라우저 AJAX 인터랙션, 애니메이션, DOM 스크립트 지원, 드래그 앤 드랍, 크로스 브라우저 이벤트 지원 등을 포함한다.
    ii. Yahoo UI 라이브러리는 세심하게 작성되어 있으며 많은 예제를 포함하고 있다.

    F. Rico
    i. RIA(Rich Internet Application)을 작성하기 위한 오픈소스 JavaScript 프로그램 라이브러리 이다.
    ii. Script.aculo.us 와 마찬가지로 Prototype JavaScript Framework을 기반으로 하고있다.
    iii. 웹 표준을 지키며 편리한 동적 UI를 쉽게 만들 수 있도록 라이브러리를 제공한다.
    iv. 장점 - 코드가 실제의 업무로 이용되어 사용 어플리케이션으로 유저에 의해 테스트 되고 있으며 가장 널리 사용되고 있다.
    v. 단점 ? 문서가 부족하고, IE5.5버전 이상에서 제공되며 IE6.0에서도 드래그 앤 드랍을 완벽히 지원 못한다.

    G. Script.aculo.us

    i. Prototype을 기반으로 하는 대표적인 자바스크립트 라이브러리로, 움직이는 프레임이나 드래그&드랍 등의 고급 기능들을 손쉽게 사용하게 해준다.

4. XFORMS & XSLT & CSS

    XFORMS는 W3C에서 만든 XML 기반의 폼을 위한 기술인데 반해 AJAX의 표준은 오페라, 애플 등을 주도로 한 WHATWG 에서 이루어지고 있다.
    AJAX의 기술은 JavaScript의 의존성이 강한 언어로 검색엔진이 페이지 내용을 파악 해 내기 힘들며 또한 현재는 여러 tool이 존재하지만 스크립트를 디버깅 하기란 쉽지가 않다.
    따라서 유지보수가 쉽지 않다는 단점이 존재한다.
    이런 점에서 AJAX는 웹 표준을 권고하는 W3C의 의도와는 다른 면이 있다.
    W3C는 기존에 웹 페이지들이 과도하게 스크립트를 사용하고 있는 것을 문제라고 생각하고 있다.
    그런 문제로 CSS를 개발했고 XHTML 2.0에 Navigation List를 추가했다.
    하지만 안 그래도 남용되는 스크립트에 네트워크 기능까지 스크립트를 이용해서 접근하게 했다.
    스크립트를 이용할 경우 나쁜 점은 역시 개발하기가 힘들고 개발도구가 만들어지기 힘들고 버그가 생기기 쉽다는 점이다.
    그렇다면 W3C는 어떤 대안을 가지고 있는가?
    W3C 에서는 절차형인 스크립트를 이용하기 보다는 선언형인 XFORMS이나 CSS를 사용하는 것을 권고한다.
    AJAX의 기능을 선언형으로 구현할 수 있도록 기능을 제공하는 규격이 XFORMS와 XSLT이다.
    XFORMS는 AJAX의 네트워크 기능을 제공하고 XSLT를 이용해 그 내용을 반영할 수 있다.
    그러나 XFORMS는 아직 브라우저에서 직접 제공되지 않고 formsplayer같은 플러그 인을 통해 사용해야 하고, XML이 가지고 있는 성능적인 문제, 엄격한 규격으로 인하여 개발자로 하여금 데이터 처리 컨트롤이 쉽지 않으며 또한 새로운 언어를 습득해야 하는 부담이 있다.