미리보는 대규모 자바스크립트
어플리케이션 개발
ES6, TypeScript, Angular2, Ionic2
(주)한빛소프트 포털서비스실
서비스개발팀 UI파트
김수호
자바스크립트는..
브랜든아이크가 만들고..
모카라는 이름으로..
나중에는 라이브스크립트로..
그러다 자바스크립트로..
ECMAScript 의 발전 과정
1996.03
넷스케이프
자바스크립트
1996.08
Microsoft IE 3.0
JScript
1996.11
ECMA-262
1997.06
ECMAScript 초판
1998.06
EC...
ES6
1996.03
넷스케이프
자바스크립트
1996.08
Microsoft IE 3.0
JScript
1996.11
ECMA-262
1997.06
ECMAScript 초판
1998.06
ECMAScript 2판
199...
당신이 알고 있는
자바스크립트는?
1999년 12월에 나온
ECMAScript 3판일 가능성
99%
아님말고..
ES5 Specification ( 2011.06 )
Object.create
Object.defineProperty
Object.defineProperties
Object.getPrototypeOf
Object.key...
Object.create
var obj = Object.create(Object.prototype, {
foo : {
value: 'bar', //초기화
writable: false, //읽기만 가능(값 재할당 불가)
...
Date.now
var date_old_stx = new Date().getTime();
var date_new_stx = Date.now();
Array.prototype.some
var arr = [2, 4, 9, 10, 11];
arr.some(function(element, index, array){
return element > 10; //true
});
ES5 스펙은,
모던 브라우저에서
95 ~ 100% 구현되어 있다.
모던 브라우저 >= IE9
오늘 주제의 기저는
2015년 6월에 공표된
ES5 의 다음 버전인 ES6
ES7도..
ES6 Specification ( 2015.06 )
Modules
Classes
Arrow functions
Default parameters
Destructuring
Spread and rest
Let and con...
Arrow Function
function PersonOldStx(){
this.age = 0;
var self = this;
setInterval(function(){
self.age++;
}, 1000)
}
func...
Class
class CustomDate extends Date {
constructor() {
super();
}
getMonth() {
var MONTHS = [
'1월','2월','3월','4월','5월','6월'...
Promise
(function(){
"use strict";
function ajax(){
return new Promise((resolve, reject) => {
setTimeout(resolve, 1000);
}...
Object.observe (ES7)
var obj;
(function(){
"use strict";
obj = {
foo : 0,
bar : 1
};
Object.observe(obj, (changes) => {
co...
잠깐!
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
JavaScript
function Greeter(greeting) {
this.greeting = greeting;
}
Greeter.prototype.greet = function() {
return "Hello, ...
Types
function Greeter(greeting: string) {
this.greeting = greeting;
}
Greeter.prototype.greet = function() {
return "Hell...
Class(TypeScript)
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
re...
Class(Plain JavaScript)
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.protot...
Inheritance(TypeScript)
class Animal {
constructor(public name: string) { }
move(meters: number) {
alert(this.name + " mov...
Inheritance(Plain JavaScript)
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnP...
Generics
class Greeter<T> {
greeting: T;
constructor(message: T) {
this.greeting = message;
}
greet() {
return this.greeti...
Module(TypeScript)
module Sayings {
export class Greeter {
greeting: string;
constructor(message: string) {
this.greeting ...
Module(Plain JavaScript)
var Sayings;
(function (Sayings) {
var Greeter = (function () {
function Greeter(message) {
this....
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
• Compr...
Template syntax
<button ng-click="execute()">실행</button>
<button (click)="execute()">실행</button>
<input type="text" ng-mod...
Component
import {bootstrap, Component} from 'angular2/angular2';
@Component({
selector: 'app',
template: '<h1>하드코딩하는사람들</...
불꽃 코딩 시연
자료 만들 시간이 부족했거나 움짤을 만들기 귀찮아서는 절대 아님
Ionic Framework
Ionic 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="@+i...
프레임워크의 사용
더 나은 생산성
동등한 수준의 퀄리티
를 확보할 최소한의 기반
성능은 태생적인 한계로 인해..
그러나 금 손으로 코딩하면 좀 다름
Ionic2 sample
https://github.com/wow9144/IonicV2
API 문서도 없을 때 코드 까서 주석 보면서 한땀 한땀 직접 만들어서
구 시대의 유물 같은 자료라 코드에서 똥냄새가 나도 양해 부...
발표를 마치며..
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발
Nächste SlideShare
Wird geladen in …5
×

[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발

8.674 Aufrufe

Veröffentlicht am

Es6 typescript angular2 ionic2

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

[하코사세미나]미리보는 대규모 자바스크립트 어플리케이션 개발

  1. 1. 미리보는 대규모 자바스크립트 어플리케이션 개발 ES6, TypeScript, Angular2, Ionic2 (주)한빛소프트 포털서비스실 서비스개발팀 UI파트 김수호
  2. 2. 자바스크립트는.. 브랜든아이크가 만들고.. 모카라는 이름으로.. 나중에는 라이브스크립트로.. 그러다 자바스크립트로..
  3. 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. 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. 5. 당신이 알고 있는 자바스크립트는?
  6. 6. 1999년 12월에 나온 ECMAScript 3판일 가능성 99% 아님말고..
  7. 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. 8. Object.create var obj = Object.create(Object.prototype, { foo : { value: 'bar', //초기화 writable: false, //읽기만 가능(값 재할당 불가) configurable: false, //삭제 불가 enumerable: false //열거 불가 } });
  9. 9. Date.now var date_old_stx = new Date().getTime(); var date_new_stx = Date.now();
  10. 10. Array.prototype.some var arr = [2, 4, 9, 10, 11]; arr.some(function(element, index, array){ return element > 10; //true });
  11. 11. ES5 스펙은, 모던 브라우저에서 95 ~ 100% 구현되어 있다. 모던 브라우저 >= IE9
  12. 12. 오늘 주제의 기저는 2015년 6월에 공표된 ES5 의 다음 버전인 ES6 ES7도..
  13. 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. 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. 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. 16. Promise (function(){ "use strict"; function ajax(){ return new Promise((resolve, reject) => { setTimeout(resolve, 1000); }); } ajax().then((result) => { if(!result){ throw new Error('에러'); } }); }());
  17. 17. Object.observe (ES7) var obj; (function(){ "use strict"; obj = { foo : 0, bar : 1 }; Object.observe(obj, (changes) => { console.log(changes) }); }());
  18. 18. 잠깐! ES5도 IE9 이상에서 지원되는 마당에 한국에서 ES6, ES7이 무슨 소용?
  19. 19. TypeScript 가 출동한다면?
  20. 20. TypeScript? TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
  21. 21. Goal Make JavaScript development more productive and enjoyable… especially on large projects.
  22. 22. Static Type vs Dynamic Type
  23. 23. 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]
  24. 24. 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());
  25. 25. 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
  26. 26. 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
  27. 27. 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);
  28. 28. 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);
  29. 29. Generics class Greeter<T> { greeting: T; constructor(message: T) { this.greeting = message; } greet() { return this.greeting; } } var greeter = new Greeter<string>("Hello, world");
  30. 30. 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");
  31. 31. 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");
  32. 32. TypeScript Language Specification https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md
  33. 33. 왜 이리 C#스러워? Java냄새도 나고..
  34. 34. Microsoft 에서 만들었으니깐.
  35. 35. Anders Hejlsberg 가 개발중이니까. C# 수석아키텍트이고 델파이, 터보파스칼을 만든.
  36. 36. 이거 써야하나? 안내킨다. MS라서. 공공의 적 이라서. 비슷한 CoffeeScript도 있고. 구글이 만든 AtScript는?
  37. 37. 구글이 AtScript를 중단하고 TypeScript로 대동단결. Angular2에 TypeScript를 적용. ES5로 Angular2 해도 된다. 근데 구글링하면 뭘로 짠 코드가 나올까?
  38. 38. 진행상황? 시기상조?
  39. 39. 진행상황?
  40. 40. Angular1 개발자가 Angular2를 하지 않을 가능성?
  41. 41. Angular2 Features • Mobile First • Future Ready • Flexible Development • Speed & Performance • Simple & Expressive • Comprehensive Routing • Animations • Hierarchical Dependency Injection • Support for WebComponents • Internationalization(I18N) & Accessibility
  42. 42. 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>
  43. 43. Component import {bootstrap, Component} from 'angular2/angular2'; @Component({ selector: 'app', template: '<h1>하드코딩하는사람들</h1>' }) class AppComponent { } bootstrap(AppComponent);
  44. 44. 불꽃 코딩 시연 자료 만들 시간이 부족했거나 움짤을 만들기 귀찮아서는 절대 아님
  45. 45. Ionic Framework Ionic is the beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.
  46. 46. 하이브리드앱 VS 네이티브앱 . . 생산성 완성도 .
  47. 47. 웹뷰를 알아?
  48. 48. <?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");
  49. 49. 프레임워크의 사용 더 나은 생산성 동등한 수준의 퀄리티 를 확보할 최소한의 기반 성능은 태생적인 한계로 인해.. 그러나 금 손으로 코딩하면 좀 다름
  50. 50. Ionic2 sample https://github.com/wow9144/IonicV2 API 문서도 없을 때 코드 까서 주석 보면서 한땀 한땀 직접 만들어서 구 시대의 유물 같은 자료라 코드에서 똥냄새가 나도 양해 부탁드립니다.
  51. 51. 발표를 마치며..

×