2011.02.25
WebApps FutureCon 에서 발표한 "2011년 웹 & 모바일 개발자가 주목해야할 기술들" 자료입니다. HTML5,CSS3,Javascript,Responsive Web Design,Device API,Hybrid App,Hybrid Framework 등에 대해서 설명합니다.
212. src=http://html5shiv.googlecode.com/svn/trunk/html5.js/script
![endif]--
✓ John Resig 의 제안 : http://ejohn.org/blog/html5-shiv/ , IE 6 까지 지원
• Mordernizr - http://www.modernizr.com/
✓ HTML5Shiv 기능을 포함하여 CSS3 (조건분기) 까지 더 폭넓은 지원
✓ Modernizr 객체를 생성하여 HTML5, CSS3 기능이 지원되는지 검사
if
228. HTML5 Video Audio
• 20종의 HTML5 Video Player - http://j.mp/dfxNMQ
✓ Video JS , JW Player , Mediaelement.js , Projekktor ..
✓ Flash Fallback 을 이용해서 IE 까지 지원
• VideoJS
✓ http://videojs.com/ - Free OpenSource , Skin , Full Screen 지원
• Audio.js
✓ http://kolber.github.com/audiojs/ , OpenSource(MIT)
229. Javascript !!!
• 자바스크립트의 재발견
• Javascript Library for Mobile
• UI Frameworks
• Application Frameworks
• Server-side JavaScript
• Languages that Compiles to JS
230. Javascript for Mobile
• - http://zeptojs.com
✓ Mobile 만을 위한 자바스크립트 라이브러리 ( Mobile WebKit 최적화 )
✓ jQuery 와 유사한 문법 제공 but jQuery ( 26.7 K ) , Zepto.js ( 2.3K )
✓ 오픈소스 ( MIT License )
✓ $('p').html('test').css('color:red');
✓ get,each,index,first,find,closest,next,prev,remove,html,show,hide,offset,heig
ht,width,attr,css,addClass..
✓ AJAX : $.post , $.getJSON
✓ Touch Event
-‐ $('some selector').tap(function(){ ... });
-‐ $('some selector').doubleTap(function(){ ... });
-‐ $('some selector').swipe(function(){ ... });
231. UI Library for Touch Devices
Web UI는 Touch 와 친화적이지 않음
• jQTouch - http://jqtouch.com
• jQueryMobile - http://jquerymobile.com
• Sencha Touch - http://sencha.com
• DHTMLX Touch - http://dhtmlx.com/touch/
• jo - http://joapp.com
• wink - http://winktoolkit.org
• Cross
280. Server-side Javascript
• Netscape Livewire를 시작으로 다양한 접근 http://j.mp/eNt2Ay
• Node.JS : Evented Server-Side Javascript http://nodejs.org/
✓ Google Chrome 의 Javascript Engine V8 을 단독으로 사용
✓ 모든 Network I/O 는 NonBlocking , File I/O 는 Asynchronous
✓ Thread 방식에 비해 뛰어난 성능, 다양한 모듈 개발중 (S3,MySQL.. )
✓ HTTPd , FTPd , IMAP, WebDAV 등 다양한 서버 모듈 개발 완료
• CommonJS : Ecosystem for Javascript Outside the Browser , http://commonjs.org/
✓ 브라우저가 아닌 서버/데스크탑 어플을 작성하기 위한 스펙들
✓ Server-Side , Command Line , Desktop GUI , Hybrid ( Titanium .. )
✓ 모듈 시스템 , 파일시스템 , 유닛테스팅 , 콘솔 , Promise .. 등등
285. 언어들
• List of Languages that compile to JS : http://j.mp/hp2pnR
• CoffeeScript Kaffeine : Javascript 를 더 간결하게
• Optimizer : Google Closure , UglifyJS
• Ruby , Python , Lisp Scheme
• j2js : Java ByteCode to JS / Script# : C# to JS
286. CoffeeScript http://coffeescript.com
• Javascript 로 컴파일 되는 간단한 언어 : coffee -c hello.coffee ➠ hello.js
• ; 과 { 가 없는 영어같은 문법, 들여쓰기 기반 , Inspired by Python Ruby
number = 42 number = 42 ;
opposite = true opposite = true ;
number = -42 if opposite if (opposite) { number = -42 ; }
ignore = yes unless name is ‘xguru’ if ( name !== ‘xguru’ ) { ignore = true ; }
square = (x) - x * x square = function(x) { return x * x; };
math = math = {
root: Math.sqrt root: Math.sqrt,
square: square square: square,
cube: (x) - x * square x cube: function(x) { return x * square(x); }
};
cubes = (Math.cube num for num in list ) cubes = (function() {
var _i, _len, _results; results = [];
for (_i = 0,_len = list.length,_i_len,_i++) {
num=list[_i];
_results.push(Math.cube(num));
}
return _results;
})();
287. Responsive Web Design
• http://www.alistapart.com/articles/responsive-web-design/
• Screen Size / Platform / Orientation 에 반응
• CSS3 Media Query , Flexible Grid Layout
• Guideline for R-W-D : http://j.mp/eWEYIJ
Phone Tablet Netbook / Tablet Desktop
332. Hybrid App
• Native + Web
Device OS
Native App /
Hybrid framework
Web Browser
Web Server
• Multi Device
• 서버기반 개발가능
Web Application Web
css/js/html Application
• Device 기능 활용
• 수익모델
• Web 부분의 속도
• 표준화?
333. Hybrid App 의 범위
Native Hybrid Web
Native 내에서 WebView 활용 서버 접속해서 웹앱 실행
Hybrid Frameworks
Appspresso / Phonegap
Titanium
334. Hybrid 개발 방법
• Native + WebView : Native 로 개발하고 특정 부분만 WebView 를 이용
★ iPhone
✓ Javascript 에서 Objective-C 호출 : Custom URL Scheme ( gap:// )
✓ WebView 에 Javascript Injectin : stringByEvaluatingJavascriptFromString()
✓ 모든 Click 을 Hooking : shouldStartLoadWithRequest()
★ Android
✓ WebView 에 자바코드 연결 인터페이스 삽입 : addJavascriptInterface
•★
Appspresso / Phonegap
Web App 을 Native App 으로 패키징
★ Device 기능을 Framework 에서 Javascript 로 확장
•★
Titanium ( Appcelerator )
Web 기술로 작성후 Native App 으로 변환
★ Device 기능을 자체적으로 제공 ( 외관상은 Javascript 형태 )
335. Hybrid Web App
Device OS
• Native App + Web App Hybrid framework
Web Browser
하나의 웹소스로 모든 디바이스 동시지원
Web Application
Web 으로는 불가능한 Device 기능 지원 css/js/html
앱 스토어를 통한 앱 판매 가능
• Hybrid Frameworks
Phonegap
Appspresso
Titanium Mobile
336. Appspresso
• Mobile App Builder by
Hybrid Web App 개발 플랫폼 : iOS , Android ..
Device API : WAC API ( Waikiki ) 지원
Powered By
원 클릭으로 iOS Android 앱 빌드
Native Plugin 추가 가능 : Plugin Development Kit
• HTML5 Web App
Touch UI : Sencha , jQueryMobile , JoApp 연동
JJ - 내장 Javascript MVC Framework ( Ruby On Rails 와 유사 )
346. 생성합니다.
http://sencha.com
Win/Mac 에서 개발가능
Touch UI Framework 지원
Android / iOS App 으로 Build
347. Web Tech 2011
• HTML5 관련 기술의 사용이 증대
• Device 가 더욱 세분화 ➠ Web App 의 필요성 증가
• Javascript 관련 기술이 Hot !
• Responsive Web Design
• 다양한 Web App Store 의 등장 및 성장
• Device API 적용 디바이스의 출현
• Hybrid 방식 개발 수요 증가
• Hybrid Web App 개발툴의 성장