AJAX (Asynchronous Javascript+XML) 기술소개및향후전망 윤석찬 channy@daumcorp.com 다음커뮤니케이션 R&D 센터 본자료의디자인요소중많은부분은 http://we04.com 에서발표한 Doug Bowman 의프리젠테이션을인용하였습니다.
Agenda What s Ajax? Ajax 의정의및소개 기존웹서비스나 Remote Scripting 과의차이점 Ajax 기반개발사례 Ajax 적용과정 Google 의 Ajax 적용사례 (Gmail, Google Maps, Google Suggests) Daum 의 Ajax 적용사례 ( 한메일주소록 / 검색 / 플래닛 ) Ajax 어플리케이션사례 Accessory Rich Application Personalization Platform 대안기술 : Rich Internet Application Macromedia Flex Microsoft XAML Mozilla XUL Yahoo! Widget / Mac Dashboard 2
What s AJAX? Ajax 란? XMLHttpRequest와자바스크립트를이용한비동기데이터교환 XML 및XSLT를통한데이터교환및이용 DOM을함께사용하여다이나믹표현제공 XHTML 및 CSS를이용한표준기반표현기법 AJAX is not technology but approach (platform) like LAMP Jesse James Garrett, Ajax: A New Approach to Web Applications, Feb 18, 2005 (http://www.adaptivepath.com/publications/essays/archives/000385.php) I needed something shorter than Asynchronous JavaScript+CSS+DOM+XMLHttpRequest to use when discussing this approach with clients. - Jesse James Garrett 3
Web vs Ajax : Structure 브라우저클라이언트 사용자 UI 클라이언트 브라우저클라이언트 사용자클라이언트 자바스크립트호출 HTML CSS 데이터 Ajax 엔진 HTML 호출 HTML 호출 웹서버 웹서버 / XML 서버 데이터, UCC, 백오피스레거시시스템 웹기반서버시스템 < 전통적인웹처리방식 > 데이터, UCC, 백오피스레거시시스템 웹기반서버시스템 <Ajax 처리방식 > 4
데이터트랜잭션 데이터트랜잭션 데이터트랜잭션 데이터트랜잭션 Web vs Ajax: Processing < 전통적인웹처리방식 > 클라이언트 사용자액션 사용자액션 시간 데이터트랜잭션 데이터트랜잭션 <Ajax 처리방식 > 서 버 서버처리 서버처리 클라이언트 브라우저 UI 사용자액션사용자액션사용자액션 Ajax 엔진 시간 서 버 서버처리서버처리서버처리서버처리 5
Adopting Ajax XMLHttpRequest 98년 MS IE5.0 ActiveX 객체로구현 Mozilla 1.0 지원시작 Safari 1.2에서지원시작 Opera 8에서지원시작 W3C DOM Level3 지원예정 XMLHttp 적용사례 MS IE XMLHttp 웹기반메일서비스, oddpost 채팅서비스, Sayclub XP 환경의 XMLHttp Gmail, Flickr < 해외 Ajax 의원조는 Oddpost> < 국내 Ajax 의원조는세이클럽 (?)> 6
Ajax summit (May 9, 2005) Ajax vs. Remote Scripting Brent Ashley, Remote Scripting Examples Luke Wroblewski, ebay Derek Powazek, Technorati Eric Costello, Flickr Iain Lamb, Yahoo Bill Scott, Sabre Airline Solutions Platforms Douglas Crockford, JSON Kevin Lynch, Macromedia David Heinemeier Hansson, Ruby on Rails Sam Stephenson, Prototype Alex Russell, Dojo Toolkit Ajax 기술은블로그를통해기술오피니언리더들을통해전파되는경향이있다. 7
e.x. Google, it s start Gmail (http://gmail.com) 2004년 4월에 1GB 저장공간메일서비스개시 JavaScript를통해 UI를전송한후, 데이터부분을 XMLHTTP로부터전송받음으로써빠른속도와어플리케이션같은웹 UI의획기적인발상의전환을이룸. 2005년 2월 HTML 버전을제공함으로서비Ajax 브라우저및비 Ajax사용자 ( 장애인 ) 지원 8
Google Maps XMLHttp 와 DOM Handling 으로만구현된완벽한멀티플랫폼서비스 Drag&Drop 으로좌표이동및좌표값과배율을기초로이미지를 ajax 로받아옴. 위성및하이브리드제공 API 를통한변종서비스가계속나오고있음 MSN Virtual Earth, A9 Maps 등경쟁서비스봇물 Google Suggest 검색어에대한추천단어제공서비스로 Ajax 를이용한대표적인사례임 9
한메일 Ajax 예제 한메일주소록 주소록데이터를클라이언트와초기싱크를한후데이터변경이생길때마다 XMLHttp 를이용해서버에전달하고 DOM 데이터추가. 주소정렬, 가나다순, 검색, 주소 / 그룹간편편집, 추가, 삭제를모두 DOM Handling 과 Ajax 를이용하여서비스한메일검색 검색결과가많은경우, 최초검색결과만보여주고이후검색결과는순차적으로전달하도록설계 주소를두번클릭하면바로수정이가능하다. 또한, 이름 / 이메일순으로정렬가능하며 Outlook 클라이언트처럼동작한다. 10
플래닛 Ajax 소개 자신의친구갤러리를자유자재로이동할수있으며놓았을때이동된값을 ajax 를통해 db 에저장한다. Flickr 와같이포토메모를붙이거나수정할수있다. 데이터는 xmlhttp 를통해 db 에바로전달되며, 메모는 Reload 된경우좌표정보로레이어로표시된다. 덧글을달면 ajax 로 db 에저장되고페이지이동없이바로표시된다 11
Examples: Accessory Anyterm.org Amazon Diamond Search 다음검색에서 Amazon Diamond Search 를입력하세요! 12
Examples: Rich Application 일정관리 Kiko, http://www.kiko.com TimeTracker, http://www.formassembly.com/timetracker/ 문서편집기 Writely, http://www.writely.com HTMLEdit, http://www.squarefree.com/htmledit 메신저 Ajax IM, http://www.unwieldy.net/ajaxim 13
Examples: Personalization Google http://www.google.com/ig 채널 Drag & Drop 기능 RSS 채널, 뉴스, 날씨, 메일, 검색결과등을한눈에볼수있음 MSN Start.com http://www.start.com MSN Sandbox 서비스로베타서비스중. 현재 Version3 까지나와있으며 Google 개인화홈과비슷한서비스를제공하고있음. Protopage http://www.protopage.com Blinklist http://www.blinklist.com 14
Examples: Platform Ruby on Rails (http://www.rubyonrails.org) Bindows (http://www.bindows.net) Backbase (http://www.backbase.com) Dojo (http://dojotoolkit.org) Sajax (http://www.modernmethod.com/sajax/) DWR (http://getahead.ltd.uk/dwr/) 15
Ajax 에대한문제점 기술적문제 Browser 호환성 브라우저별로상이한 DOM 핸들링및메모리처리방법 어려운자바스크립트개발및디버깅환경 다양한 RIA 기술에대한선택 사용자문제 접근성 ( 장애인및비 Javascript 브라우저등 ) 사용성 (Back/Forward, Bookmark 등 ) 기획의문제 Ajax를이해한기획안이나오기힘들다 사용자에게친밀한 Application UI를벤치마킹필요 16
Ajax 주변움직임 ActiveX 대체기술 Java, NSplugin : 예전기술이거나 XP 환경에적합하지않음 AJAX: xmlhttp 과 Javascript 를통한인터랙티브 UI 기술 브라우저확장기능 Mozilla/Firefox : XUL/Javascript/CSS 를통한확장가능 Mac OS X 의 Tiger 속의 Dash Board 와같은기능제공 Microsoft: XAML(Longhorn) 을기반으로하는닷넷어플리케이션 표준움직임 WHATWG: Mozilla 와 Opera 에서표준안제정중 WebApplication, WebForm, WebControl SVG, VoiceXML, Xform, Web Services 는새로운웹세계를열것이다 2 차브라우저전쟁은표준전쟁이다!!! 17
Alternatives : Rich Internet Application XUL XAML SVG Flash ActiveX Flex Ajax 범용적사용가능성 데스크탑기반 UI 풍부도 개발환경용이성 플랫폼에대한기술독립성 벤더에대한기술독립성 기술자 Pool 및이전용이성 18
RIA: Macromedia Flex (1) - XML(MXML)+ ECMAScript (ActionScript) + Class Library= SWF <?xml version="1.0"?> <mx:application xmlns:mx="http://www.macromedia.com/2003/mxml" > <!-- data model --> <mx:array id="coffeearray"> <mx:object> <label>red Sea</label> <data>smooth and fragrant</data> </mx:object> <mx:object> <label>andes</label> <data>rich and pungent</data> </mx:object> <mx:object> <label>blue Mountain</label> <data>delicate and refined</data> </mx:object> </mx:array> <mx:script> <![CDATA[ function addtocart():void { cart.additem(coffeecombo.selecteditem.label,coffeecombo.selecteditem.data); } ]]> </mx:script> <!-- view --> <mx:panel title="my First Flex App"> <mx:label text="coffee Blends"/> <mx:combobox id="coffeecombo" dataprovider="{coffeearray}"/> <mx:text text="description: {coffeecombo.selecteditem.data}"/> <mx:button label="add to Cart" click="addtocart()"/> <mx:list id="cart"/> </mx:panel> </mx:application> 19
RIA: Macromedia Flex (1) 20
RIA: XAML on Windows Vista (1) <Canvas xmlns="http://schemas.microsoft.com/2003/xaml" Background="LightCyan" Width="100%" Height="100%"> <Image Source="lh.bmp" Canvas.Left="5" Canvas.Top="5" /> <Text Canvas.Left="90" Canvas.Top="20" FontSize="36">Hello, Longhorn! </Text> </Canvas> <FlowPanel> <Button Background= Green Click= EventY >Yes</Button> <Button Background= Red Click= EventN >No</Button> </FlowPanel> - Windows Vista 아발론엔진사용 - XAML 과간단한 C# 코드로 RIA 개발가능 XAML.net Code void EventY( ) { MessageBox.Show( Agree"); } void EventN( ) { MessageBox.Show( Disagree"); } C# Code 21
RIA: XAML on Windows Vista (2) Windows Vista Screenshot 22
RIA: AFLAX (Asynchronous Flash + XAML) - XAML 과 Flash 클라이언트의결합 -Windows/Mac/Linux/PDA 에모두적용가능 http://www.xamlon.com/ 23
RIA: XUL Application for Firefox(1) - XUL + CSS + JavaScript (XPCOM) - 수백개의 Firefox Extensions 개발중 24
RIA: XUL Application for Firefox(2) Mozilla Amazon Browser: http://www.faser.net/mab/ 25
RIA: (aka.konfabulator) - Graphic + JavaScript (Mozilla) Engine - Widget: Javascript + HTML + CSS - Windows/Mac 버전제공중 - 2005 년 6 월 Yahoo! 에인수 http://widget.yahoo.com/ 26
RIA - Graphic + JavaScript (Mozilla) Engine - Widget: Javascript + HTML + CSS - Windows/Mac 버전제공중 - 2005 년 6 월 Yahoo! 에인수 http://www.apple.com/downloads/dashboard/ 27
Ajax 전망 Weblication 의대세기술로자리매김 웹을더욱다이나믹하게만든다. 풍부한 UI를선보일수있다. XHTML+CSS 레이아웃웹표준화와함께트렌디기술로자리잡을것이며, 고급 UI개발자및웹개발자의기본소양이될것이다. 좀더다양한 RIA 기술습득이요구된다. Ajax 는 Web2.0 을위한 RIA 기술의시작점이다. = Web as Platform Blog/RSS와같은개인화 / 시맨틱서비스 Google/Yahoo의네트웍확장을위한 API 경쟁 28
Bookmarks Ajax 정보사이트 Ajaxian, http://www.ajaxian.com AjaxMatter, http://ajaxmatters.com Ajax on Rails, http://www.onlamp.com/pub/a/onlamp/2005/06/09/rails_ajax.html Ajax 소개자료, http://www.likejazz.com/29692.html Ajax Tag Technorati Ajax Tag, http://technorati.com/tag/ajax Del.icio.us Ajax Tag, http://del.icio.us/tag/ajax O reilly Radar Ajax Tag, http://radar.oreilly.com/tag/ajax 29