Embed Size (px)
DESCRIPTION
K모바일에서 발표한 단일 페이지 인터페이스 웹/앱 개발. 웹의 역사와 개발 패러다임의 변화를 되돌아보고, 웹앱을 위한 아키텍쳐로 단일 페이지 인터페이스(Single Page Interface)를 제시하고, jQueryMobile과 SenchaTouch를 이용해 동일한 웹앱을 SPI 방식으로 만들어본다.
Citation preview
<iolothebard at gmail dot com>
단일 페이지 인터페이스(SPI)모바일 웹/앱 개발
2011년 5월 23일 월요일
차례
•웹앱을 준비하는 개발자들을 위한 안내서
•웹앱에 대처하는 개발자들의 자세
•단일 페이지 인터페이스 개요
•jQueryMobile을 이용한 SPI 웹앱 개발
•Sencha Touch를 이용한 SPI 웹앱 개발
2011년 5월 23일 월요일
웹앱을 준비하는 개발자들을 위한 안내서
2011년 5월 23일 월요일
홈페이지?
웹 사이트?
웹 서비스?
웹 애플리케이션?
웹앱?
하이브리드앱?
2011년 5월 23일 월요일
•HTML ~3.x
•HTTP ~1.0
•CGI
•극도로 제한된 자바“스크립트”
•사용자 인터랙션 거의 없음
WEB 1.0 - READ ONLY WEB
2011년 5월 23일 월요일
2011년 5월 23일 월요일
•HTML 4.0~, DHTML, XHTML, CSS
•HTTP 1.1 with “AJAX”
•“거시기” 서버 페이지
•여전히 보조적인 “glue” 자바스크립트
•제한된 사용자 인터랙션
WEB 2.0 - READ/WRITE WEB
2011년 5월 23일 월요일
2011년 5월 23일 월요일
•Web as a Platform
•Semantic Web
•Real-time Web
•Ubiquitous Web
WEB 3.0? WEB^2?
2011년 5월 23일 월요일
Video
JavascriptSVGCSS3
GeolocationWeb Storage Semantic
WebSocket
CanvasARIA
MathML
Audio
Device Element
New Form
Drag & Drop
Microdata
Offline ApplicationWebGLFiles
Worker
2011년 5월 23일 월요일
웹앱에 대처하는 개발자들의 자세
2011년 5월 23일 월요일
호스트/터미널 아키텍쳐??
•페이지 이동은 페이지 이동일 뿐~
•“상태” 없음
•서버가 다 한다. 클라이언트는 거들 뿐~
2011년 5월 23일 월요일
2011년 5월 23일 월요일
•호스트 == 웹서버?
•터미널 == 웹브라우져?
•CGI
•$ telnet google.com 80 ↵
•GET / HTTP/0.9 ↵ ↵
•소스 코드 여기 저기에 HTML 조각이 포함
MODEL 0
2011년 5월 23일 월요일
웹 서버
정적 컨텐츠
동적 컨텐츠
데이터
웹 브라우져
정적 컨텐츠
CGI
2011년 5월 23일 월요일
2011년 5월 23일 월요일
Bold Italic Underline
<font color=”blue” size=”20”><b>Bold</b><b>Italic</b><u>Underline</u></font>
2011년 5월 23일 월요일
Multiplication results
The Product of 10 and 20 is 200.
printf("%s%c%c\n", "Content-Type:text/html",13,10);printf("<HTML><HEAD><TITLE>Multiplication results</TITLE></HEAD><BODY>");printf("<H3>results</H3>");char *data = getenv("QUERY_STRING");if(data == NULL) printf("<P>Error!</P>");else if(sscanf(data,"m=%ld&n=%ld",&m,&n)!=2) printf("<P>Error!</P>");else printf("<P>The product of %ld and %ld is <b>%ld</b>.</P>",m,n,m*n);printf("</BODY></HTML>”);
2011년 5월 23일 월요일
•페이지 이동 == 상태 변화
•매번 “상태”를 주고 받기 - Cookie!
•or 서버가 “상태”를 관리 - Session!
•Model 1, Model 2, Model 3, ...
서버 중심 아키텍쳐
2011년 5월 23일 월요일
2011년 5월 23일 월요일
•PHP, JSP, ASP, ColdFusion, ...
•“거시기” Server Pages
•좀 더 편리한 CGI
•그래서, 좀 더 지저분한 CGI
•HTML 여기 저기에 소스코드 조각 포함
MODEL 1
2011년 5월 23일 월요일
웹 서버
정적 컨텐츠
동적 컨텐츠 서버 페이지
데이터
웹 브라우져
정적 컨텐츠
자바스크립트
2011년 5월 23일 월요일
2011년 5월 23일 월요일
<%@ page language=”java”%><html><head><title>Multiplication results</title></head><body><H3>Multiplication results</H3><% try {long m = Long.parseLong(request.getParameter(“m”));long n = Long.parseLong(request.getParamter(“n”));%><p>The product of <%=m%> and <%=n%> is <b><%=(m*n)%></b>.</p><% } catch(Exception e) { %><p>Error!</p><% } %></body></html>
Multiplication results
The Product of 10 and 20 is 200.
2011년 5월 23일 월요일
•ASP.NET MVC, CakePHP, Django, RoR, SpringMVC, Struts, ... 많기도 하지... -_-
•MVC가 좋다길래...
•좀 더 체계적인 CGI
•그래서, 좀 더 귀찮은 CGI
•HTML 템플릿 엔진
•소스 코드와 HTML을 분리
MODEL 2
2011년 5월 23일 월요일
웹 어플리케이션 서버
정적 컨텐츠
동적 컨텐츠 MVC프레임웍
데이터
웹 브라우져
정적 컨텐츠
자바스크립트
2011년 5월 23일 월요일
2011년 5월 23일 월요일
http:/test.com/test.com/mul.jsp?m=10&n=20
Multiplication results
The Product of 10 and 20 is 200.
class ProductModel { long multiplier, long multiplicant, long product;}
class CalcService { long getProduct(long m, long n) { return m * n; }}
long m = Long.parseLong(request.getParameter(“m”));long n = Long.parseLong(request.getParameter(“n”));ProductModel model = new ProductModel(m, n, calcService.getProduct(m, n));request.setAttribute(“model”, model);getServletContext().getRequestDispatcher(“mul.jsp”).forward(request, response);
<jsp:useBean id=”model” class=”ProductBean”/><H3>Multiplication results</H3><p>The product of <jsp:getProperty name=”model” property=”multiplier”/> and <jsp:getProperty name=”model” property=”multiplicand”/> is <b><jsp:getProperty name=”model” property=”product”/></b>.</p>
M
V
C
2011년 5월 23일 월요일
•WebObject, JSF, ASP.NET Server Controls, GWT, ...
•“onclick” over HTTP?
•좀 더 그럴듯 한 MVC
•그래서, 좀 더 느려터지고, 좀 더 귀찮은 MVC
•서버 기반 웹 컴포넌트
•표준 웹 기반 RIA(X-Internet)
•HTML 조각 + (서버와 통신할)자바스크립트
MODEL 2.5? MODEL 3?
2011년 5월 23일 월요일
웹 어플리케이션 서버
정적 컨텐츠
동적 컨텐츠 서버 컴포넌트
데이터
웹 브라우져
정적 컨텐츠
자바스크립트
2011년 5월 23일 월요일
2011년 5월 23일 월요일
2011년 5월 23일 월요일
2011년 5월 23일 월요일
•PROS
•풍부하고 검증된 인프라스트럭쳐 & 제반 기술
•CONS
•네트웍 대역폭 & CPU 자원
•서버: 매번 전체 페이지를 재조립해서, 전체 페이지를 재전송
•클라이언트: 매번 전체 페이지를 받아서, 전체 페이지 다시 그림
•상태 불일치 - 세션, 캐시, 이전/다음 버튼, 폼 필드 소실, 폼 재전송, ...
•반응성
PROS & CONS
2011년 5월 23일 월요일
•사용자 인터랙션 “이벤트” == 상태 변화
•클라이언트가 “상태”를 관리
•클라이언트가 다 한다! 서버는 거들 뿐~
•Model 2+AJAX, Model 3.5, ... Model X
클라이언트 중심 아키텍쳐
2011년 5월 23일 월요일
2011년 5월 23일 월요일
FULL-PAGE BACK&FORTH
HTTP Request
New HTML Page
Web Server
2011년 5월 23일 월요일
PARTIAL PAGE UPDATE
XML HTTP Request
New HTML Fragment
Web Server
2011년 5월 23일 월요일
SINGLE PAGE INTERFACE
XML HTTP Request
Data
Web Server
JavaScript
2011년 5월 23일 월요일
AJAX 패턴 (1)
패턴 설명Browser-side Templating 템플릿 처리를 웹브라우져에서 AJAX와 자바스크립트를 사용하여 처리
Cross-Domain Proxy
Same-Origin에 위치한 웹서버가 크로스 도메인에 위치한 서버와의 통신을 대행
Heartbeat 클라이언트의 현재 상태를 주기적으로 주고 받음
HTML Message HTTP를 HTML과 딸린 리소스를 받는 대신, JSON/XML등의 데이터를 주고 받는 데 사용
Microlink 동일한 페이지 내의 다른 부분으로 이동(화면/상태 전환)하기 위해 가상의 링크를 제공
On-Demand JavaScript 자바스크립트를 필요에 따라 동적으로 로딩
Page Arrangement 현재 상태에 따라 서버에서 새로운 정보를 가져와 HTML UI를 갱신/표시/숨김
출처: MSDN 매거진
2011년 5월 23일 월요일
AJAX 패턴 (2)
패턴 설명
Periodic Refresh 주기적으로 서버에서 새로운 정보를 가져와 HTML UI를 갱신
Popup 팝업 윈도 대신, 다른 HTML 노드 위에 표시되는 노드를 통해 모달 대화상자를 제공
Progress Indicator 서버와의 통신이 진행되는 상황를 표시
Submission Throttling 서버로 보내는 요청을 모아서 보내거나, 로컬 캐시를 사용
Timeout 서버로 보내는 요청에 제한 시간을 적용
Unique URLs 어플리케이션의 각 상태에 고유한 URL을 부여
Virtual Workspace 최소한의 데이터만으로 UI를 표현하고, 추가적인 데이터는 필요할 때 받아서 UI 갱신
출처: MSDN 매거진
2011년 5월 23일 월요일
•PROS
•네트웍 대역폭 & CPU 부하 감소
•응답성 향상 & 사용자 경험 증대
•CONS
•북마크, 이전/다음 버튼
•검색 엔진 최적화(SEO)
•팝업 윈도
•페이지 이동 기반 서비스
•접근성
PROS & CONS
2011년 5월 23일 월요일
단일 페이지 인터페이스 개요
2011년 5월 23일 월요일
MODEL X
•웹 브라우져 => 웹 런타임(Web Run-time; WRT)
•런타임 라이브러리: DOM, AJAX and HTML5 JS API(W3C WebApi), ...
•GUI 서브시스템: HTML5, CSS3, Canvas, SVG, ...
•I/O 서브시스템: HTTP, AJAX, 웹소켓, 웹스토리지(key-value), 캐시, ...
•프록그래밍 언어: 자바스크립트, CoffeeScript, Objective-J, ...
•웹 (어플리케이션) 서버 => 고전적인 웹 서버 + RESTful (Open or not) API 서버
•(클라이언트가 웹브라우져로 정형화/표준화된) 클라이언트/서버 아키텍쳐
•(데스크탑용 GUI 어플리케이션과 동일한) Event Driven Programming
2011년 5월 23일 월요일
웹 서버
정적 컨텐츠
데이터
웹 브라우져
동적 컨텐츠
RESTful API 서
자바스크립트
2011년 5월 23일 월요일
•Gmail, Docs...를 비롯한 구글의 거의 모든 웹 서비스들
•Twitter, Facebook, ... 난다 긴다하는 수 많은 웹 서비스들
•AIR, Titanium 등을 활용한 데스크탑용 어플리케이션들
•화면 상하단(제목/탭) 빼면 거의 다 웹인 스마트폰 앱들
•거의 모든 웹 서비스에서 부분적으로는 SPI 기술 적용
•...
적용 사례
2011년 5월 23일 월요일
적용 사례 - DEMO
2011년 5월 23일 월요일
•어플리케이션에게 “북마크”란?
•페이지 URL 저장/바로가기 => 상태 저장/복원
•각 화면마다 고유한 URL 해시(#) 부여
•https://mail.google.com/mail/#label/javascript
•http://twitter.com/#!/search/javascript
•window.location.hash 속성
•window.onhashchange 이벤트
북마크
2011년 5월 23일 월요일
•어플리케이션에게 “이전/다음” 이란?
•이전/다음 페이지 => 이전/다음 상태
•히스토리를 무시하면? 이전/다음 페이지 => 종료/재시작
•브라우져 히스토리 API
•http://diveintohtml5.org/history.html
•window.history.pushState(state, title, url)
•window.onpopstate 이벤트
•window.onload / window.onbeforeunload / window.onunload 이벤트
이전/다음 버튼
2011년 5월 23일 월요일
•어플리케이션에게 검색이란?
•웹 페이지 검색 => 데이터를 제공하는 어플리케이션 검색
•검색 엔진만을 위한 링크/페이지 별도의 제공
•<a href=”URL” onclick=”return true”>...</a>
•Making AJAX Applications Crawlable
•http://twitter.com/#!/search/javascript
•=> http://twitter.com/search/javascript
•http://code.google.com/web/ajaxcrawling/
검색 엔진 최적화(SEO)
2011년 5월 23일 월요일
•어플리케이션에게 팝업 윈도란?
•새 브라우져 창 => 대화 상자(Dialog Box)
•모달 레이어(Modal Layer) 사용
•브라우져의 팝업 차단 기능 회피
•브라우져 팝업 윈도로 인한 상태 불일치 해소
•<div style=”position:absolute;top:0;left:0;width:100%;height:100%;background:black;opacity:0.5;z-index:999;”></div>
•<div style=”position:absolute;top:100px;left:100px; width:320px;height:240px; background:white;z-index:1000;”>...</div>
팝업 윈도
2011년 5월 23일 월요일
•Google AdSense, Google Analytics, OAuth, ...
•어플리케이션/앱을 위해 제공되는 대체 API 사용
•예: Twitter를 포함한 일부 OAuth는 iframe 거부: XAuth로 대체
•예: _gat.getTracker(‘UA-XXXXX-X’)._trackPageView(‘pseudo_page_url’);
•예: admob_vars = { ... manual_mode:true, ... } _admob.fetchAd(document.getElementById(‘admob’));
•<iframe> 사용
페이지 이동 기반 서비스
2011년 5월 23일 월요일
접근성(ACCESSIBILITY)
•동적으로 바뀌는 DOM 노드는 스크린 리더에게 넘사벽?
•Accessible Rich Internet Application(ARIA)
•최신 HTML5, CSS3가 지원되지 않는 브라우져? 자바스크립트가 지원되지 않는 브라우져?
•Progressive Enhancement & Unobtrusive Javascript
2011년 5월 23일 월요일
JQUERYMOBILE을 이용한 SPI 웹앱 개발
2011년 5월 23일 월요일
JQUERYMOBILE 소개
• jQuery 기반
•주요 모바일 플랫폼 호환
•경량(12k, 이미지 사용 최소화)
•HTML5 마크업 기반 설정
•점진적 개선(Progressive Enhancement)
•자동 초기화(Automatic Initialization)
•접근성(Accessibility) 지원
•터치 최적화 이벤트 & 플러그인
•강력한 테마 프레임웍
2011년 5월 23일 월요일
•<div data-role=”page”>
•<div data-role=”header”>
•<h1>title</h1>...
•</div>
•<div data-role=”content”>...</div>
•<div data-role=”footer”>...</div>
•</div>
페이지
2011년 5월 23일 월요일
•foo.html
•<body>
•<div data-role=”page”>
•<a href=”#bar”>Click Here</a>
•</div>
•<div id=”bar” data-role=”page”>...</div>
•</body>
단일 페이지 인터페이스
2011년 5월 23일 월요일
• foo.html
• <body>
• <div data-role=”page”>
• <a href=”bar.html”>Click Here!</a>
• </div>
• </body>
• bar.html
• <body>
• <div data-role=”page”>...</div>
• </body>
부분 페이지 갱신
2011년 5월 23일 월요일
•PROS
•점진적 개선(Progressive Enhancement)
•적절한 퇴보(Graceful Degradation)
•제한적인 자바스크립트 활용 - Unobtrusive Javascript
•고수준의 접근성 지원
•CONS
•제한된 UI & UX
PROS & COS
2011년 5월 23일 월요일
2011년 5월 23일 월요일
2011년 5월 23일 월요일
DEMO #1
2011년 5월 23일 월요일
SENCHA TOUCH를 이용한 SPI 웹앱 개발
2011년 5월 23일 월요일
SENCHA TOUCH 소개
•Ext JS + jQTouch + Raphael
•풍부한 UI 컴포넌트
•향상된 터치 이벤트
•iOS, 안드로이드, 블랙베리6 등의 주요 모바일 플랫폼 지원
•클라이언트측 MVC 프레임웍 & 데이터 API
2011년 5월 23일 월요일
컴포넌트 만들기
•var foo = new Ext.Panel({
•items: [ { xtype:‘button’, text:‘Click Here!’, handler: function(){
•panel.setActiveItem(‘bar’);
•} } ]
•});
•var bar = new Ext.Panel({ id:‘bar’, ... });
•var top = new Ext.Panel({ layout:‘card’, items: [ foo, bar ] ... });
2011년 5월 23일 월요일
•new Ext.Panel({
•id: ‘foo’,
•html: ‘<h1>Hello, World</h1>’
•});
•Ext.Ajax.request(url:‘foo.html’, success:function(res) {
•Ext.getCmp(‘foo’).update(res.responseText);
•});
컴포넌트 갱신하기
2011년 5월 23일 월요일
HTML DOM 기반 컴포넌트
•JavaScript:
•new Ext.Panel({
•contentEl: ‘foo’
•});
•HTML:
•<div id=”foo” style=”display:none;”>
•<h1>Hello, World</h1>
•</div>
2011년 5월 23일 월요일
•new Ext.List({
•itemTpl: ‘<p>{name}</p><p><small>{class} {level}</small></p>’
•data: [
•{ name: ‘Iolo’, class:‘bard’, level:50 },
•{ name: ‘Shamino’, class:‘fighter’, level:60 },
•{ name: ‘Dupre’, class:‘paladin’, level:55 } ...
•] } );
정적 데이터 기반 컴포넌트
2011년 5월 23일 월요일
• JavaScript:
• Ext.regModel(‘Avatar’, { fields:[‘name’, ‘class’, ‘level’] });
• new Ext.List({
• itemTpl: ‘<p>{name}</p><p><small>{class} {level}</small></p>’
• store: new Ext.data.JsonStore({ model:‘Avatar’, proxy: { type: ‘ajax’, url:‘avatars.json’ } })
• });
• Dynamic Data(avatars.json):
• [
• { name: ‘Iolo’, class:‘bard’, level:50 },
• { name: ‘Shamino’, class:‘fighter’, level:60 },
• { name: ‘Dupre’, class:‘paladin’, level:55 }, ...
• ]
동적 데이터 기반 컴포넌트
2011년 5월 23일 월요일
•PROS
•풍부한 UI 컴포넌트 & 방대한 라이브러리 & 개발 도구
•CONS
•“Very” Obtrusive Javascript
•가파른 학습 곡선
•코드/디자인의 결합 - 협업이 어려움
•취약한 접근성 지원
PROS & CONS
2011년 5월 23일 월요일
DEMO #2
2011년 5월 23일 월요일
JQUERYMOBILE VS SENCHA TOUCH
2011년 5월 23일 월요일
jQueryMobile vs Sencha Touch
1.0.0a4.1 버전 1.1.1
MIT 라이센스 GPLv3 / 상업용
스마트폰과 태블릿을 위한터치에 최적화된 웹 프레임웍 본인들의 주장 모바일 자바스크립트 프레임웍
최초의 HTML5 모바일 웹앱 프레임웍
★★ UI 컴포넌트 ★★★★
★★★ 브라우져 지원 ★★★★
★★★★ 접근성 ★
★★★/★★★ 학습곡선(개발/디자인) ★/★
★★★/★★ 성능(로딩/실행) ★/★★★
★/★★★ 문서(공식/비공식) ★★/★
웹 “사이트” 내 맘대로 결론 웹 “어플리케이션”
2011년 5월 23일 월요일
Q&A
2011년 5월 23일 월요일
THAT’S ALL FOLKS
2011년 5월 23일 월요일
