웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
33 likes4,878 views
KTH H3 컨퍼런스 2011 웹 소프트웨어 시장의 새로운 롤, 자바스크립트 발표 자료입니다.
웹 소프트웨어 시대의 새로운 롤(role) 모델, 자바스크립트
- 1. 웹소프트웨어시대의새로운롤모델 자바스크립트 김양원/@rhiokim 웹애플리케이션팀 tizie@kthcorp.com
- 3. 1994~2008
- 5. 자바애플릿
- 7. 그런데 생명은커녕웹을작살내버렸다. 툭하면에러를내뱉는웹 브라우저를다운시키는주요원인 http://bellavita.tistory.com/51
- 8. 마우스에게생명을... 생명을불어넣겠다는목적은 온데간데없고 “마우스를따라다니는시계”를 구현하는데쓰임 그래도멋있어가져다쓰자 자바스크립트의CopyPaste부흥기 머~어~ 생며엉~? http://www.zoc.kr/977
- 9. 수년이흐르고 자바스크립트는웹시장에서 귀찮은존재 프로그래밍언어로의가치도 잃어감 표준화단체에서도방치 Shockwave는Adobe에인수 Flash를기반으로리치웹의절대강자로군림 JavaScript
- 11. Ajax와Web2.0을만났고 웹개발방식의패러다임이빠르게변화 자바스크립트의관심이증가 jQuery,Ext.js,Prototype.js와같은 유용한도구들이출시 자바스크립트는새로운분위기맞이하게됨
- 12. HTML5를만나고 네트워킹프로그래밍,3D그래픽, 데이터베이스,멀티쓰레드등등다됨 이것들은기존의데스크탑경험을웹으로 모두옮겨올수있는플랫폼으로발전 과거보다더많은자바스크립트 라이브러리,프레임워크들이출시 관심도는극에달함
- 13. 모바일로확산 순식간에스마트모바일시장으로확산 PhoneGap,Appspresso,Titanium 모바일앱시장도자바스크립트의놀이터 2010년필수프로그래밍언어로추대받기시작 이제더이상자바스크립트를거부할수없음
- 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
- 19. 자바스크립트의역사와Ӥ기술동향
- 20. Ӥ화역사 FirstEdition 1997 SecondEdition 1998 ThirdEdition 1999 현재의자바스크립트 ForthEdition 2008 중단 FifthEdition 2009,2011 Harmony(sixth) progress 2013년목표
- 21. 왜중단? 10년여동안뭘했길레중단? 의자에앉아서언어디자인만해왔다. 기존의자바스크립트는완전무시한채말도 안되는스펙을책정(묻지마책정) 느네들 정말 이렇게 할꺼니? 이러면 나 안한다~
- 22. 워킹그룹(հ39)ѫ 기존자바스크립트를 VS 발전시켜야한다. ES4를밀어부쳐야한다. Yahoo! Mozilla Microsoft Adobe etc ect
- 23. 차세대자바스크립트의목표 복잡한방식을해소하고좀더나은코드작성을위한언어로발전 복잡한대규모애플리케이션 그런애플리케이션을통해공유되는라이브러리 새로운버젼을위한코드제너레이터 ES5가정의된인터프리터에서많은테스트후사양으로책정 플랫폼에중립적인아키텍처를유지,향상시키며표준을책정 가능한기존버젼을유지하고간단하고도간결하게진행 정적인검증과객체의보안기능들을제공
- 24. 표준화의흐름 ES Harmony CommonJS ES6
- 26. 트랜스파일러(հԲ辱) 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. ҴǴDz’sٲٳԲܲ
- 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. dzDzԴ구현체 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/
- 44. 서버아키텍쳐의변환점 1세대 Perl기반 2세대 High-endUnix머신을기반으로한Java 3세대 클라우드를기반으로한PHP,Ruby,Python 4세대 서버측자바스크립트
- 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/
- 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
- 56. 당신의집ѫ보자. 설계자:일본인 인테리어:한국인 건축가:프랑스인
- 57. 당신의집ѫ보자. こんにちは。 머라는거여~어~? 고만노닥거리고일하라고~~ Nice,devous répondre.
- 58. 모든것이나의룰 client: JavaScript Mobile:JavaScript Server:JavaScript
- 59. @rhiokim rhio.kim@gmail.com 질문은메일이나트위터로언제든지해주세요.