웹과 모바일 개발 혁명_HTML5 Part II_20110526

 2011년 5월 26일 누리꿈스퀘어에서 있었던 15회 SW 공학 Technical 세미나 1부 요약입니다.
 강사는 유명한 KTH 권정혁 팀장님(xguru@twitter.com) 이셨는데, 직접 보고 세미나를 들은것은 처음이었습니다. 웹과 모바일 생태계를 변화 과정에 해박한 지식을 가진 강사의 직접 겪은 경험담을 들을 수 있을 수 있어서, 그동안 눈으로 문서로만 보던 것보다는 확실히 이해가 잘 되었습니다.

 - HTML5 ?
HTML5 ~= HTML + CSS + Javascript API
Web 에서 Desktop 수준의  App 구현 -> Web App

- Web App ?
. 웹 브라우저에서 실행
. Reading -> Interaction with Audio/Video/Animation
. 데스크탑 소프트웨어 수준의 사용자 경험
. 서버에서 제공되므로 신속한 업데이트(?)
. 다양한 디바이스 동시 지원 가능(->모바일)

- HTML5 가 모바일에 중요한가?
각 모바일 플랫폼용 네이티브 앱을 모두 만들기 어렵다.

- HTML5 스펙
. HTML5 스펙 : http://clearboth.org/html5/spec.html
. HTML5 Spec 한글화 커뮤니티 : http://clearboth.org
. 웹 개발자를 위한 HTML5 스펙 : http://developers.whatwg.org/

- HTML5 적용
. HTML5shiv : HTML5 IE enabling script(by Remy Sharp. 2009). html5 를 지원하지 않는 IE 에서 지원할 수 있도록 함.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
 _ Jonh Resig 의 제안 :   http://ejohn.org/blog/html5-shiv/, IE6 까지 지원

. Mordernizr : http://www.modernizr.com. 2010
 _ HTML5Shiv 기능을 포함하여 CSS3 까지 더 폭넓은 지원
 _ Modernizr 객체를 생성하여 HTML5, CSS3 기능이 지원되는지 검사

- HTML5 Boilerplate : http://html5boilerplate.com/
. 최적화에 도움이 되는 권고사항 게재
. 즉시 사용가능한 HTML5 기본양식
. 참고할만한 snippet 포함(다운로드)

- HTML5 Initializer
. http://initializr.com
. HTML5 템플릿 생성
. HTML5 Boilerplate 에 기반
.  jQuery
. Modernizer / HTML5shiv
. 서버 설정 파일

- HTML5 Video & Audio
. 20종의 HTML5 Video Player : http://praegnanz.de/html5video  
. Video.js : http://videojs.com/
. Audio.js : http://kolber.github.com/audiojs/, OpenSource(MIT)

- Javascript
. Javascript library for Mobile
. UI Frameworks
. Application Frameworks
. Server-side javascript
. Language that compilers to JS

- Javascript for Mobile
. Zepto.js - http://zeptojs.com
 _ Mobile 만을 위한 자바스크립트 라이브러리(Mobile WebKit 최적화)
 _ jQuery 와 유사한 문법 제공. jQuery(26.7 K), Zepto.js(2.3K)
 _ 오픈소스(MIT License)

- UI Library for Touch Devices
: Web UI 는 Touch 와 친화적이 않다.
. jQTouch : http://jqtouch.com
. jQueryMobile : http://jquerymobile.com
. Sencha Touch : http://sencha.com
. DHTMLX Touch : http://dhmlx.com/touch/ 
. jo : http://joapp.com
. wink : http://winktoolkit.org
. cross plaform 지원 프레임웍들 증가
. GUI designer : 화면 설정을 GUI 로 가능하게. DHTMLX(alpha), Sencha(2011 Q2)

- Javascript Application Frameworks
. 데스크탑 수준의 Web application 작성
 _ Sproutecore : Cocoa for Web.  http://sproutcore.com
 _ Cappuccino : Objective-J. http://cappuccino.org
 _ Qooxdoo : http://qooxdoo.org

. Javascript 기반 Web Framework
 _ JavascriptMVC : http://javascriptmvc.com
 _ Rails-Like Framework for mobile App : http://37signals.com
 _ JJ : Javascript App Framework. KTH.

- Server-side Javascript
. Netscape Livewire 를 시작으로 다양한 접근
. 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 javascirpt outside the browser. http://nodejs.org
 _ 브라우저가 아닌 서버/데스크탑 어플을 작성하기 위한 스펙들
 _ Server-side, Command Line, Desktop GUI, Hybrid (Titanium ..)
 _ 모듈 시스템, 파일시스템, 유닛테스팅, 콘솔, Promise...
 
- Javascript 로 컴파일 되는 언어들
. List of Languanges that compile to JS : https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS 

- Responsive Web Design
. http://www.alistapart.com/articles/responsive-web-design/ 
. Screen size / Platform / Orientation 에 반응
. CSS3 Media Query, Flexbile Grid & Layout
. Guideline for Responsive Web Design :  http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ 
. Collection of responsive web designs : http://mediaqueri.es/ 

- 다양한 Web Store : Chrome Web Store, Mozilla Web App Store, GetJar
- Device API
 . WAC(Wholesale Application Community) : 40개 이상의 통신사/제조사 협의체
 . WAC Enabled Device 의 증가
 . Device 기능을 활용한 Web App 들 증가

- Native App
. 뛰어난 성능 / 게임
. 훌륭한 UX
. 디바이스 모든 기능 활용
. 수익모델(판매/광고)
. 개발이 어렵다 / 비싸다
. 크로스 플랫폼?

- Web App
. HTML5, CSS, JS
. 서버기반 & Offline
. Multi Device
. 속도?
. 디바이스 기능 활용?
. 판매?

- Hybrid App
. Native + Web
. Multi Device
. 서버기반 개발가능
. Device 기능 활용
. 수익모델
. Web 부분의 속도?
. 표준화?
 
- Hybrid 개발 방법
. Native + WebView : native 로 개발하고 특정 부분만 WebView 를 이용
 * iPhone
  _ Javascript 에서 Objective-C 호출
  _ WebView 에 Javascript Injection : stringByEvaluatingJavascriptFromString()
  _ 모든 click 을 Hooking : shouldStartLoadWithRequest() 
 * Android
  _ WebView 에 자바코드 연결 인터페이스 삽입 : addJavascriptInterface
. Appspresso / Phonegap
 _ Web App 을 Native App 으로 패키징
 _ device 기능을 framework 에서 javascript 로 확장

. Titanium(appcelerator)
 _ Web 기술로 작성후 Native App 으로 변환
 _ Device 기능을 자체적으로 제공(외관상 javascript 형태)

- Hybrid Web App
. Native App + Web App
 _ 하나의 웹소스로 모든 디바이스 동시지원
 _ Web 으로는 불가능한 Device 기능 지원
 _ 앱 스토어를 통한 앱 판매 가능

- Hybrid Frameworks
. Phonegap
. Appspresoo
.Titanium Mobile

- Appspresso
. Mobile App Builder by kth
 _ Hybrid Web App 개발 플랫폼 : iOS, Android
 _ Device API : WAC API(waikiki) 지원
 _ one click 으로 iOS & Android 앱 빌드
 _ Native Plugin 추가 기능 : Plugin Development Kit

. HTML5 Web App
 _ Touch UI : Sencha, jQueyMobile, JoApp 연동
 _ 내장 Javascript MVC Framework

 - Web Tech 2011
. HTML5 관련 기술의 사용이 증대
. Device 가 더욱 세분화 -> Web App 의 필요성 증가
. Javascript 관련 기술이 Hot
. Responsive Web Design
. 다양한 Web App Strore 의 등장 및 성장
. Device API 적용 디바이스의 출현
. Hybrid 방식 개발 수용 증가
. Hybrid Web App 개발툴의 성장