미리보는 대규모 자바스크립트 어플리케이션 개발

ES6, TypeScript, Angular2, Ionic2

( 주 ) 한빛소프트 포털서비스실 서비스개발팀 UI 파트

김수호

자바스크립트는 ..브랜든아이크가 만들고 ..

모카라는 이름으로 ..

나중에는 라이브스크립트로 ..

그러다 자바스크립트로 ..

ECMAScript 의 발전 과정1996.03넷스케이프 자바스크립트

1996.08Microsoft IE 3.0JScript

1996.11ECMA-262

1997.06ECMAScript 초판

1998.06ECMAScript 2 판

1999.12ECMAScript 3 판

2009.12ECMAScript 5 판

2011.06ECMAScript 5.1 판

2015.06ECMAScript 6 판

ES61996.03넷스케이프 자바스크립트

1996.08Microsoft IE 3.0JScript

1996.11ECMA-262

1997.06ECMAScript 초판

1998.06ECMAScript 2 판

1999.12ECMAScript 3 판

2009.12ECMAScript 5 판

2011.06ECMAScript 5.1 판

2015.06ECMAScript 6 판

ES6, ES2015, Harmony, ECMA6….다양한 이름으로 불림

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

1999 년 12 월에 나온 ECMAScript 3 판일 가능성

99%

아님말고 ..

ES5 Specification ( 2011.06 )Object.createObject.definePropertyObject.definePropertiesObject.getPrototypeOfObject.keysObject.sealObject.freezeObject.preventExtensionsObject.isSealedObject.isFrozenObject.isExtensibleObject.getOwnPropertyDescriptorObject.getOwnPropertyNames

Date.prototype.toISOStringDate.nowDate.prototype.toJSONDate.parse on invalid dates

Array.prototype.indexOfArray.prototype.lastIndexOfArray.prototype.everyArray.prototype.someArray.prototype.forEachArray.prototype.mapArray.prototype.filterArray.prototype.reduceArray.prototype.reduceRight

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

Date.now

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

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

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

모던 브라우저 >= IE9

오늘 주제의 기저는2015 년 6 월에 공표된

ES5 의 다음 버전인 ES6ES7 도 ..

ES6 Specification ( 2015.06 )ModulesClassesArrow functionsDefault parametersDestructuringSpread and restLet and constfor ... of

Object literal methodsShorthand propertiesComputed propertiesOctal / binary literalsSymbolsTemplate stringsGeneratorsDecoratorsasync /await

Arrow Functionfunction PersonOldStx(){ this.age = 0; var self = this; setInterval(function(){ self.age++; }, 1000)}

function PersonNewStx(){ this.age = 0;

setInterval(()=>{ this.age++ }, 1000);}

Classclass CustomDate extends Date { constructor() { super(); } getMonth() { var MONTHS = [

'1 월 ','2 월 ','3 월 ','4 월 ','5 월 ','6 월 ','7 월 ','8 월 ','9 월 ','10 월 ','11 월 ','12 월’

]; return MONTHS[super.getMonth()]; }}

Promise(function(){ "use strict"; function ajax(){ return new Promise((resolve, reject) => { setTimeout(resolve, 1000); }); }

ajax().then((result) => { if(!result){ throw new Error(' 에러 '); } });}());

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

잠깐 !

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

TypeScript 가 출동한다면 ?

TypeScript?

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

Goal

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

Static Type vs Dynamic Type

JavaScriptfunction 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]

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

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

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

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);

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);

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

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");

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");

TypeScript Language Specification

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

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

Microsoft 에서 만들었으니깐 .

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

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

구글이 AtScript 를 중단하고 TypeScript 로 대동단결 .

Angular2 에 TypeScript 를 적용 .ES5 로 Angular2 해도 된다 . 근데 구글링하면 뭘로 짠 코드가 나올까 ?

진행상황 ?시기상조 ?

진행상황 ?

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

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

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>

Componentimport {bootstrap, Component} from 'angular2/angular2';

@Component({ selector: 'app', template: '<h1> 하드코딩하는사람들 </h1>'})class AppComponent {

}bootstrap(AppComponent);

불꽃 코딩 시연

자료 만들 시간이 부족했거나 움짤을 만들기 귀찮아서는 절대 아님

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

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

웹뷰를 알아 ?

<?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");

프레임워크의 사용더 나은 생산성동등한 수준의 퀄리티를 확보할 최소한의 기반

성능은 태생적인 한계로 인해 .. 그러나 금 손으로 코딩하면 좀 다름

Ionic2 sample

https://github.com/wow9144/IonicV2

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

발표를 마치며 ..