jslibsMozilla의 SpiderMonkey를 이용해 커맨드 라인에서 자바스크립트를 사용하는 한가지 방법입니다. jslibs는 보통 PHP나 Python을 통해 접근했던 수많은 공용 라이브러리에 대한 래퍼를 제공합니다. 이미지 관리, 압축, 사운드, ogg vorbis와 OpenGL을 통한 애니메이션과 비디오 등이 있습니다. 또한 전용 래퍼를 통해 SQLite에도 접근할 수 있습니다.

from jslibs - free JavaScript of browser limitations
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지

ShiftZoom 1.0 은 Christian Effenberger씨가 가장 최근에 작성한 도구로서, 웹 페이지상의 큰 이미지들을 확대/축소하거나 영역을 정해서 볼 수 있도록 합니다. 코드를 깔끔하게 보호하기 위해 겸손한(unobtrusive) 자바스크립트를 사용했습니다. 플러그인, 확장기능, 외부 리소스가 필요없습니다!

이것은 모든 주요 웹 브라우저에서 동작합니다 - Mozilla Firefox 1.5+, Opera 9+, IE 6+ 그리고 Safari. 또한 images & createElement & getElementById 가 지원되는 예전 브라우저도 지원합니다. 그 밖에는 자바스크립트가 사용되지 않아 방문자들은 멋진 것들이 있는지도 모르게 됩니다.

사용법은 간단합니다:

[code:xml]
<div><img onLoad="shiftzoom.add(this);" width="400" height="200" .../></div>

from ShiftZoom: Zoomify your oversize images
Posted by 행복한고니 트랙백 0 : 댓글 1
Kyle Simpson씨가 flensed라 불리는 오픈소스 프로젝트들을 발표하며, 그 중 첫번째로 flXHR을 발표했습니다. "flXHR은 javascript+flash를 이용해 웹 브라우저의 네이티브 XHR(Ajax)을 완전히 대체할 수 있도록 하는 프로젝트입니다. 하지만 flXHR은 작접적인 크로스 도메인 통신을 위해 Flash Player의 보안 모델을 사용합니다. 또한 다수의 매우 유용한 확장기능들을 가지고 있습니다"

http://flxhr.flensed.com/code/tests/flxhr-4.html

데모는 flXHR의 API 호환성과 JavaScript 프레임웍들(Dojo, Prototype, YUI, ExtJS 등)에서 네이티브 XHR과 flXHR을 바꾸는 방법을 기술하고 있습니다. 이전에 이런 비슷한 것들이 없었느냐 하면 그건 아닙니다. 이전에도 SWFHttpRequest, FlashXMLHttpRequest, Fjax, F4A 등의 유사한 프레임웍들이 있습니다. Kyle씨의 사이트에 이들에 대한 차이점을 상세히 기술해놓았다고 하니 한번 보시는 것도 좋을 것 같습니다.

from flXHR: Flash based XHR from flensed
Posted by 행복한고니 트랙백 0 : 댓글 0
Pingdom에서 가장 많이 쓰이는 JavaScript 프레임웍에 대한 통계를 발표했습니다.
웹 사이트들은 Alexa US 기준 상위 100개와 Webware 기준 상위 100개의 웹 응용프로그램에서 수집했습니다. 우리가 살펴본 프레임웍은 Prototype, jQuery, MooTools, Yahoo! UI Library, Dojo, ExtJS, 그리고 MochiKit 입니다.
그들은 다양한 사이트들이 각각의 프레임웍을 사용하고 있으며, 심지어는 여러개를 같이 쓰기도 한다고(예. Digg는 Prototype과 jQuery를 사용합니다) 밝혔습니다. 그들의 결론입니다:
이 조사에서는 Prototype이 가장 많이 사용되는 프레임웍으로 밝혀졌으며, jQuery와의 차이는 크지 않습니다. Yahoo! UI Library를 사용하는 여러 사이트들을 보는 것도 흥미로웠습니다. 우리는 YUI의 사용 숫자는 이보다 더 적고 Prototype이나 jQuery를 사용하는 웹 사이트가 더 많을 것으로 예상했었습니다.
Dion씨가 Peter Alguacil씨에게 해당 사이트에서 어떤 라이브러리를 사용하는지 어떻게 확인하는지 물어보았고, 이에 Peter씨가 글을 업데이트 해주셨습니다.
우리는 Alexa US 상위 100개 사이트와 Webware 상위 100개 웹 응용프로그램으로 웹 사이트 목록을 작성했습니다(Firefox나 Skype같은 실제 응용프로그램은 제외했습니다). 특수한 도구를 이용해 우리는 프레임웍을 확인하기 위해 특정 키워드가 있는지 모든 웹사이트를 살폈습니다.

예를 들어, Prototype을 찾기 위해서 "prototype.js"와 "/prototype"을 조사했습니다. "prototype"이라는 단어가 완전히 제거된 경우를 제외하고는 프레임웍이 포함된 상태의 다양한 변화를 모두 커버할 수 있을 터였습니다.

우리는 또한 테스트한 프레임웍에 대한 레퍼런스가 포함된 모든 사이트를 수동으로 체크했습니다. Yahoo! UI의 경우 우리는 JavaScript는 사용하지 않고 CSS 프레임웍만 사용한 경우는 결과에서 제외시켰습니다.
수많은 사람들이 그들의 their_app.js 파일과 prototype.js를 결합해 압축된 그리고/혹은 최소화된 개조 버전인 my_app.js 파일을 만드는 것과 같은 일을 할 것입니다. 이것들은 계산되지 않습니다. JavaScript 객체에 대한 체크를 추가하는 것이 더 좋을 것 같습니다(예. Rhino로 사이트를 실행해 "Prototype" 객체가 있는지 검사하는 것).

from Pingdom checks on JavaScript usage on top sites
Posted by 행복한고니 트랙백 0 : 댓글 0
John Leach 씨가 Frizione(클러치의 이탈리아어)이라는 이름의 진짜 멋진 새로운 오픈 소스 프로젝트를 작성했습니다.

Frizione는 "JavaScript 개발, 테스트, 배포 환경입니다. 그것은 어떠한 형태의 브라우저 기반 JavaScript 개발이라도 지원할 수 있는 여러 툴들의 조합이며 Gears도 지원합니다."

Frizione은 웹 서버로서 실행할 수 있으며, 몇 가지 서비스를 제공해줄 것입니다:

Compressor Service
압축 서비스는 JavaScript 파일의 주석과 불필요한 공백을 제거합니다. 이는 -o 옵션을 지정하지 않으면 원래의 JavaScript 파일이 덮어써지므로 파괴적인 기능이 되지 않도록 주의하셔야 합니다.

이 서비스를 호출하려면, URL의 일부로서 JavaScript 파일의 절대 경로를 추가해 POST 요청을 /run_compressor에 보냅니다. 그러면 Clutch는 JavaScript 파일을 압축할 것입니다. 추가적인 요청 파라미터로는 YUIComressor 명령행 옵션을 사용해 압축기의 동작을 수정하는 옵션이 있습니다.

Fixture Service
정착 서비스는 텍스트를 하드 디스크에 저장하도록 합니다. POST 요청을 하면 서비스는 POST 데이터를 URL에 지정된 파일에 씁니다. ERB를 사용하여 POST 요청에 파라미터를 지정해서 컨텐트를 수정하는 옵션을 줄 수도 있습니다. 이 서비스를 호출하려면, URL의 일부로 출력할 텍스트 파일의 절대 경로를 추가해 /run_fixture로 POST 요청을 전송합니다.

Join Service
결합 서비스는 ERB를 사용해서 목록의 텍스트 파일들을 하나로 합친 단일 파일을 생성합니다. 각 파일들은 자기 자신에 대한 상대경로로 포함할 다른 파일의 URL을 지정한 include 명령을 포함할 수 있습니다. 이 프로세스는 포함된 파일 내에서도 중첩해서 반복될 수 있습니다. 이 서비스를 호출하려면, URL의 일부로 텍스트 파일의 절대 경로를 지정하여 /run_join으로 POST 요청을 전송합니다. 그러면 Clutch는 결합된 파일들을 생성할 것입니다. 요청할 파라미터는 합쳐진 결과 파일의 대상 절대경로인 URL을 설정하는데 필요합니다.

JSLint Service
원래의 lint 프로그램은 런타임 버그를 일으키는 잠재적(혹은 미세한) 실수를 위해 C 소스코드를 분석합니다. 최근의 C 컴파일러들은 충분한 문법적 의미적 검사를 제공하고 있어 lint가 필요하거나 사용되는 경우가 드물어졌습니다.

JavaScript 개발자들에게 다행히, Douglas Crockford 씨가 JavaScript를 위한 lint 프로그램을 JavaScript로 작성했고, 이는 JSLint라 불립니다. 테스트 전에 잠재적인 문제 코드를 찾아내고 제거하는 것이 적어도 저에게는 필수적인 프로세스였습니다. 안타깝지만, 웹페이지에 복사하고 붙여넣는 것은 그 자체가 이미 에러가 나기 일쑤입니다.

Clutch는 JSLint에 의해 로컬에서 분석될 수 있는 JavaScript 코드에서 읽을 수 있는 정적인 HTML 페이지를 생성함으로써 이러한 문제를 감소시킵니다. 할 일이라고는 분석을 원하는 각 JavaScript 파일을 위한 정적인 페이지만 한번 만들어주시면 됩니다.

이 서비스를 호출하기 위해서는 URL에 JavaScript 파일의 절대 경로를 지정하고 POST 요청을 /run_jslint 로 전송합니다. 그러면 Clutch에서 JSLint 페이지에서 자동으로 JavaScript 파일을 읽어들일 /jslint 폴더 아래에 정적 HTML 파일을 생성할 것입니다. /jslint/index.html 페이지의 정적 HTML에 대한 링크를 추가하실 수도 있습니다.

Test Service
테스트 서비스는 주어진 JavaScript 파일을 위한 정적 HTML 파일의 run/view 쌍을 생성합니다. 두 개의 HTML 파일을 사용하는 이유는 "Unit Testing" 섹션 아래에 설명되어있습니다.

이 서비스는 join service와 유사한 기능을 제공합니다. 목록의 JavaScript 파일들을 하나로 합치기 위해 ERB를 사용하며 합쳐진 하나의 JavaScript 파일을 생성하지만, 해당 파라미터가 지정되어있을 경우에만 그렇습니다.

이 서비스를 호출하려면, URL에 JavaScript 파일의 절대 경로를 지정하여 POST 요청을 /run_test로 전송합니다. 그러면 Clutch에서 두 개의 정적인 HTML 파일을 생성할 것입니다.

The Unit Test Framework
프레임웍은 잘 알려진 JUnit Java 테스팅 프레임웍과 유사한 유형을 따릅니다.

보통의 JavaScript 객체에 테스트 메소드를 만들면 상단의 첫번째 예제에서 보여드린 바와 같이 clutch.unittest 함수 호출에서 그 객체를 래핑합니다. 테스트 객체의 모든 함수는 단위 테스트 프레임웍에 의해 실행되지만, 함수의 실행 순서는 보증할 수 없습니다.

testxxx 함수가 실행되기 전에, 단위 테스트 프레임웍은 테스트 객체의 setUp 함수를 실행합니다. tsetxxx 함수가 실행되고 난 후에, 단위 테스트 프레임웍은 객체 내의 tearDown 함수를 실행합니다. Clutch는 테스트 객체에 해당 함수가 존재하지 않으면 setUp과 tearDown 함수를 아무런 동작을 하지 않는 함수로 기본제공합니다.

from Frizone: JavaScript dev, test, and deplyment environment
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지
또 다른 팟캐스트 인터뷰입니다. Dion씨가 인터뷰 전날 런칭된 280 Slides 응용프로그램을 미리 살펴봤다고 합니다. 혹자들은 그것을 가리켜 "웹의 Keynote[각주:1]" 라고 부릅니다.

인터뷰에서 들을 수 있듯, Dion씨는 Ross Boucher, Tom Robinson, Francisco Tmlmasky 들과 함께 앉아서 그들의 새로운 응용프로그램과 작성한 방법에 대해 얘기를 나누었습니다. 그들중 2명은 Apple에서 일했었다고 합니다.

Objective-J는 (Obj-C가 C에게 그랬듯) JavaScript를 Objective 하게 한 언어입니다. 네모 꺽쇠가 많습니다. 브라우저가 제공되는 .j 파일을 얻으면 바로 그들을 선처리합니다. 이는 표준 자바스크립트를 여기저기에 사용할 수 있다는 것을 의미합니다.

Cappuccino는 Cocoa 프레임웍의 포팅입니다.

그들은 툴체인과 왜 자신들이 이것을 만들었는지, 그것이 앞으로 같은 코드로 네이티브 맥 응용프로그램을 생성하는 것과 같은 멋진일을 어떻게 할 수 있는지에 대해 이야기했습니다.

그들이 작업 중인 크로스 브라우저 이슈도 재밌었습니다. 그리고 그들이 어떻게 고차원 추상화를 했고, 개발자들이 이런 이슈들을 꼭 다루지 않아도 되는지에 대해 말을 이어나갔습니다.

끝으로, 그들이 곧 소스를 objective-j.org에 공개함으로써 오픈소스화 할 것이라는 얘기를 들었습니다(아직은 없습니다). 그들은 라이센스(Apache2로 하시죠?)와 소스 컨트롤 시스템(Subversion vs. Git)과 문서화를 선택하는 일반적인 이슈를 고민할 것입니다.

인터뷰 음성 파일을 직접 다운로드도 가능하고, 팟캐스트로 들으실 수도 있습니다.

그 팀은 JavaScript 개발자들이 무엇을 생각하는지 매우 알고 싶어했습니다.

from An interview with 280 North on Objective-J and Cappuccino

  1. Apple의 유명 프리젠테이션 프로그램 [본문으로]
Posted by 행복한고니 트랙백 0 : 댓글 0
Nexaweb에서 Dojo 기반 새 제품인 dojo.E를 출시했습니다: XML 기반의 마크업을 통해 Ajax를 사용할 수 있도록 해줍니다. 이 때의 마크업은 XML, HTML 심지어 CSS도 가능합니다.

dojo.E Markup
dojo.E Markup은 개발자들이 그들의 dojo 컴포넌트를 직접적으로 dojo 클래스로 변환되는 간단한 마크업 언어를 사용함으로써 기술할 수 있도록 합니다. 예를 들어, dojo의 버튼을 선언한다고 하면, 둘 중 하나는 이렇게 가능합니다;
[code:xml]
<div dojoType=”dijit.form.Button” label=”Hello, world”/>
JavaScript를 사용하면, new dijit.form.Button(htmlElement, “Hello, World”); 와 같습니다.

dojo.E Markup은 다음과 같이 개발자들이 버튼을 기술할 세번째 방법을 제공합니다:
[code:xml]
<script type=“text/xml” dojoType=“dojoe.XmlScript”>
   <ui xmlns:dijit=“dijit”>
        <dijit :form.Button label=“Hello, World!”
           onclick=“alert(’It works!’)”/>
    </ui>
</script>

dojo.E Runtime런타임은 HTML DOM을 수정하거나 dojo 컴포넌트를 더 쉽게 하는 추가 마크업을 제공합니다.
[code:xml]
<xm :xmodify document=”ui”>
        </xm><xm :append select=”//widget.SortList”>
                <li>{0}</li>
        </xm>
위의 xModify 문법은 <li>{0}</li>태그를 dojo.SortList 컴포넌트에 추가하는 dojo.E 런타임을 가리킵니다. 이 경우의 select 구문은 XPath 구문이며 CSS 셀렉터는 아닙니다. 실제 샘플에서 서 위의 코드는 개발자들이 "{0}"을 파라미터화 할 수 있도록 하고 개발자가 "Add" 버튼을 클릭했을 때 xModify 코드를 실행하는 "Macro"로 감싸집니다.

아래와 같은 할 일 목록 예제를 보여주는 라이브 에디터를 시연해보실 수 있습니다.
[code:js]
<declarations>
        <dojoe :Macro id="add" xmlns:dojoe="dojoe">
        <![CDATA[
        <xm:xmodify xmlns="html" xmlns:xm="dojoe" xmlns:dijit="dijit" document="ui">
                <xm :append select="//widget.SortList ">
                        <li>{0}</li>
                </xm>
      
        ]]>
        </dojoe>
</declarations>
<ui xmlns:dijit="dijit" xmlns:dojox="dojox" xmlns="html">
        <div id="input_container">
                <span>ToDo:</span>
                <input style="width: 184px; margin-left:3px;" id="textbox" type="text" class="input_tbx" value="Item"/>
                <input class="button" type="button" value="Add" onclick="dojoe.containers.macro.get('add').execute(document.getElementById('textbox').value);" />
        </div>
        <div id="list_container">
                <dojox :widget.SortList  title="SortList From Markup" style="width:300px; height:150px;">
                        <li>A. Download and Install the dojo.E</li>
                        <li>B. Build dojo.E Application</li>
                        <li>C. Profit</li>
                </dojox>
        </div>
</ui>
from Nexaweb announces dojo.E markup and runtime on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Gaia Widgets 3.0 "Glory"

2008.06.10 01:46 from [IT] Web Tech
Thomas Hansen씨가 툴킷 라이브러리의 최신 버전인 Gaia Glory를 릴리스 했습니다. 처음 들어보는 라이브러리인데 어느덧 3.0 이네요.

수많은 샘플이 있는데, Thomas 씨는 다음을 강조했습니다:
라이센스는 MIT 라이센스를 사용합니다. 또한, DOM 구조가 ExtJS와 95% 호환성을 가지고 있어서 ExtJS의 스킨이 있다면, Gaia 응용프로그램에서도 사용할 수 있다고 합니다. 이것을 가장 큰 기능 중 하나로 꼽고 있습니다.

from Gaia Widgets 3.0 "Glory" on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
Google에서 또 일을 저지른 것 같습니다(물론, 좋은 의미입니다). 간단히 본문을 요약하자면, Prototype, jQuery등의 주요 Ajax 프레임웍을 자기네들이 호스팅해서 전세계 개발자들에게 제공하겠다는 것입니다.

버전관리, 버그패치, 트래픽 다 감당하겠다는 거죠. 심지어 오래된 버전까지 그냥 끌어다 쓸 수 있으니 속도만 보장된다면(본문에는 세계 전역에 분포된 CDN을 사용하므로 빠를 것이라고는 합니다만..), 정말 간편하게 사용할 수 있을 것 같습니다. 아직 관련 소식을 다른 곳에선 들은 적이 없네요. 제가 보기엔 꽤 큰 사건임에 분명해보이는데요. :)
사용자 삽입 이미지
________________
Google에서 Prototype, Script.aculo.us, jQuery, Dojo, MooTools와 같은 유명 프레임웍들을 사용하는 Ajax 응용프로그램을 만들 수 있는 Google AJAX Libraries API발표했습니다.

응용프로그램을 작성할 때마다 매번 파일을 다운로드 받아서 설치하기를 반복하실텐데요, 글을 쓴 Dion씨는 무려 자신의 응용프로그램에서 33개의 prototype.js 복사본을 사용하고 있다고 합니다. 사이트가 달라질 때마다 매번 다운로드 받게 되는거죠. 얼마나 큰 낭비입니까!

또한, Steve Souder씨는 성능면에서 우리가 이러한 라이브러리를 제공함에 있어 얼마나 잘못하고 있는지 지적한 바 있습니다. 개발자로서 우리는 캐싱을 정확하게 해서 파일이 필요할 때만 다운로드되도록 해야합니다. 또한 gzip 압축이 가능한 브라우저라면 압축 전송을 해야합니다. 아, 조금이라도 용량을 줄이기 위해 최소화 버전도 사용해야 할 것입니다. 파일의 버전 관리도 제대로 해야죠. 아니면, 수없이 많은, 때론 파일 끝에 조금씩 입맛에 맞게 수정을 가한, 버전이 없는 jquery.js 파일을 발견하고, 캐시는 전혀 제대로 설정되어있지 않아 아무런 이유도 없이 파일을 항상 전송할 겁니다.

Dion씨는 Google에 입사해서 이런 것들을 도울 수 있을 것 같다고 생각했다고 합니다. 우리가 이런 파일들을 호스팅하면 어떨까? 모든 사람이 바로 이런 혜택을 받게 되었겠죠:
  • 제대로 된 캐싱, Google이 한번만 작업하면 개발자들이 할 일은 아무것도 없음
  • Gzip 압축
  • 최소화 버전 제공
  • Google에 의해 호스팅되는 파일들은 세계 전역에 걸쳐있는 분산 CDN에서 제공되므로, 파일은 사용자들에게 "근접"해있음.
  • 서버가 빠름
  • 똑같은 URL을 사용하므로, 응용프로그램의 상당 부분이 Google의 인프라를 사용한다면, 누군가 여러분의 응용프로그램에 접근할 때 그 파일은 이미 로딩되어있을 것!
  • 여러분이 보내고 받는 헤더와 관련된 미묘한 성능(그리고 보안) 문제 해결. 특정 도메인을 사용하고 있으므로(주의: google.com은 아닙니다!), 쿠키나 다른 쓸데없는 헤더가 전송되지 않으므로 귀중한 트래픽 절약
이게 Google이 AJAX Libraries API를 출시한 이유입니다. 몇 개의 유명 오픈소스 프레임웍 진영과 대화한 결과 그들은 모두 이 아이디어를 흥미로워했습니다. 그래서 그들과 이 작업을 시작했으며, 이제 여러분은 Google의 서버에서 그들의 훌륭한 작업물에 접근할 수 있습니다.

세부사항

라이브러리에는 두 가지 방법으로 접근할 수 있고, 둘 다 라이브러리를 호스팅하는 고통 - 정확하게는 캐시 헤더를 설정하고 최근 버그 패치들을 적용하도록 꾸준히 업데이트 하는 일 등 - 을 덜어주는 방법입니다.

첫번째 방법은 간단하게 표준 <script src="..."> 태그를 이용해서 스크립트에 접근하는 방법입니다.

예를 들면, Prototype 1.6.0.2 버전을 읽어들이려면 HTML에 아래와 같은 코드를 입력하면 됩니다.
[code:js]
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
두번째 방법은 Google AJAX API 로더의 google.load() 메소드를 이용하는 것입니다.

아래는 간단한 검색 매시업을 위해 jQuery를 읽고 사용하는데에 해당 기술을 사용한 예제입니다.
[code:js]
<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery
  google.load("jquery", "1");
 
  // on page load complete, fire off a jQuery json-p query
  // against Google web search
  google.setOnLoadCallback(function() {
    $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&;v=1.0&;callback=?",
 
      // on search completion, process the results
      function (data) {
        if (data.responseDate.results &&
            data.responseDate.results.length>0) {
          renderResults(data.responseDate.results);
        }
      });
    });
</script>
아마 사용한 버전이 그냥 "1"라는 것을 알아차리셨을 것입니다. 이는 스마트 버저닝 기능으로, 여러분의 응용프로그램에서 필요한 앞자리만 지정할 수 있도록 하고 있습니다. 버전 필드를 입력하지 않음으로써, 필드에 와일드 카드를 사용한 것입니다. 간단히, 이런 버전들을 생각해보세요: 1.9.1, 1.8.4, 1.9.2

"1.8.2"라는 버전을 지정하면 정확한 버전이 선택됩니다. 이는 사용할 버전 전체를 지정했기 때문입니다. "1.8"과 같이 버전을 지정하면 1.8 브랜치에서 가장 높은 릴리스 버전인 1.8.4 가 선택됩니다. 같은 이유로, "1"을 요청하면, 실제로 읽히는 버전은 "1.9.1" 입니다.

아셔야 할 것은 이러한 버전관리 시맨틱이 google.load를 사용할 때와 직접 script url을 사용할 때 똑같은 방식으로 작동한다는 것입니다.

기본적으로, 로더가 되돌려주는 JavaScript는, 지원되는 버전이 있다면, 최소화 되어있습니다. 그러므로, 위의 예제는 jQuery의 최소화된 버전을 반환할 것입니다. 만약 최소화 되지 않은 JavaScript 파일을 원하신다면 "uncompress" 파라미터를 추가하시면 됩니다.
[code:js]
google.load("jquery", "1.2", {uncompressed:true});
오늘은 라이브러리들의 현재 버전으로 시작하지만, 앞으로는 현재부터의 모든 버전을 제공하겠다고 합니다.

현재 지원하는 라이브러리의 전체 목록은, 문서 부분을 보시기 바랍니다.

Dion씨가 자신들이 작업한 것에 대해 두 장의 짧은 슬라이드를 보여주셨습니다.


미래

이것은 단지 시작일 뿐입니다. Google에서는 유용하게 사용할 수 있도록 보다 많은 라이브러리들을 추가하려고 합니다. 또한, 약간의 관심만 있으시면 어떻게 이들이 더 나아갈 수 있는지 아시게 될 것입니다.

이것이 잘 사용되면 다음번에는 이러한 라이브러리들을 자동으로 읽어들일 수 있도록 브라우저 벤더들과 작업할 것이라고 합니다. 그러면, 해당 URL에 접근했을 때, 자동으로 라이브러리를 읽어들일 수 있게 됩니다. 심지어는 로컬에 있는 특별한 JIT된 것까지도요. 그러므로, 네트웍은 전혀 사용하지 않게 되죠! 또한, 브라우저는 이 서비스가 가능한 IP 주소를 가지고 있을 수 있어 DNS 탐색도 하지 않게됩니다. 오래 유지되는 JavaScript 라이브러리를 위한 브라우저 캐시도 이런 URL을 사용합니다.

이러한 것들이 일어난다면 웹 개발자들에게는 어떤 의미일까요? 항상 표준 라이브러리를 다시 다운로드받아야 했던 늘상 있어왔던 부담에서 벗어날 수 있습니다. 다른 어떤 플랫폼에서 이런 것이 가능했을까요? Java 응용프로그램을 실행할 때마다 매번 JRE를 다운로드 받아야 한다고 생각해보세요! 만약 그런 부담을 덜 수 있다면, 필요한 기능을 만드는데 보다 많은 시간을 투자할 수 있고, 실제 다운로드 크기에 대해서 고민할 시간은 줄일 수 있습니다.

감사의 말씀
(이 부분은 번역 생략하겠습니다. ^^;;)

from Announcing AJAX Libraries API: Speed up your Ajax apps with Google's infrastructure on Ajaxian
Posted by 행복한고니 트랙백 5 : 댓글 4

Jeff Watkins씨가 자신의 MVC 라이브러리인 Coherent를 업데이트하고, 자식 위젯들을 위해 선언적 구문을 추가해야하는지 고민했습니다. 현재는, 상당히 많은 init() 설정 코드를 작성해야 하지만, 그는 대신 이렇게 하기를 원했습니다:

[code:js]
sample.MyWidget= Class.create(coherent.Widget, {
 
    init: function()
    {},
 
    title: TextWidget('div.header em', {
                htmlKeyPath: '*.selection.title',
 
                onclick: function(event)
                {
                    ... handle clicking on the title ...
                },
                ... etc ...
            }),
 
    nextButton: Widget('div.controls button.next', {
                    onclick: function(event)
                    {
                        ... go to the next image ...
                    }
                }),
    ... etc ...
});

init을 부르기 직전에, Widget 프레임웍은 제목과 다음 버튼을 위해서 하위 위젯을 생성해야 합니다. title을 위해서, HTML 바인딩은 외부 위젯으로부터 키 패스인 selection.title에 접속합니다. 덧붙여, click 이벤트 핸들러가 주어진 메소드로 생성됩니다. title을 위한 onclick 메소드의 스코프는 실제의 TextWidget이라기보다는 MyWidget입니다.

새로운 Selector 라이브러리를 사용하면, 직접 하향 접근(계층을 순차적으로 따라가는 접근) 혹은 아이디로 접근하는 것보다 어떤 CSS 쿼리를 기반으로 위젯을 작성할 수 있습니다. 하위위젯안에 하위 위젯이 있을 필요가 있는지는 생각해보지 않았습니다. 만약 그것이 찾고 계신 것이라면, 아마도 구조 선언보다는 위젯 생성을 살펴보는 것이 좋을 것 같습니다.

어때보이시나요? Jeff씨에게 해줄 조언이라도 있나요?

from Declarative Syntax for Widgets on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Omar AL Zabir씨가 UFrame이라는 새로운 라이브러리를 게시하셨습니다:

UFrame은 크로스 브라우저와 크로스 플랫폼을 지원하며 UpdatePanel과 iframe의 장점을 혼합했습니다. UFrame을 이용하면 div가 정적이든 동적이든 어떤 페이지에서이건 IFRAME으로 컨텐트를 읽는 것 같은 행동을 할 수 있습니다. iframe처럼 인라인 혹은 외부 JavaScript와 CSS를 가진 페이지를 읽을 수도 있습니다. 하지만 iframe과는 다르게 메인 문서 내부의 컨텐트를 읽으며, 브라우저를 느리게 하지 않고도 페이지에 UFrame을 몇개든 사용할 수 있습니다. ASP.NET 포스트백을 잘 지원하고, DataGrid 등의 어떤 복잡한 ASP.NET 컨트롤도 UFrame안에서 사용할 수 있습니다. UFrame은 UpdatePanel을 대체하면서 ASP.NET MVC와 완벽하게 동작합니다. 가장 좋은 점은 UFrame이 100% JavaScript로만 구현된 크로스 플랫폼 솔루션이라는 것입니다. 그 결과, 여러분은 UFrame을 ASP.NET, PHP, JSP 등 어떤 플랫폼에서도 사용할 수 있습니다.

사용하시려면 div 를 설정하시면 됩니다:

[code:xml]
<div class="UFrame" id="UFrame1" src="SomePage.aspx?ID=UFrame1">
  <p>This should get replaced with content from Somepage.aspx</p>
</div>
Dion씨는 이것을 보고 purple includes를 조금 떠올리셨다고 합니다.

iframe의 느림은 악명높습니다. 그것이 Caja 프로젝트가 존재하는 이유 중 하나이기도 합니다. 우리가 페이지에 존재하는 코드를 믿을 수 있다면 훨씬 빨리 렌더링 할 수 있을 것입니다(페이지의 위젯을 생각해보세요).

사용자 삽입 이미지

from UFrame: div meets iframe on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Andrea Giammarchi씨가 크로스 브라우징을 지원하는 네이티브 array wrapper를 작성했습니다:

올해에 몇번이나 JavaScript Ninja들이 성능 손실이 없으면서도 강력한 메소드를 가진 라이브러리를 만들기 위해 네이티브 Array의 확장을 시도했었는지 모르겠습니다. 제가 마침내 Internet Explorer 8에서 크기 잠금을 제거하고 모든 다른 브라우저에서의 문제점을 해결할 방법을 찾아냈습니다.

그가 완성한 Stack 클래스입니다:

[code:js]
/**
* Choose a name for subclassed Array
*/
Stack = (function(){ // (C) Andrea Giammarchi - Mit Style License

    /**
     * Your personal Array constructor
     */
    function Stack(length){
        if(arguments.length === 1 && typeof length === "number")
            this.length = -1 <length && length === length <<1>> 1 ? length : this.push(length);
        else if(arguments.length)
            this.push.apply(this, arguments);
    };

    // Solution 1:
    //      Declaration of generic function
    //      with an array as prototype
    function Array(){};
    Array.prototype = [];

    // Solution 2:
    //      use the prototype chain to inherit
    //      Array constructor and its native prototype
    Stack.prototype = new Array;

    // Solution 3:
    //      overwrite inherited length with zero value
    Stack.prototype.length = 0;

    // Solution 4:
    //      redeclare toString method in this way
    //      to let JScript core feel better
    Stack.prototype.toString = function(){
        return  this.slice(0).toString();
    };

    /**
     * Return and assign subclassed Array
     */
    Stack.prototype.constructor = Stack;
    return  Stack;

})();

from Stack : A native Array wrapper that works on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

moo.rd 1.3 릴리스

2008.05.26 23:49 from [IT] Web Tech

사용자 삽입 이미지

moo.rd 팀은 moo.rd 확장팩의 1.3.1 버전을 릴리스했습니다. 거의 새로 작성된 것 같고, MooTools 1.2를 기반으로 하고 있어 새로운 MooTool 문법과 로직을 사용하고 있습니다.

강력한 슬라이드쇼를 작성할 수 있는 Cycle Effects, 새로운 Fx 효과들, Kwick 메뉴 클래스, alert, confirm, prompt 등 브라우저의 기본 동작을 커스터마이징 할 수 있는 새로운 Customs, Virtual Boxes 등이 추가되었습니다.

가장 중요한 기능은 Download Builder 에서 발견할 수 있다고 하는데, MooTools와 moo.rd 를 하나의 파일로 만들어 줍니다.

from moo.rd 1.3 released on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Eugene Lazutkin씨가 JavaScript에서 AOP를 진지하게 구현한 dojox.lang.aspect 에 대한 글을 썼습니다.

Dion씨는 AOSD(AOP 소프트웨어 컨퍼런스)에 참석해서 화면의 AOP에 흥분했던 사람으로서, 누군가 JavaScript에서 이런 작업을 해주었다는 것이 마음에 들었다고 합니다.

물론, 모든 것을 가로채야 하지만, JavaScript와 같은 동적 언어에서는 메소드를 래핑하기만 하면 되는 쉬운 일입니다. 하지만 AOP의 힘(그리고 복잡함!)은 jointpoints, pointcuts 그리고 웜홀의 세계에 있는 것이죠 :)

여기에는, 동적언어가 그닥 도움이 되지 못합니다. Eugene씨는 더 연구를 하셔서 피보나치 수열을 예제로 작성하셨습니다:

[code:js]
var fib = new Fibonacci;
 
// we will time the calculations
aop.advise(fib, "calculate", aop.timer("fib");
 
fib.calculate(15);
fib.setOrder(0);
fib.calculate(15);
 
// now lets use memoization
aop.advise(fib, "calculate", aop.memoizer());
aop.advise(fib, /^set/, aop.memoizerGuard("calculate"));
 
fib.setOrder(1); // set order back to 1 - regular Fibonacci numbers
fib.calculate(15);
fib.setOrder(0);

Memoization 의 결과는 이렇습니다:

제 컴퓨터의 Firefox 3 에서 15의 1-order(정규) 피보나치 숫자의 계산(987)은 momoization 없이는 ~48ms가 걸렸고 momoization을 하고 난 후에는 0-1ms가 걸렸습니다. 15의 0-order 피보나치 숫자의 계산(32768)은 memoization을 하지 않은 상태에서는 ~1155ms가 걸렸고, 이후에는 0-1ms 가 걸렸습니다. 보시다시피 이 기술은 그리 많은 시간을 들이지 않고도 엄청난 효과를 거둘 수 있습니다.

Java와 마찬가지로, 우리는 날마다 pointcuts에 대해 걱정하는 개발자를 보지 않아도 되게 되었습니다. 대신, 현존하는 것을 사용하는 것만으로도 매우 유용할 것입니다.

from dojox.lang.aspect : More than just interception on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Spring JavaScript 모듈을 탑재한 Spring Web Flow 2.0이 릴리스 되었습니다.

다음은 Ajax 이벤트를 호출하는 onclick wrapper 예제입니다:

[code:js]
<a id="prevResultsLink" href="search?searchString=${searchCriteria.searchString}&page=${searchCriteria.page - 1}">Previous Results</a>
<script type="text/javascript">
    Spring.addDecoration(new Spring.AjaxEventDecoration({
        elementId: "prevResultsLink",
        event: "onclick",
        params: { fragments: "body" }
    }));
</script>
Dion씨가 SpringSource의 Keith Donald씨와 Jeremy Grelle씨를 만나 Web 티어에서 진행되는 것들에 대해 이야기를 나누었다고 합니다. 코어 웹 프레임웍(Sprint MVC)에서 Spring Webflow 컨트롤러 엔진으로, 새로운 Spring JS 모듈로 여러 부분이 이동하고 있다고 합니다.

Spring JS를 이용하면 보다 쉽게 Java 만으로 멋진 Ajax 동작들을 작성할 수 있다고 합니다. 따로 사용할 수도 있고, 당연한 말이지만 Spring 프레임웍과도 잘 연동된다고 합니다.

from Spring WebFlow 2.0; JavaScript Module Released on Ajaxian

Posted by 행복한고니 트랙백 0 : 댓글 0
어떤 컨텐트가 다 읽혔는지 비동기적으로 확인하기 위해서 setTimeout 을 호출해본 적이 있습니까? 그런 일은 꽤 자주 일어나는 편인 것 같습니다. Paul Irish씨가 필요한 라이브러리가 읽힌 후에 코드를 실행할 수 있도록 도와주는 간단한 유틸리티를 작성했습니다.

그의 executeWhenLoaded(function, objects, that, must, be, present) 를 이용해 이런 식으로 사용할 수 있습니다:
[code:js]
executeWhenLoaded(function(){
    console.log(session.data);
}, 'session');   // session will return a value when the whatever preceding functionality is done.
구현은 간단하게 되어있습니다:
[code:js]
function executeWhenLoaded(func){
 
  for (var i = 1; i<arguments.length; i++){ // for loop starts at 1 to skip the function argument.
    if (! window[ arguments[i] ]) {
      setTimeout(arguments.callee,50);    
      return;
    }
  }
 
  func(); // only reaches here when for loop is satisfied.
}

from Polling for loaded content instead of simple setTimeout on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
Adrien Friggeri씨는 IE를 제외한 대부분의 브라우저에서 제공하는 진정한 get, set, catchall을 좋아해서, 예제를 보고 에뮬레이팅 계층을 작업했습니다:
[code:js]
var o = CGSobject(function (x) { return x+1; });

// basic set
o("a", 7);

// basic get
print(o("a"));
// -> 7

// getter
o("b", {get: function () { return this.a+1;}});
print(o("b"));
// -> 8

// setter
o("c", {set: function (x) { this.a = x / 2 }});
o("c", 50);
print(o("a"));
// -> 25

// catchall
print(o(2));
// -> 3

print(o("foo "));
// -> "foo 1"
이를 위해 사용한 코드입니다:
[code:js]
function CGSobject (catchall) {
  var o = function (k,v) {
    if (v) {
      var curv = o.content[k];
      (curv && curv.set && curv.set.call(o.content,v)) || (o.content[k] = v);
    } else {
      var v = o.content[k] || o.catchall(k);
      return (v.get && v.get.call(o.content)) || v;
    }
  }
  o.content = {};
  o.catchall = catchall || function () { return null };

  return o;
}

from Emulating get, set, catchall for all browsers on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0

Flickr Browser

Flickr Browser 데모(출처: Ajaxian)


Jeff Watkins는 Cocoa 데이터 바인딩 모델이 너무 좋은 나머지 결국 이를 웹으로 옮기는 프로젝트를 시작했고 3년만에 결과물이 나왔습니다: Coherent.

몇 가지 데모를 볼 수 있는데, Flickr Browser 나 애플 스토어에서 상품 옵션 선택할 때 사용하는 Laptop configurator 등이 있습니다.

문서화도 되어 있어서 어떤 식으로 동작하는지 배울 수 있습니다. 속성과 바인딩, 위젯 작성법, and API에 대한 상세설명과 같은 자습서도 있습니다.

대부분의 작업은 HTML의 속성과 JavaScript API를 통해서 이루어집니다. 예를 들어, 이런 식으로 바인딩 할 수 있습니다:
[code:js]
userController.bindNameToKeyPath("userId", "search.content.nsid");

그러면 다음과 같은 HTML 에서 바인딩이 일어나게 되죠.
[code:xml]
<div id="demo">
<div id="userSearch">
    <h1><span>Flickr Browser</span></h1>
    <label for="userName">Flickr Username:</label>
    <input id="userName" type="text" valueKeyPath="search.parameters.username"/>
</div>

<div id="userInfo">
    <div class="queryIndicator" visibleKeyPath="user.queryInProgress">
    <img src="images/spinner.gif" width="16" height="16"/> Loading user profile…
    </div>

    <img class="buddyIcon" srcKeyPath="user.iconUrl"/>
    <h1 textKeyPath="user.content.realname._content">Real Name</h1>
    <p textKeyPath="user.content.location._content">Location</p>
</div>

<div id="userTagsList">
    <div class="queryIndicator" visibleKeyPath="userTags.queryInProgress">
    <img src="images/spinner.gif" width="16" height="16"/> Loading tags…
    </div>
</div>

from Coherent: Cocoa Databinding for Ajax on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
Dion Almaer 씨가 예전에 Google AJAX 언어 API를 이용한 번역 북마클릿에 대한 글을 쓴 적이 있습니다:
Ajax 언어 API를 개발자들이 알게 되었다는 것은 정말 운이 좋은 일이었다고 생각합니다. 덕분에 우리는 번역역 걱정을 하지 않을 수 있게 되었습니다. 이제 우리는 API를 사용하여 Goolge 백엔드를 통해 번역 작업을 할 수 있습니다.

저는 최근에 급하게 번역을 해야할 일이 몇 번 있었습니다. 프랑스어와 스페인어로 된 짧은 Twitter 메시지를 영어로 옮겨야 했습니다. 저는 외국 포럼에 나온 몇몇 기술적 이슈에 대한 답이 있었습니다.

그래서, 외국어를 선택하고 북마크를 클릭하면 작은 창이 떠서 영어로 번역해주는 번역 북마클릿을 만들어보기로 했습니다. 자동 번역이 완벽해지려면 한참 멀었지만, 대부분의 경우 요점 정도는 쉽게 알 수 있을 것입니다(책 한 권을 통째로 번역하려고 하진 않을테니까요).

아래는 이 북마클릿을 만든 방법입니다:

소스

우선, 북마클릿이 될 JavaScript 소스를 작성했습니다. 코드에는 몇가지 단계가 있습니다. 첫째로, 우리는 작업을 시작하고 Ajax 언어 API를 호출하고, 번역을 거쳐 우리가 원하는 언어를 얻을 수 있는 메소드를 작성합니다. 영어를 원하지 않는다면 언어 코드를 변경하면 됩니다.

[code:js]
if (!window['apiLoaded']) {
  window.apiLoaded = function() {
    var language = "en";
    var text = window.getSelection().toString();
    if (text) {
      google.load("language", "1", { "callback" : function() {
        google.language.detect(text, function(dresult) {
          if (!dresult.error && dresult.language) {
            google.language.translate(text, dresult.language, language, function(tresult) {
              if (tresult.translation) {
                translationWindow(tresult, dresult);
              } else {
                alert('No translation found for "' + text + '" guessing the language: ' + dresult.language);
              }
            });
          }
        });
      }});
    }
  };
}

그 뒤에는 결과를 window에 표시할 수 있는 메소드를 작성합니다. 저는 가능하면 Prototype UI Window 객체를 사용했고, 그렇지 않으면 익숙한 alert() 를 사용했습니다:

[code:js]
if (!window['translationWindow']) {
  window.translationWindow = function(tresult, dresult) {
    if (window['UI']) {
      new UI.Window({theme:  "black_hud",
                   shadow: true,
                   width:  350,
                   height: 100}).setContent("<div style='padding:6px'>" + tresult.translation + "</div>")
                   .setHeader("English Translation")
                   .setFooter("Language detected: " + dresult.language)
                   .center({top: 20}).show();
    } else {
      alert(tresult.translation + " [lang = " + dresult.language + "]");
    }
  }
}

다음에는, Prototype UI window 코드를 읽고 DOM에 리소스를 동적으로 추가하는 방식으로 함께 사용하는 CSS 리소스를 읽어들였습니다:

[code:js]
if (!window['UI']) {
  var pw = document.createElement('script');
  pw.src = 'http://almaer.com/downloads/protowindow/protowin.js';
  pw.type = "text/javascript";
  document.getElementsByTagName('body')[0].appendChild(pw);
  var pwdefault = document.createElement('link');
  pwdefault.setAttribute('rel', 'stylesheet');
  pwdefault.setAttribute('type', 'text/css');
  pwdefault.setAttribute('href', 'http://almaer.com/downloads/protowindow/themes/window.css');
  document.getElementsByTagName('body')[0].appendChild(pwdefault);
  var pwblack = document.createElement('link');
  pwblack.setAttribute('rel', 'stylesheet');
  pwblack.setAttribute('type', 'text/css');
  pwblack.setAttribute('href', 'http://almaer.com/downloads/protowindow/themes/black_hud.css');
  document.getElementsByTagName('body')[0].appendChild(pwblack);
}

마지막으로, Google API 로더를 읽어들여서 ?callback=apiLoaded을 통해 동적 로딩 옵션을 사용합니다. 이는 우리가 처음에 봤던 메인 드라이버를 시작하게 합니다. 이미 로드되었으면 직접 호출할 수 있습니다(같은 페이지에서 다중 번역을 하기 위함).

[code:js]
if (!window['google']) {
  var s = document.createElement('script');
  s.src = 'http://www.google.com/jsapi?callback=apiLoaded';
  s.type = "text/javascript";
  document.getElementsByTagName('body')[0].appendChild(s);
} else {
  apiLoaded();
};

"컴파일"

이것은 가공 전 형태인데, 우리가 필요한 것은 영어를 원하면 바로 사용할 수 있는 북마클릿 형태입니다. 이를 위해 저는 John Grubber 씨의 makebookmarklet Perl 스크립트를 사용해 변환을 했습니다.

서버

Prototype UI 코드는 서버에 있어야 하므로, Prototype + Window JavaScript의 조합된 파일을 포함한 가볍게 만든 버전과 한가지 테마의 CSS 세트를 서버에 넣었습니다.

작동

제가 얘기한 것에 대해 믿음이 안가세요? 실제 동작하는 것을 한번 보세요:


또 다른 번역 관련 응용프로그램입니다. 웹 기반 IRC 응용프로그램인 Mibbit 에는, 대화방에서 자동 번역을 해주는 "번역" 기능이 있습니다.
사용자 삽입 이미지

from Immediate Translation and Mibbit on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 0
사용자 삽입 이미지

위의 사진은 여러분에게 청황(靑黃)색맹이 이미지를 보는 방법을 보여줍니다. Michael Deal씨가 다음을 포함한 가능한 가장 공통적인 색상 함수의 대부분을 지원하는 Color Matrix Library를 만들었습니다:

Hue, Saturation, Brightness, Contrast, Exposure, Temperature, Tint, Channels, Blindness, Colorize, Threshold, 그리고 Invert

Michael씨는 그 다음에 색맹에게 우리의 사이트가 어떻게 보이는지 시각적으로 보여주기 위해 Color Matrix를 사용해서 canvas 라이브러리를 만들었습니다.

의학적인 처리분야라 번역하기가 힘들어 생략했습니다. (__):

from Using canvas to test your site with colorblind folks on Ajaxian
Posted by 행복한고니 트랙백 1 : 댓글 0