KTH H3 컨퍼런스 2011 웹 소프트웨어 시장의 새로운 롤, 자바스크립트 발표 자료입니다.

1. 웹소프트웨어시대의새로운롤모델
자바스크립트
김양원/@rhiokim
웹애플리케이션팀
tizie@kthcorp.com

2. functionhello_I_am(){
return{
twitter:@rhiokim,
github:rhiokim,
blog:rhio.tistory.com,
playground:frends.kr
}
}
hello_I_am();

3. 1994~2008

4. 원래는...
정적인웹에
생명을넣어보자.

5. 자바애플릿

6. BrendanEich,MozillaCTO

7. 그런데
생명은커녕웹을작살내버렸다.
툭하면에러를내뱉는웹
브라우저를다운시키는주요원인
http://bellavita.tistory.com/51

8. 마우스에게생명을...
생명을불어넣겠다는목적은
온데간데없고
“마우스를따라다니는시계”를
구현하는데쓰임
그래도멋있어가져다쓰자
자바스크립트의CopyPaste부흥기
머~어~ 생며엉~?
http://www.zoc.kr/977

9. 수년이흐르고
자바스크립트는웹시장에서
귀찮은존재
프로그래밍언어로의가치도
잃어감
표준화단체에서도방치
Shockwave는Adobe에인수
Flash를기반으로리치웹의절대강자로군림
JavaScript

10. 자바스크립트가심상치않은데.
http://www.seattleks.com/files/attach/images/4303/611/005/e3f1d2c2980ad1179430481dcd47291e.jpg

11. Ajax와Web2.0을만났고
웹개발방식의패러다임이빠르게변화
자바스크립트의관심이증가
jQuery,Ext.js,Prototype.js와같은
유용한도구들이출시
자바스크립트는새로운분위기맞이하게됨

12. HTML5를만나고
네트워킹프로그래밍,3D그래픽,
데이터베이스,멀티쓰레드등등다됨
이것들은기존의데스크탑경험을웹으로
모두옮겨올수있는플랫폼으로발전
과거보다더많은자바스크립트
라이브러리,프레임워크들이출시
관심도는극에달함

13. 모바일로확산
순식간에스마트모바일시장으로확산
PhoneGap,Appspresso,Titanium
모바일앱시장도자바스크립트의놀이터
2010년필수프로그래밍언어로추대받기시작
이제더이상자바스크립트를거부할수없음

14. 서버
거부할것만같았던서버마저...
Node.js,RingoJS등등...

15. Corona
PhoneGap chrome
POSIX unix
os
iPad iPhone
HPWeb
Android os
window
server
Tatanium linux
Appspresso Mobile
Arduino
JavaScript
safari
Robot
chrome
industry
embed browser
firefox
Screen
car Kiosk DBMS
home IE opera
3D
STB
Graphic
Cleaner TV
Cleaner Thread Network
ATM

16. 웹기술의진화속도는
초속53,042,034cm
http://justice1977.tistory.com/991

17. med.js tinyJSdefer.js Bean.js Kizzy
Backbone.jsLAB.js
Classy html-minify
functools UgliyJS Easel.js
d3.js arguments.
LazyLoadDojo Raphael
d.js
Broad eventEmitter Jo
Qunit Processing.js
Underscore
typeface.js JSGI
marked Janis JSSpec
Shifty.js Boostrap Events.js DragDrop.js
Narwhal AMD Zepto Milk.js
RingoJS Date.js
Ext.js Objs CoffeeScript
store.js uuid.js $dom.js
아~손아프다.
LocalStoragetimed.js DartLang SproutCore
hsi.js Browser.js
loader.js JavaScript++
highChartAppengineJS
Canvas slang.js
Appspresso molt.js
Jaml.js
extend.js
cssFx
PhoneGap Require.js
Vine
Mootools Hyber.js WebWorker
Socket.io ModernizrShinyCar.js
CommonJS
microcache.js
Three.js WebSocket Titanium Node.js
W.js
Snack.js include.js
Satisfy
WebGL system.js jQueryMobile Sencha.io
my.class.js

18. 딱2가지만알고가자
차세대자바스크립트동향
서버사이드자바스크립트

19. 자바스크립트의역사와표준기술동향

20. 표준화역사
FirstEdition 1997
SecondEdition 1998
ThirdEdition 1999 현재의자바스크립트
ForthEdition 2008 중단
FifthEdition 2009,2011
Harmony(sixth) progress 2013년목표

21. 왜중단?
10년여동안뭘했길레중단?
의자에앉아서언어디자인만해왔다.
기존의자바스크립트는완전무시한채말도
안되는스펙을책정(묻지마책정)
느네들 정말 이렇게 할꺼니?
이러면 나 안한다~

22. 워킹그룹(TC39)분열
기존자바스크립트를
VS
발전시켜야한다.
ES4를밀어부쳐야한다.
Yahoo! Mozilla
Microsoft Adobe
etc ect

23. 차세대자바스크립트의목표
복잡한방식을해소하고좀더나은코드작성을위한언어로발전
복잡한대규모애플리케이션
그런애플리케이션을통해공유되는라이브러리
새로운버젼을위한코드제너레이터
ES5가정의된인터프리터에서많은테스트후사양으로책정
플랫폼에중립적인아키텍처를유지,향상시키며표준을책정
가능한기존버젼을유지하고간단하고도간결하게진행
정적인검증과객체의보안기능들을제공

24. 표준화의흐름
ES
Harmony
CommonJS ES6

25. CoffeeScriptTranspiler

26. 트랜스파일러(Transpiler)
transfer라는단어와compiler라는용어가합쳐져만들어짐
BrendanEich에의해서최초로소개됨
자바스크립트가새로운형태의문법을파싱하여자바스크립트로
변환시켜자바스크립트엔진이이해할수있도록해주는일종의
라이브러리
CoffeeScript
GoogleTracuer,MozillaNarcissus,
JavaScript++
BrendanEich
http://en.wikipedia.org/wiki/Transcompiler

27. CoffeeScript
2011년3월16일부터소셜코딩사이트
Github에서주시하고있는개발자가가장많은
프로젝트중의하나
RubyonRails3.1부터공식지원
BrendanEich는블로그와JSConf.eu를통해차세대자
바스크립트에큰영향을미친언어로언급하고있습니다.
http://jashkenas.github.com/coffee-script/

28. CoffeeScriptExample
varcube,square;
square=function(x){
returnx*x;
}; square=(x)-x*x
cube=(x)-square(x)*x
cube=function(x){
returnsquare(x)*x;
};
http://jashkenas.github.com/coffee-script/

29. CoffeeScript
Ruby,Python과Haskell에영향을받음
간결함과가독성이향상
배열함축기법,패턴매칭과같은기능이추가
큰성능저하없이짧은코드프로그램작성(자바스크립
트에비해1/3)
서버측자바스크립트에서널리사용되고있음
http://jashkenas.github.com/coffee-script/

30. Google’sDartLanguage

31. DartLang
Dash에서Dart로공식명칭을변경
구글에의해개발되어진웹을위한프로그래밍언어
2011년10월덴마크오르후스에서개최된GOTO컨퍼
런스에서최초공개
웹브라우저내장스크립트언어로자바스크립트를대처
할목적으로만들어짐
http://www.dartlang.org/

32. DartLangExample
intfib(intn){
if(n=1)returnn;
returnfib(n-1)+fib(n-2);
}
main(){
print('fib(20)=${fib(20)}');
}
http://www.dartlang.org/

33. DartLang
기존의자바스크립트는해결할수없는문제가있다.
Dart는대규모프로젝트에도무리없고보안면에서도
더나은설계
“Brightly”라는클라우드기반통합개발환경을
Dart로개발중
Dart를지원하지않는브라우저를위해ES3로
변환하는도구를제공
DartVM을크롬브라우저에통합중
http://www.dartlang.org/

34. StandardModuleSystem
CommonJS

35. CommonJS
브라우저환경을벗어난자바스크립트에코시스템을위한
프로젝트이다.
ServerJS라는이름으로처음2009년
시작하여CommonJS로개명
자바스크립트표준화그룹인
ECMAInternational과는별도의단체이다.
CommonJS도차세대
자바스크립트표준화사양의일부이다.
http://www.commonjs.org/

36. 라이크버튼
Map모듈 모듈 Plugin
oAuth인증
Search모듈
모듈 댓글모듈
Plugin
Google Facebook jQuery
Plugin
loader.js
require.js 메일유효
체크모
MySite
Sencha 주민번호유
Browsers 차트모듈
효성체크모
듈
로그인모듈
그리드모듈
데이터모듈

37. 라이크버튼
Map모듈 모듈 Plugin
oAuth인증
Search모듈
모듈 댓글모듈
Plugin
Google Facebook jQuery
Plugin
Node.js
RingoJS 메일유효
체크모
MySite
Sencha 주민번호유
Server 차트모듈
효성체크모
듈
로그인모듈
그리드모듈
데이터모듈

38. 라이크버튼
Map모듈 모듈 Plugin
oAuth인증
Search모듈
모듈 댓글모듈
Plugin
Google Facebook jQuery
Plugin
Titanium
AdobeAIR 메일유효
체크모
MySite
Sencha 주민번호유
Mobile 차트모듈
효성체크모
듈
로그인모듈
그리드모듈
데이터모듈

39. CommonJSModules
(function(define){
define(function(require,exports){
vardep1=require(“foo”);
vardep2=require(“bar”);
exports.hello=function(){...};
exports.world=function(){...};
});
})(typeofdefine==”function”
?define
:function(factory){factory(require,exports)});
http://www.commonjs.org/

40. ES-HarmonyModules
moduleSafeWidget{
importalertfromWidget;
var_private=“someValue”;
exportvardocument={
write:function(txt){
alert(‘Outofluck,buck’);
},
...
};
}
http://www.commonjs.org/

41. CommonJS구현체
Node.js,Narwhal,RingoJS,JSGI,Helma
jQuery1.7,Dojo,SproutCore
Akshell,JoyentSmartPlatform,v8cgi,JSBuild,
XULJet
Titanium,AdobeAIR
CouchDB,MongoDB
http://www.commonjs.org/

42. 요약
CoffeeScript,CommonJS,Dart는차세대자바스크립
트에가장큰영향을미치고있음
소개하지못한다양한프로젝트들의장점도논의후사양
으로책정할것이다.
제대로된기능들이추가되고있기도하지만사양에서제
외되기도한다.
FirefoxSpiderMonkey와GoogleV8에서프로토타이
핑과사용자기반한테스트도진행중에있다.
2013년완료를목표로열띤논의중이다.
http://www.ecmascript.org/ http://www.ecma-international.org/

43. 서버사이드자바스크립트
서버시장까지잠식해가는자바스크립트그끝은어딜까?

44. 서버아키텍쳐의변환점
1세대 Perl기반
2세대 High-endUnix머신을기반으로한Java
3세대 클라우드를기반으로한PHP,Ruby,Python
4세대 서버측자바스크립트

45. 서버측자바스크립트
서버시스템에서동작하는자바스크립트
Netscape에서는EnterpriseServer2.0에포함된
LiveWire라는서버측자바스크립트를1996년최초로
개발
AptanaJaxerisDead
Node.js,RingoJS,Narwhal,Helma,AppengineJS,
JSGI

46. HTTPServer
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello H3 Conferencen');
}).listen(1337, 127.0.0.1);
console.log('Server running at http://127.0.0.1:1337/');
% node example.js
Server running at http://127.0.0.1:1337/
http://nodejs.org/

47. TCPserver
var net = require('net');
var server = net.createServer(function (socket) {
socket.write(Echo serverrn);
socket.pipe(socket);
});
server.listen(1337, 127.0.0.1);
http://nodejs.org/

48. 노드는손쉽게확장가능한네트워킹프로그램을제공하
기위한목적을둔다.
노드는솔루션이아니다.개발자를위한
환경이고단순한모델이다.
RyanDahl

50. RT@andrwj:“@Rhiokim:드디어윈도우,리눅스,
유닉스,POSIX할것없이서버측자바스크립트유
통시장이열렸습니다.축하합시다:-)Node.js
v0.6.0isreleasedhttp://t.co/FocVJIOh”

51. lastest update create
5000 4652
3978
3812
3750 3444
2700 2674 2782
2500 2092
1981
1749 1782
1342
1250 847
628 726
515 602 555 582
422 436
367 447
388 480
309 323 322 341
228 346
121 93 168 187
22
0
2010-12 2011-02 2011-04 2011-06 2011-08 2011-10

52. RoR
Ruby on Rails
Node.js
2004.12 first commit 2009.02 first commit
11250 11400

53. h3.paran.comwithJavaScript
@andrwj,@fallroot,@rhiokim
client:store.js,uuid.js,jQuery,socket.io-client
server:node.js+socket.io
build:uglify.js,clean-css,html-minify
webserver:nginx
dbms:CouchDB
about:5000PV,concurrency500

54. Rule
모든것들이하나의언어로...

56. 당신의집을지어보자.
설계자:일본인
인테리어:한국인
건축가:프랑스인

57. 당신의집을지어보자.
こんにちは。
머라는거여~어~?
고만노닥거리고일하라고~~ Nice,devous
répondre.

58. 모든것이하나의룰
client:
JavaScript
Mobile:JavaScript Server:JavaScript

59. @rhiokim
rhio.kim@gmail.com
질문은메일이나트위터로언제든지해주세요.