際際滷

際際滷Share a Scribd company logo
JavaScript ,
4讌 誤 伎手鍵
2015.02.15
NHN Technology Services, 蟾覩
Why JavaScript?
= {
企 : 蟾覩
 : NHN Technology Services 襦語螳覦,
襦 : [
れ企 螳る襴 覈覦,
NTS   覃,
れ企 HTML5  伎,
NHN NEXT MOOC 
],
蠍壱  : [
螳 觚襦蠏(http://huns.me),
Facebook 襦語螳覦蠏碁9 伎,
WebApplications.kr ろ
]
};
I am
視 JavaScript
蠏碁企り  蟆 朱
伎る慨
Foursquare + 誤 蟯襴 = 豺蠍磯  誤 蟯襴 弜
MobiPoint
讌 3覈 ろ語.
DataBase(MS-SQL),
Server(Java),
Client(HTML, CSS, JavaScript)
蠏 覓伎   蟆  蟆  蠏 
蠏碁蟆  覲願 伎 .
Full-Stack 覲願
JavaScript 蠏瑚願碓 豢 蠏碁
jQuery襷 朱  蟇 ?
蟆曙  襦 伎  伎蟆 螻
伎  蠍 覈 譴!
  蟲 れ 螻牛 覈一l,
襷 , る 覩酔襯 襷 殊ろ 覈覦殊 襯.
る 覩酔?
 企語, ろ 伎 
覘讌  覈襯伎蟆る
蠏碁 Pinterest.com企手 螳伎殊語.
Plog
Why javaScript?
Why javaScript?
JavaScript 貊襯 bookmark 焔.
bookmark襯 ろ.
企語襯 豢豢.
蟆 覲伎譴.
手.
.
企 朱 譬蟆襷
Bookmarklet 螳覦 覦覯
蠏	 襦	 	 譟郁	 讌讌伎.
願  JavaScript
覓 蟆  蟆伎 蟆伎.
覈覦 
企襴 
焔
一 れ 願碓覃  襷  !!
HTML5 螳 讌企
HTML5 + JavaScript襯 螻給伎 蟆 襷れ企慨!
1谿 JavaScript OOP
2谿 覦ろ襴渚 貊 蠍磯螻 旧 
3谿 AJAX
4谿 Node.js
5谿 JavaScript Game Engine
蟆 ろ磯 蟆一
蠏碁蟆 磯Μ 蟆  貉ろ襷 蠍郁  朱 殊.
蟆 ろ磯 伎牡
Web Push襯 蟲蠍 覓企 れ 蠏 ,
Node.js Socket.io  蠏 豌
讌襷 Node.js リ鍵襯 蠍郁
JavaScript OOP, 襦語 MVC ,
ECMAScript ろ 覿 焔
蟯谿  !
NTS, 襦語螳覦 襯
れ企  螳る襴 覈覦,
NTS   覃,
HTML5  伎,
NHN NEXT MOOC
2螳 AJAX UI 螳覦 覓 讌
覲瑚鴬朱 覦 覯企┨蠍
覺る 企伎
螳 4螳 JavaScript 螳覦 覃伎
jQueryHTML JavaScriptCSS
覲旧° 企ゼ 
願 螻, 蟆 螻.
ろ伎 UI襷  願.
UI 覲旧° 讀螳 螻 貊 覲旧° 讀螳
Why javaScript?
Why javaScript?
轟 覓語 ,
 UI襯 譟一蠍  襷れ伎 語.
UI  覲旧″伎螻 蟲 譴 讌
れ危磯 讌 覩語渚螻 譴 ろ 襴 蟇語企
危 旧,
願 碁蟲.
碁蟲
 覦狩襦 豢豢蟲
jQueryHTML JavaScriptCSS GruntBackbone.js Karma
JasmineSCSS
NPM Bower
螻給
螻給
  企蟆 螻給朱 碁 螳蟆讌.
襭螳 るゴ蟆 讌
襦 , 殊企襴
誤壱襴 語,
 ,
企欧 豌襴 貊覦 譴豌 覓語 焔
語願 螳讌螻  覲語 螻  螻
蠏碁 覲牛伎給蟾?
 蠍一襦 覈 覓語襯 願屋   蟆 螳
蠏碁  讌
襦 觚殊一,
襷蠍 ク,
焔 螻,
覿譟燕 API

襦 るジ UX/UI  伎 襷瑚.
One Source, Multi Platform?
願 蠍郁 襷  覃襯 襷れ
觚殊一 朱  !
?
 蟆 螳    蟆 螳
蟲 所   讌襷,
 郁鍵 企給.
覘    蟆 螳讌襷,
企慨覃   .
  蟆 螳讌襷,
  蟆 .
伎 襷
So, why?
譬螻 螻 譴讌 
譴 蟇 襷るレ伎
2015.02.11
油蠍一
Server Client襯  語企 襷る.
(Isomorphic) JavaScript
NPM(Node Packaged Modules)
觜/ろ ,
貉るЖ殊 ろ ろ襴渚
焔
Node.js襷 る 企 OK!
NPM 覿 襯企れ
Why javaScript?
Why javaScript?
Why javaScript?
螻襯 蠏豪概る れ   讌譴!
蟆 碁レ  螻
ES2015,
atscript,
typescript
語伎 螻襯 一 !
ECMAScript 6 襦 企
殊 企 , (2015) 螻糾 
let + const,
Template String,
Class,
Promise,
Generator,
Modules,
Proxies,
Tail Calls

蠍一ヾ 覲 殊企襴 襯 伎伎
蟯朱 貊  ろ殊 語 譴 螻
ES2015
class Hello {

constructor(name) {
this.name = name;
}

hello() {
return 'Hello ' + this.name + '!';
}

static sayHelloAll() {
return 'Hello everyone!';
}

}
Classes in ES6
function Hello(name) {
this.name = name;
}

Hello.prototype.hello = function hello() {
return 'Hello ' + this.name + '!';
};

Hello.sayHelloAll = function () {
return 'Hello everyone!';
};
蟲蠍 襷り  JavaScript  語
JavaScript螳 螳讌 語企 螻襯 覲伎 蟆 覈
AtScript
@Component()
class MyApp {
server:Server;
@Bind('name') name:string;
@Event('foo') fooFn:Function;

@Inject()
constructor(@parent server:Server) {}

greet():string {}
}
function MyApp() {}

MyApp.properties = {
'server': { is: Server },
'name': { is:string,
annotate: [new Bind('name']},
'fooFn': { is:Function,
annotate:[new Event('foo')]}
}

MyApp.annotate = [
new Component(),
new Inject()
];

MyApp.parameters = [
{is:Server, annotate:[parent]}
];

MyApp.prototype.greet = function() {}
MyApp.prototype.greet.returns = string;
MicroSoft螳 襷 ろ JavaScript 殊
TypeScript襦 燕 貊襯 JavaScript襦 貉危
TypeScript
class Point {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
getDist() {
return Math.sqrt(this.x * this.x +
this.y * this.y);
}
}
var p = new Point(3,4);
var dist = p.getDst();
alert(Hypotenuse is:  + dist);
WebComponent,
Polymer,
React
 + 螳ク
HTML5 蠍一 伎, 蠍 ク  貉危 螳覦 
WebComponent
Custom Elements HTML Imports Templates Shadow DOM
WebComponent
Why javaScript?
!-- Import element --
link rel=import href=google-map.html

!-- Use element --
google-map lat=37.790 long=-122.390/google-map
WebComponent 螳覦  所,  ク蟆!
襷ろ磯Μ    貉危 誤 螻
Polymer
Facebook ろ る 螻糾 UI 螳覦 殊企襴
JSX 讌, 螳 誤壱伎, 觜襯 UI 襷 焔
React.js
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
汲

render: function() {
return (
divSeconds Elapsed: {this.state.secondsElapsed}/div
);
}
});

React.render(Timer /, mountNode);
 覓語襯  襦 .
蟆  覓語襯 螳螳 蟆.
螳螳 蟆 蟆郁骸襯 譟壱.
Composition
React Native,
ServiceWorker API
螻  れ危磯 磯殊♀鍵
Facebook 螻 螻糾   殊
React.js襯 伎伎 JavaScript 貊襦 れ危磯  UI 蟲
Learn Once, Write Everywhere
React Native
ろ殊 蟆 讌 API
 伎 觚殊一  覃 襴 覦  !
ServiceWorker API
Client
ServiceWorker
Server
Not yet, but
伎 轟,  譟郁 襾 覩碁
語螳 一蟇一  蠏
ろ語 郁屋 覓殊 伎 豢 一危一
覩誤 覲企ゼ 詞企 螳豺襯 谿曙 蟆 覈
螳覯殊 覯,
一危 螳 蠍一
IOT(Internet Of Things)
Why javaScript?
http://www.slideshare.net/rlaxogns/ss-41386800
Why javaScript?
Why javaScript?
 蠍磯 蠏碁 殊企襴
JavaScript襦 誤磯磯 3D 蠏碁 蟲 螳
WebGL
  WebGL !
three.js
http://www.credit-agricole.fr/campagnes/epargne/
You can do What you want
with JavaScript
覿譟燕讌襷 襷るレ 襷 豺蟲.
轟 螳 ロ覃  襷 蟇 覲  給.
螳矧.

More Related Content

Why javaScript?