SlideShare uma empresa Scribd logo
1 de 52
Baixar para ler offline
TypeScript или JavaScript на
стероидах
author: {
name: "Сергей Пугачёв",
twitter: "@spugachev",
company: "Microsoft Россия"
};
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
Сегодня я бы хотел
рассказать о
3 продуктах Microsoft…
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
Douglas Adams
(автор «Автор автостопом по галактике»)
I've come up with a set of rules that describe our reactions to technologies:
1. Anything that is in the world when you’re born is normal
and ordinary and is just a natural part of the way the world
works.
2. Anything that's invented between when you’re fifteen
and thirty-five is new and exciting and revolutionary and
you can probably get a career in it.
3. Anything invented after you're thirty-five is against the
natural order of things.
TypeScript
Начинается с JavaScript
Весь JavaScript код является TypeScript кодом
Все JavaScript библиотеки работают с TypeScript
Опциональная статическая типизация, классы, модули
Хорошо подходит для масштабных приложений
Нет Runtime издержек. Статическая типизация исчезает в Runtime
Заканчивается на JavaScript
Компилируется в JavaScript
Запускается в любом браузере и любой ОС
TypeScript
Начинается с JavaScript
Весь JavaScript код является TypeScript кодом
Все JavaScript библиотеки работают с TypeScript
Опциональная статическая типизация, классы, модули
Хорошо подходит для масштабных приложений
Нет Runtime издержек. Статическая типизация исчезает в Runtime
Заканчивается на JavaScript
Компилируется в JavaScript
Запускается в любом браузере и любой ОС
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
Демонстрация: TypeScript
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
2. Подходы к решению всех проблем
1. Что не так с JavaScript?
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
“Никто больше не пишет на JavaScript.
Все пишут на jQuery.”
Скотт Хансельман
1
10
100
1000
2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
Sunspiderrunsperminute(logscale)
Internet Explorer
производительность JavaScript
Закон Этвуда: всё, что может
быть написано на JavaScript, будет
написано на JavaScript.
Web page title
http://www.url.com
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
"JavaScript – это
ассемблер Web’а"
C/C++
LLVM
байткод
JavaScript
Гибкость Производительность
“Think C++”“Think Script”
Простые сайты Сложные приложения, игры
var r = 3 * "10"; // r == 300
var a = new Array();
a.push(10);
var p = {x: 0, y: 0};
p.z = 5;
p["some text"] = 1;
p[1] = 2;
eval("var s = p[1] * a[0]"); // s == 20
var r = 3 * parseInt("10");
var a = new Array(100);
a[0] = 10;
var p = new Point(0, 0, 0);
p.z = 5;
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
Демонстрация: Emscripten
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
Что мы выяснили
1. JavaScript – ассемблер Web’а
2. JavaScript сам по себе мощный язык, на котором можно
писать производительные приложения
3. JavaScript «не идеален» для создания больших проектов
2. Подходы к решению всех проблем
• Компилировать язык в JavaScript
• Создать новую виртуальную
машину вместо JS
2 подхода
var Greeter = (function () {
function Greeter(greeting) {
this.greeting = greeting;
}
Greeter.prototype.greet = function () {
return "<h1>" + this.greeting + "</h1>";
};
return Greeter;
}
)();
var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
document.body.innerHTML = str;
class Greeter {
greeting: string;
constructor(greeting: string) {
this.greeting = greeting;
}
greet() {
return "<h1>"+this.greeting+"</h1>";
}
}
var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
document.body.innerHTML = str;
TypeScript
var Greeter = (function () {
function Greeter(greeting) {
this.greeting = greeting;
}
Greeter.prototype.greet = function () {
return "<h1>" + this.greeting + "</h1>";
};
return Greeter;
}
)();
var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
document.body.innerHTML = str;
class Greeter
constructor: (@greeting) ->
@greet -> return "<h1>" +
this.greeting + "</h1>";
greeter = new Greeter("Hello, world!");
str = greeter.greet()
document.body.innerHTML = str
CoffeeScript
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
3. Язык TypeScript
Типы
function toNumber(numberString: string,
...theArgs: number[]): number {
var num: number = parseFloat(numberString);
return num;
}
Перегрузка
function numberStringSwap(value: number, radix?: number): string;
function numberStringSwap(value: string): number;
function numberStringSwap(value: any, radix: number = 10): any {
if (typeof value === 'string') {
return parseInt(value, radix);
}
else if (typeof value === 'number') {
return String(value);
}
}
Типы
var point: {
x: number;
y: number;
};
point = { x: 0, y: 0 }; // OK
point = { x: 0, y: 0, z: 0 }; // OK
point = { x: 'zero', y: 0 }; // Error
point = { x: 0 }; // Error
Интерфейсы
interface IPoint {
x: number;
y: number;
}
interface IPoint3D extends IPoint {
z: number;
}
var point: IPoint;
var point2: IPoint3D;
Интерфейсы
interface IPoint {
x: number;
y: number;
z?: number;
toGeo(): IPoint;
}
Generics
interface IArray<T> {
map<TU>(callback:
(value: T, index: number, array: IArray<T>)
=> TU, thisArg?: any): Array<TU>;
}
var arrayOfStrings: IArray<string> = ['a', 'b', 'c'];
var arrayOfCharCodes: IArray<number> =
arrayOfStrings.map(
(value: string): number => value.charCodeAt(0));
Классы
class Stateful extends Proxy {
constructor(kwArgs: Object) {
super(kwArgs);
}
get(key: string): any {
var getter: string = '_' + key + 'Getter';
return this[getter] ? this[getter]() :
super.get(key);
}
}
Enums
enum Style {
NONE = 0,
BOLD = 1,
ITALIC = 2,
UNDERLINE = 4,
EMPHASIS = Style.BOLD | Style.ITALIC,
HYPERLINK = Style.BOLD | Style.UNDERLINE
}
Модули
module Shapes {
export class Rectangle {
constructor(
public height: number,
public width: number) {
}
}
}
Сергей Пугачёв
@spugachev

Mais conteúdo relacionado

Mais procurados

С чего начать внедрение Hadoop в компании. Доклад Алексея Еремихина (Badoo).
С чего начать внедрение Hadoop в компании. Доклад Алексея Еремихина (Badoo). С чего начать внедрение Hadoop в компании. Доклад Алексея Еремихина (Badoo).
С чего начать внедрение Hadoop в компании. Доклад Алексея Еремихина (Badoo). Badoo Development
 
Сравнение форматов и библиотек сериализации / Антон Рыжов (Qrator Labs)
Сравнение форматов и библиотек сериализации / Антон Рыжов (Qrator Labs)Сравнение форматов и библиотек сериализации / Антон Рыжов (Qrator Labs)
Сравнение форматов и библиотек сериализации / Антон Рыжов (Qrator Labs)Ontico
 
Цена абстракции, Андрей Аксёнов (Sphinx)
Цена абстракции, Андрей Аксёнов (Sphinx)Цена абстракции, Андрей Аксёнов (Sphinx)
Цена абстракции, Андрей Аксёнов (Sphinx)Ontico
 
Нейронные сети на JS
Нейронные сети на JSНейронные сети на JS
Нейронные сети на JSVsevolod Rodionov
 
Хранение json-документов в Tarantool / Андрей Дроздов (Mail.ru Group)
Хранение json-документов в Tarantool / Андрей Дроздов (Mail.ru Group)Хранение json-документов в Tarantool / Андрей Дроздов (Mail.ru Group)
Хранение json-документов в Tarantool / Андрей Дроздов (Mail.ru Group)Ontico
 
7 убийц производительности WordPress
7 убийц производительности WordPress7 убийц производительности WordPress
7 убийц производительности WordPressKonstantin Kovshenin
 
Как мы сбежали от PostgreSQL или когда реляционная БД не справляется, Куманяе...
Как мы сбежали от PostgreSQL или когда реляционная БД не справляется, Куманяе...Как мы сбежали от PostgreSQL или когда реляционная БД не справляется, Куманяе...
Как мы сбежали от PostgreSQL или когда реляционная БД не справляется, Куманяе...Coub
 
WordPress Cron API
WordPress Cron APIWordPress Cron API
WordPress Cron APIversusbassz
 
Доклад Антона Поварова на Tarantool Meetup. "Tarantool в Badoo: хранение исто...
Доклад Антона Поварова на Tarantool Meetup. "Tarantool в Badoo: хранение исто...Доклад Антона Поварова на Tarantool Meetup. "Tarantool в Badoo: хранение исто...
Доклад Антона Поварова на Tarantool Meetup. "Tarantool в Badoo: хранение исто...Badoo Development
 
Леонид Васильев "Python в инфраструктуре поиска"
Леонид Васильев "Python в инфраструктуре поиска"Леонид Васильев "Python в инфраструктуре поиска"
Леонид Васильев "Python в инфраструктуре поиска"Yandex
 
Как впихнуть утро в сосновом лесу в 4 килобайта. Иван Авдеев. UNIGINE Open Ai...
Как впихнуть утро в сосновом лесу в 4 килобайта. Иван Авдеев. UNIGINE Open Ai...Как впихнуть утро в сосновом лесу в 4 килобайта. Иван Авдеев. UNIGINE Open Ai...
Как впихнуть утро в сосновом лесу в 4 килобайта. Иван Авдеев. UNIGINE Open Ai...Unigine Corp.
 
Разработка real-time приложений с RethinkDB / Илья Вербицкий (Независимый кон...
Разработка real-time приложений с RethinkDB / Илья Вербицкий (Независимый кон...Разработка real-time приложений с RethinkDB / Илья Вербицкий (Независимый кон...
Разработка real-time приложений с RethinkDB / Илья Вербицкий (Независимый кон...Ontico
 
PostgreSQL: практические примеры оптимизации SQL-запросов / Иван Фролков (Po...
PostgreSQL: практические примеры оптимизации SQL-запросов /  Иван Фролков (Po...PostgreSQL: практические примеры оптимизации SQL-запросов /  Иван Фролков (Po...
PostgreSQL: практические примеры оптимизации SQL-запросов / Иван Фролков (Po...Ontico
 
Низкоуровневые оптимизации. Андрей Аксенов. Unigine Open Air 2013
Низкоуровневые оптимизации. Андрей Аксенов. Unigine Open Air 2013Низкоуровневые оптимизации. Андрей Аксенов. Unigine Open Air 2013
Низкоуровневые оптимизации. Андрей Аксенов. Unigine Open Air 2013Unigine Corp.
 
Как устроен поиск / Андрей Аксенов (Sphinx)
Как устроен поиск / Андрей Аксенов (Sphinx)Как устроен поиск / Андрей Аксенов (Sphinx)
Как устроен поиск / Андрей Аксенов (Sphinx)Ontico
 

Mais procurados (19)

С чего начать внедрение Hadoop в компании. Доклад Алексея Еремихина (Badoo).
С чего начать внедрение Hadoop в компании. Доклад Алексея Еремихина (Badoo). С чего начать внедрение Hadoop в компании. Доклад Алексея Еремихина (Badoo).
С чего начать внедрение Hadoop в компании. Доклад Алексея Еремихина (Badoo).
 
Сравнение форматов и библиотек сериализации / Антон Рыжов (Qrator Labs)
Сравнение форматов и библиотек сериализации / Антон Рыжов (Qrator Labs)Сравнение форматов и библиотек сериализации / Антон Рыжов (Qrator Labs)
Сравнение форматов и библиотек сериализации / Антон Рыжов (Qrator Labs)
 
Цена абстракции, Андрей Аксёнов (Sphinx)
Цена абстракции, Андрей Аксёнов (Sphinx)Цена абстракции, Андрей Аксёнов (Sphinx)
Цена абстракции, Андрей Аксёнов (Sphinx)
 
Нейронные сети на JS
Нейронные сети на JSНейронные сети на JS
Нейронные сети на JS
 
Хранение json-документов в Tarantool / Андрей Дроздов (Mail.ru Group)
Хранение json-документов в Tarantool / Андрей Дроздов (Mail.ru Group)Хранение json-документов в Tarantool / Андрей Дроздов (Mail.ru Group)
Хранение json-документов в Tarantool / Андрей Дроздов (Mail.ru Group)
 
7 убийц производительности WordPress
7 убийц производительности WordPress7 убийц производительности WordPress
7 убийц производительности WordPress
 
Эффективный AJAX
Эффективный AJAXЭффективный AJAX
Эффективный AJAX
 
Как мы сбежали от PostgreSQL или когда реляционная БД не справляется, Куманяе...
Как мы сбежали от PostgreSQL или когда реляционная БД не справляется, Куманяе...Как мы сбежали от PostgreSQL или когда реляционная БД не справляется, Куманяе...
Как мы сбежали от PostgreSQL или когда реляционная БД не справляется, Куманяе...
 
WordPress Cron API
WordPress Cron APIWordPress Cron API
WordPress Cron API
 
Доклад Антона Поварова на Tarantool Meetup. "Tarantool в Badoo: хранение исто...
Доклад Антона Поварова на Tarantool Meetup. "Tarantool в Badoo: хранение исто...Доклад Антона Поварова на Tarantool Meetup. "Tarantool в Badoo: хранение исто...
Доклад Антона Поварова на Tarantool Meetup. "Tarantool в Badoo: хранение исто...
 
Леонид Васильев "Python в инфраструктуре поиска"
Леонид Васильев "Python в инфраструктуре поиска"Леонид Васильев "Python в инфраструктуре поиска"
Леонид Васильев "Python в инфраструктуре поиска"
 
Как впихнуть утро в сосновом лесу в 4 килобайта. Иван Авдеев. UNIGINE Open Ai...
Как впихнуть утро в сосновом лесу в 4 килобайта. Иван Авдеев. UNIGINE Open Ai...Как впихнуть утро в сосновом лесу в 4 килобайта. Иван Авдеев. UNIGINE Open Ai...
Как впихнуть утро в сосновом лесу в 4 килобайта. Иван Авдеев. UNIGINE Open Ai...
 
pgconf.ru 2015 avito postgresql
pgconf.ru 2015 avito postgresqlpgconf.ru 2015 avito postgresql
pgconf.ru 2015 avito postgresql
 
Разработка real-time приложений с RethinkDB / Илья Вербицкий (Независимый кон...
Разработка real-time приложений с RethinkDB / Илья Вербицкий (Независимый кон...Разработка real-time приложений с RethinkDB / Илья Вербицкий (Независимый кон...
Разработка real-time приложений с RethinkDB / Илья Вербицкий (Независимый кон...
 
Devconf15
Devconf15Devconf15
Devconf15
 
PostgreSQL: практические примеры оптимизации SQL-запросов / Иван Фролков (Po...
PostgreSQL: практические примеры оптимизации SQL-запросов /  Иван Фролков (Po...PostgreSQL: практические примеры оптимизации SQL-запросов /  Иван Фролков (Po...
PostgreSQL: практические примеры оптимизации SQL-запросов / Иван Фролков (Po...
 
Низкоуровневые оптимизации. Андрей Аксенов. Unigine Open Air 2013
Низкоуровневые оптимизации. Андрей Аксенов. Unigine Open Air 2013Низкоуровневые оптимизации. Андрей Аксенов. Unigine Open Air 2013
Низкоуровневые оптимизации. Андрей Аксенов. Unigine Open Air 2013
 
Барнаул15
Барнаул15Барнаул15
Барнаул15
 
Как устроен поиск / Андрей Аксенов (Sphinx)
Как устроен поиск / Андрей Аксенов (Sphinx)Как устроен поиск / Андрей Аксенов (Sphinx)
Как устроен поиск / Андрей Аксенов (Sphinx)
 

Semelhante a CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах

Зачем нужна Scala?
Зачем нужна Scala?Зачем нужна Scala?
Зачем нужна Scala?Vasil Remeniuk
 
Как выглядит современный фронтенд
Как выглядит современный фронтендКак выглядит современный фронтенд
Как выглядит современный фронтендTimophy Chaptykov
 
Руслан Гроховецкий "Как Python стал делать погоду в Яндексе"
Руслан Гроховецкий "Как Python стал делать погоду в Яндексе"Руслан Гроховецкий "Как Python стал делать погоду в Яндексе"
Руслан Гроховецкий "Как Python стал делать погоду в Яндексе"Yandex
 
Пояснения к статье про Copy-Paste
Пояснения к статье про Copy-PasteПояснения к статье про Copy-Paste
Пояснения к статье про Copy-PasteTatyanazaxarova
 
20130429 dynamic c_c++_program_analysis-alexey_samsonov
20130429 dynamic c_c++_program_analysis-alexey_samsonov20130429 dynamic c_c++_program_analysis-alexey_samsonov
20130429 dynamic c_c++_program_analysis-alexey_samsonovComputer Science Club
 
Большой брат помогает тебе
Большой брат помогает тебеБольшой брат помогает тебе
Большой брат помогает тебеTatyanazaxarova
 
Принципы работы статического анализатора кода PVS-Studio
Принципы работы статического анализатора кода PVS-StudioПринципы работы статического анализатора кода PVS-Studio
Принципы работы статического анализатора кода PVS-StudioAndrey Karpov
 
Android: Как написать приложение, которое не тормозит
Android: Как  написать приложение, которое не тормозитAndroid: Как  написать приложение, которое не тормозит
Android: Как написать приложение, которое не тормозитElena Kotina
 
Статический анализ: вокруг Java за 60 минут
Статический анализ: вокруг Java за 60 минутСтатический анализ: вокруг Java за 60 минут
Статический анализ: вокруг Java за 60 минутAndrey Karpov
 
Цена ошибки
Цена ошибкиЦена ошибки
Цена ошибкиAndrey Karpov
 
CSS глазами машин
CSS глазами машинCSS глазами машин
CSS глазами машинRoman Dvornov
 
static - defcon russia 20
static  - defcon russia 20static  - defcon russia 20
static - defcon russia 20DefconRussia
 

Semelhante a CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах (20)

Зачем нужна Scala?
Зачем нужна Scala?Зачем нужна Scala?
Зачем нужна Scala?
 
Javascript
JavascriptJavascript
Javascript
 
Javascript 1
Javascript 1Javascript 1
Javascript 1
 
msumobi2. Лекция 1
msumobi2. Лекция 1msumobi2. Лекция 1
msumobi2. Лекция 1
 
Intro to Swift techitout
Intro to Swift techitoutIntro to Swift techitout
Intro to Swift techitout
 
Scala for android
Scala for androidScala for android
Scala for android
 
Как выглядит современный фронтенд
Как выглядит современный фронтендКак выглядит современный фронтенд
Как выглядит современный фронтенд
 
Руслан Гроховецкий "Как Python стал делать погоду в Яндексе"
Руслан Гроховецкий "Как Python стал делать погоду в Яндексе"Руслан Гроховецкий "Как Python стал делать погоду в Яндексе"
Руслан Гроховецкий "Как Python стал делать погоду в Яндексе"
 
Пояснения к статье про Copy-Paste
Пояснения к статье про Copy-PasteПояснения к статье про Copy-Paste
Пояснения к статье про Copy-Paste
 
Js fuckworks
Js fuckworksJs fuckworks
Js fuckworks
 
20130429 dynamic c_c++_program_analysis-alexey_samsonov
20130429 dynamic c_c++_program_analysis-alexey_samsonov20130429 dynamic c_c++_program_analysis-alexey_samsonov
20130429 dynamic c_c++_program_analysis-alexey_samsonov
 
Большой брат помогает тебе
Большой брат помогает тебеБольшой брат помогает тебе
Большой брат помогает тебе
 
Принципы работы статического анализатора кода PVS-Studio
Принципы работы статического анализатора кода PVS-StudioПринципы работы статического анализатора кода PVS-Studio
Принципы работы статического анализатора кода PVS-Studio
 
Android: Как написать приложение, которое не тормозит
Android: Как  написать приложение, которое не тормозитAndroid: Как  написать приложение, которое не тормозит
Android: Как написать приложение, которое не тормозит
 
course js day 2
course js day 2course js day 2
course js day 2
 
Статический анализ: вокруг Java за 60 минут
Статический анализ: вокруг Java за 60 минутСтатический анализ: вокруг Java за 60 минут
Статический анализ: вокруг Java за 60 минут
 
Цена ошибки
Цена ошибкиЦена ошибки
Цена ошибки
 
Цена ошибки
Цена ошибкиЦена ошибки
Цена ошибки
 
CSS глазами машин
CSS глазами машинCSS глазами машин
CSS глазами машин
 
static - defcon russia 20
static  - defcon russia 20static  - defcon russia 20
static - defcon russia 20
 

Mais de CodeFest

Alexander Graebe
Alexander GraebeAlexander Graebe
Alexander GraebeCodeFest
 
Никита Прокопов
Никита ПрокоповНикита Прокопов
Никита ПрокоповCodeFest
 
Денис Баталов
Денис БаталовДенис Баталов
Денис БаталовCodeFest
 
Елена Гальцина
Елена ГальцинаЕлена Гальцина
Елена ГальцинаCodeFest
 
Александр Калашников
Александр КалашниковАлександр Калашников
Александр КалашниковCodeFest
 
Ирина Иванова
Ирина ИвановаИрина Иванова
Ирина ИвановаCodeFest
 
Marko Berković
Marko BerkovićMarko Berković
Marko BerkovićCodeFest
 
Денис Кортунов
Денис КортуновДенис Кортунов
Денис КортуновCodeFest
 
Александр Зимин
Александр ЗиминАлександр Зимин
Александр ЗиминCodeFest
 
Сергей Крапивенский
Сергей КрапивенскийСергей Крапивенский
Сергей КрапивенскийCodeFest
 
Сергей Игнатов
Сергей ИгнатовСергей Игнатов
Сергей ИгнатовCodeFest
 
Николай Крапивный
Николай КрапивныйНиколай Крапивный
Николай КрапивныйCodeFest
 
Alexander Graebe
Alexander GraebeAlexander Graebe
Alexander GraebeCodeFest
 
Вадим Смирнов
Вадим СмирновВадим Смирнов
Вадим СмирновCodeFest
 
Константин Осипов
Константин ОсиповКонстантин Осипов
Константин ОсиповCodeFest
 
Raffaele Rialdi
Raffaele RialdiRaffaele Rialdi
Raffaele RialdiCodeFest
 
Максим Пугачев
Максим ПугачевМаксим Пугачев
Максим ПугачевCodeFest
 
Rene Groeschke
Rene GroeschkeRene Groeschke
Rene GroeschkeCodeFest
 
Иван Бондаренко
Иван БондаренкоИван Бондаренко
Иван БондаренкоCodeFest
 
Mete Atamel
Mete AtamelMete Atamel
Mete AtamelCodeFest
 

Mais de CodeFest (20)

Alexander Graebe
Alexander GraebeAlexander Graebe
Alexander Graebe
 
Никита Прокопов
Никита ПрокоповНикита Прокопов
Никита Прокопов
 
Денис Баталов
Денис БаталовДенис Баталов
Денис Баталов
 
Елена Гальцина
Елена ГальцинаЕлена Гальцина
Елена Гальцина
 
Александр Калашников
Александр КалашниковАлександр Калашников
Александр Калашников
 
Ирина Иванова
Ирина ИвановаИрина Иванова
Ирина Иванова
 
Marko Berković
Marko BerkovićMarko Berković
Marko Berković
 
Денис Кортунов
Денис КортуновДенис Кортунов
Денис Кортунов
 
Александр Зимин
Александр ЗиминАлександр Зимин
Александр Зимин
 
Сергей Крапивенский
Сергей КрапивенскийСергей Крапивенский
Сергей Крапивенский
 
Сергей Игнатов
Сергей ИгнатовСергей Игнатов
Сергей Игнатов
 
Николай Крапивный
Николай КрапивныйНиколай Крапивный
Николай Крапивный
 
Alexander Graebe
Alexander GraebeAlexander Graebe
Alexander Graebe
 
Вадим Смирнов
Вадим СмирновВадим Смирнов
Вадим Смирнов
 
Константин Осипов
Константин ОсиповКонстантин Осипов
Константин Осипов
 
Raffaele Rialdi
Raffaele RialdiRaffaele Rialdi
Raffaele Rialdi
 
Максим Пугачев
Максим ПугачевМаксим Пугачев
Максим Пугачев
 
Rene Groeschke
Rene GroeschkeRene Groeschke
Rene Groeschke
 
Иван Бондаренко
Иван БондаренкоИван Бондаренко
Иван Бондаренко
 
Mete Atamel
Mete AtamelMete Atamel
Mete Atamel
 

CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах

  • 1. TypeScript или JavaScript на стероидах author: { name: "Сергей Пугачёв", twitter: "@spugachev", company: "Microsoft Россия" };
  • 3. Сегодня я бы хотел рассказать о 3 продуктах Microsoft…
  • 5. Douglas Adams (автор «Автор автостопом по галактике») I've come up with a set of rules that describe our reactions to technologies: 1. Anything that is in the world when you’re born is normal and ordinary and is just a natural part of the way the world works. 2. Anything that's invented between when you’re fifteen and thirty-five is new and exciting and revolutionary and you can probably get a career in it. 3. Anything invented after you're thirty-five is against the natural order of things.
  • 6. TypeScript Начинается с JavaScript Весь JavaScript код является TypeScript кодом Все JavaScript библиотеки работают с TypeScript Опциональная статическая типизация, классы, модули Хорошо подходит для масштабных приложений Нет Runtime издержек. Статическая типизация исчезает в Runtime Заканчивается на JavaScript Компилируется в JavaScript Запускается в любом браузере и любой ОС
  • 7. TypeScript Начинается с JavaScript Весь JavaScript код является TypeScript кодом Все JavaScript библиотеки работают с TypeScript Опциональная статическая типизация, классы, модули Хорошо подходит для масштабных приложений Нет Runtime издержек. Статическая типизация исчезает в Runtime Заканчивается на JavaScript Компилируется в JavaScript Запускается в любом браузере и любой ОС
  • 17. 2. Подходы к решению всех проблем
  • 18. 1. Что не так с JavaScript?
  • 21. “Никто больше не пишет на JavaScript. Все пишут на jQuery.” Скотт Хансельман
  • 22. 1 10 100 1000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 Sunspiderrunsperminute(logscale) Internet Explorer производительность JavaScript
  • 23. Закон Этвуда: всё, что может быть написано на JavaScript, будет написано на JavaScript.
  • 28. Гибкость Производительность “Think C++”“Think Script” Простые сайты Сложные приложения, игры var r = 3 * "10"; // r == 300 var a = new Array(); a.push(10); var p = {x: 0, y: 0}; p.z = 5; p["some text"] = 1; p[1] = 2; eval("var s = p[1] * a[0]"); // s == 20 var r = 3 * parseInt("10"); var a = new Array(100); a[0] = 10; var p = new Point(0, 0, 0); p.z = 5;
  • 32. Что мы выяснили 1. JavaScript – ассемблер Web’а 2. JavaScript сам по себе мощный язык, на котором можно писать производительные приложения 3. JavaScript «не идеален» для создания больших проектов
  • 33. 2. Подходы к решению всех проблем
  • 34. • Компилировать язык в JavaScript • Создать новую виртуальную машину вместо JS 2 подхода
  • 35. var Greeter = (function () { function Greeter(greeting) { this.greeting = greeting; } Greeter.prototype.greet = function () { return "<h1>" + this.greeting + "</h1>"; }; return Greeter; } )(); var greeter = new Greeter("Hello, world!"); var str = greeter.greet(); document.body.innerHTML = str; class Greeter { greeting: string; constructor(greeting: string) { this.greeting = greeting; } greet() { return "<h1>"+this.greeting+"</h1>"; } } var greeter = new Greeter("Hello, world!"); var str = greeter.greet(); document.body.innerHTML = str; TypeScript
  • 36. var Greeter = (function () { function Greeter(greeting) { this.greeting = greeting; } Greeter.prototype.greet = function () { return "<h1>" + this.greeting + "</h1>"; }; return Greeter; } )(); var greeter = new Greeter("Hello, world!"); var str = greeter.greet(); document.body.innerHTML = str; class Greeter constructor: (@greeting) -> @greet -> return "<h1>" + this.greeting + "</h1>"; greeter = new Greeter("Hello, world!"); str = greeter.greet() document.body.innerHTML = str CoffeeScript
  • 43. Типы function toNumber(numberString: string, ...theArgs: number[]): number { var num: number = parseFloat(numberString); return num; }
  • 44. Перегрузка function numberStringSwap(value: number, radix?: number): string; function numberStringSwap(value: string): number; function numberStringSwap(value: any, radix: number = 10): any { if (typeof value === 'string') { return parseInt(value, radix); } else if (typeof value === 'number') { return String(value); } }
  • 45. Типы var point: { x: number; y: number; }; point = { x: 0, y: 0 }; // OK point = { x: 0, y: 0, z: 0 }; // OK point = { x: 'zero', y: 0 }; // Error point = { x: 0 }; // Error
  • 46. Интерфейсы interface IPoint { x: number; y: number; } interface IPoint3D extends IPoint { z: number; } var point: IPoint; var point2: IPoint3D;
  • 47. Интерфейсы interface IPoint { x: number; y: number; z?: number; toGeo(): IPoint; }
  • 48. Generics interface IArray<T> { map<TU>(callback: (value: T, index: number, array: IArray<T>) => TU, thisArg?: any): Array<TU>; } var arrayOfStrings: IArray<string> = ['a', 'b', 'c']; var arrayOfCharCodes: IArray<number> = arrayOfStrings.map( (value: string): number => value.charCodeAt(0));
  • 49. Классы class Stateful extends Proxy { constructor(kwArgs: Object) { super(kwArgs); } get(key: string): any { var getter: string = '_' + key + 'Getter'; return this[getter] ? this[getter]() : super.get(key); } }
  • 50. Enums enum Style { NONE = 0, BOLD = 1, ITALIC = 2, UNDERLINE = 4, EMPHASIS = Style.BOLD | Style.ITALIC, HYPERLINK = Style.BOLD | Style.UNDERLINE }
  • 51. Модули module Shapes { export class Rectangle { constructor( public height: number, public width: number) { } } }