Es6 typescript angular2 ionic2

1. 미리보는 대규모 자바스크립트
어플리케이션 개발
ES6, TypeScript, Angular2, Ionic2
(주)한빛소프트 포털서비스실
서비스개발팀 UI파트
김수호

2. 자바스크립트는..
브랜든아이크가 만들고..
모카라는 이름으로..
나중에는 라이브스크립트로..
그러다 자바스크립트로..

3. ECMAScript 의 발전 과정
1996.03
넷스케이프
자바스크립트
1996.08
Microsoft IE 3.0
JScript
1996.11
ECMA-262
1997.06
ECMAScript 초판
1998.06
ECMAScript 2판
1999.12
ECMAScript 3판
2009.12
ECMAScript 5판
2011.06
ECMAScript 5.1판
2015.06
ECMAScript 6판

4. ES6
1996.03
넷스케이프
자바스크립트
1996.08
Microsoft IE 3.0
JScript
1996.11
ECMA-262
1997.06
ECMAScript 초판
1998.06
ECMAScript 2판
1999.12
ECMAScript 3판
2009.12
ECMAScript 5판
2011.06
ECMAScript 5.1판
2015.06
ECMAScript 6판
ES6, ES2015, Harmony, ECMA6….
다양한 이름으로 불림

5. 당신이 알고 있는
자바스크립트는?

6. 1999년 12월에 나온
ECMAScript 3판일 가능성
99%
아님말고..

7. ES5 Specification ( 2011.06 )
Object.create
Object.defineProperty
Object.defineProperties
Object.getPrototypeOf
Object.keys
Object.seal
Object.freeze
Object.preventExtensions
Object.isSealed
Object.isFrozen
Object.isExtensible
Object.getOwnPropertyDescriptor
Object.getOwnPropertyNames
Date.prototype.toISOString
Date.now
Date.prototype.toJSON
Date.parse on invalid dates
Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight

8. Object.create
var obj = Object.create(Object.prototype, {
foo : {
value: 'bar', //초기화
writable: false, //읽기만 가능(값 재할당 불가)
configurable: false, //삭제 불가
enumerable: false //열거 불가
}
});

9. Date.now
var date_old_stx = new Date().getTime();
var date_new_stx = Date.now();

10. Array.prototype.some
var arr = [2, 4, 9, 10, 11];
arr.some(function(element, index, array){
return element > 10; //true
});

11. ES5 스펙은,
모던 브라우저에서
95 ~ 100% 구현되어 있다.
모던 브라우저 >= IE9

12. 오늘 주제의 기저는
2015년 6월에 공표된
ES5 의 다음 버전인 ES6
ES7도..

13. ES6 Specification ( 2015.06 )
Modules
Classes
Arrow functions
Default parameters
Destructuring
Spread and rest
Let and const
for ... of
Object literal methods
Shorthand properties
Computed properties
Octal / binary literals
Symbols
Template strings
Generators
Decorators
async /await

14. Arrow Function
function PersonOldStx(){
this.age = 0;
var self = this;
setInterval(function(){
self.age++;
}, 1000)
}
function PersonNewStx(){
this.age = 0;
setInterval(()=>{
this.age++
}, 1000);
}

15. Class
class CustomDate extends Date {
constructor() {
super();
}
getMonth() {
var MONTHS = [
'1월','2월','3월','4월','5월','6월','7월',
'8월','9월','10월','11월','12월’
];
return MONTHS[super.getMonth()];
}
}

16. Promise
(function(){
"use strict";
function ajax(){
return new Promise((resolve, reject) => {
setTimeout(resolve, 1000);
});
}
ajax().then((result) => {
if(!result){
throw new Error('에러');
}
});
}());

17. Object.observe (ES7)
var obj;
(function(){
"use strict";
obj = {
foo : 0,
bar : 1
};
Object.observe(obj, (changes) => {
console.log(changes)
});
}());

18. 잠깐!
ES5도 IE9 이상에서 지원되는 마당에
한국에서 ES6, ES7이 무슨 소용?

19. TypeScript 가 출동한다면?

20. TypeScript?
TypeScript is
a typed superset of JavaScript
that compiles to plain JavaScript.

22. Goal
Make JavaScript development
more productive and enjoyable…
especially on large projects.

23. Static Type vs Dynamic Type

25. JavaScript
function Greeter(greeting) {
this.greeting = greeting;
}
Greeter.prototype.greet = function() {
return "Hello, " + this.greeting;
}
var greeter = new Greeter({message: "world"});
console.log(greeter.greet()); //Hello, [object Object]

26. Types
function Greeter(greeting: string) {
this.greeting = greeting;
}
Greeter.prototype.greet = function() {
return "Hello, " + this.greeting;
}
var greeter = new Greeter("world");
console.log(greeter.greet());

27. Class(TypeScript)
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
var greeter = new Greeter("world");
console.log(greeter.greet());
변환
Greeter.js
ES3 or ES5

28. Class(Plain JavaScript)
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
return Greeter;
})();
var greeter = new Greeter("world");
console.log(greeter.greet());
변환Greeter.ts

29. Inheritance(TypeScript)
class Animal {
constructor(public name: string) { }
move(meters: number) {
alert(this.name + " moved " + meters + "m.");
}
}
class Snake extends Animal {
constructor(name: string) { super(name); }
move() {
alert("Slithering...");
super.move(5);
}
}
class Horse extends Animal {
constructor(name: string) { super(name); }
move() {
alert("Galloping...");
super.move(45);
}
}
var sam = new Snake("Sammy the Python");
var tom: Animal = new Horse("Tommy the
Palomino");
sam.move();
tom.move(34);

30. Inheritance(Plain JavaScript)
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) :
(__.prototype = b.prototype, new __());
};
var Animal = (function () {
function Animal(name) {
this.name = name;
}
Animal.prototype.move = function (meters) {
alert(this.name + " moved " + meters + "m.");
};
return Animal;
})();
var Snake = (function (_super) {
__extends(Snake, _super);
function Snake(name) {
_super.call(this, name);
}
Snake.prototype.move = function () {
alert("Slithering...");
_super.prototype.move.call(this, 5);
};
return Snake;
})(Animal);
var Horse = (function (_super) {
//생략
return Horse;
})(Animal);
var sam = new Snake("Sammy the Python");
var tom = new Horse("Tommy the Palomino");
sam.move();
tom.move(34);

31. Generics
class Greeter<T> {
greeting: T;
constructor(message: T) {
this.greeting = message;
}
greet() {
return this.greeting;
}
}
var greeter = new Greeter<string>("Hello, world");

32. Module(TypeScript)
module Sayings {
export class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
}
var greeter = new Sayings.Greeter("world");

33. Module(Plain JavaScript)
var Sayings;
(function (Sayings) {
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
return Greeter;
})();
Sayings.Greeter = Greeter;
})(Sayings || (Sayings = {}));
var greeter = new Sayings.Greeter("world");

34. TypeScript Language Specification
https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md

35. 왜 이리 C#스러워?
Java냄새도 나고..

36. Microsoft 에서 만들었으니깐.

37. Anders Hejlsberg 가 개발중이니까.
C# 수석아키텍트이고
델파이, 터보파스칼을 만든.

38. 이거 써야하나?
안내킨다.
MS라서.
공공의 적 이라서.
비슷한 CoffeeScript도 있고.
구글이 만든 AtScript는?

39. 구글이 AtScript를 중단하고
TypeScript로 대동단결.
Angular2에 TypeScript를 적용.
ES5로 Angular2 해도 된다.
근데 구글링하면 뭘로 짠 코드가 나올까?

40. 진행상황?
시기상조?

43. 진행상황?

44. Angular1 개발자가
Angular2를 하지 않을 가능성?

45. Angular2 Features
• Mobile First
• Future Ready
• Flexible Development
• Speed & Performance
• Simple & Expressive
• Comprehensive Routing
• Animations
• Hierarchical Dependency Injection
• Support for WebComponents
• Internationalization(I18N) & Accessibility

46. Template syntax
<button ng-click="execute()">실행</button>
<button (click)="execute()">실행</button>
<input type="text" ng-model="model.name" />
<input type="text" ([ng-model)]="model.name" />
<li ng-repeat="user in users">{{user.name}}</li>
<li *ng-for="#user of users">{{user.name}}</li>

47. Component
import {bootstrap, Component} from 'angular2/angular2';
@Component({
selector: 'app',
template: '<h1>하드코딩하는사람들</h1>'
})
class AppComponent {
}
bootstrap(AppComponent);

48. 불꽃 코딩 시연
자료 만들 시간이 부족했거나 움짤을 만들기 귀찮아서는 절대 아님

49. Ionic Framework
Ionic is the beautiful,
open source front-end
SDK for developing
hybrid mobile apps with
web technologies.

50. 하이브리드앱 VS 네이티브앱
.
.
생산성
완성도
.

51. 웹뷰를 알아?

52. <?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");

54. 프레임워크의 사용
더 나은 생산성
동등한 수준의 퀄리티
를 확보할 최소한의 기반
성능은 태생적인 한계로 인해..
그러나 금 손으로 코딩하면 좀 다름

56. Ionic2 sample
https://github.com/wow9144/IonicV2
API 문서도 없을 때 코드 까서 주석 보면서 한땀 한땀 직접 만들어서
구 시대의 유물 같은 자료라 코드에서 똥냄새가 나도 양해 부탁드립니다.

57. 발표를 마치며..