"Портирование Web SDK с JS на TS" Петров Григорий, Voximplant

Григорий Петров
Портирование Web SDK с JS на TS
Voximplant
Dump.conf, Екатеринбург, 04.2017

Что сейчас будет?
Рассказывает Григорий Петров
Специализация Руководство разработкой
Чем занимается Технический евангелист
Опыт Более 15 лет
Время выступления 45 минут
Вопросы В конце выступления, 15 минут
2

Что портировали?
- Web SDK облачной телефонии

- 13kloc, 250kb

- 13kloc, 250kb
- Немного, да? :)

- 13kloc, 250kb
- Немного, да? :)
- Зато там было много WebRTC...

На что портировали?

TypeScript

TypeScript
- Создан в недрах Microsoft 4 года назад

TypeScript
- От автора Delphi и C#

TypeScript
- Обратно совместим с JavaScript

TypeScript
- Тулчейн в экосистеме npm

TypeScript
- Тулчейн в экосистеме npm yarn

TypeScript
- Добавляет ES6, ES7 ...

TypeScript
- Добавляет ES6, ES7 ES2016 ...

TypeScript
- Добавляет ES6, ES7 ES2016 ... и типы!

Проблема сложности
Мы хотим, чтобы код был по делу
А не по инфраструктуре

Почему TypeScript?
Ведь есть же:
● ES6/7/Babel
● Dart
● Flow
● Elm
● EMScripten
● CoffeScript, наконец! :)

TypeScript
Потому что Microsoft :)

TypeScript
Потому что TS это JS

TypeScript
И async

TypeScript
И async
И декораторы

TypeScript
И async
И интерфейсы

TypeScript
И async
И интерфейсы
И типы

Типы: капкан для ошибок

Типы: капкан для ошибок
The main purpose of a type system is to reduce
possibilities for bugs in computer programs
- wikipedia

Как работают капканы

Без капкана:
function addUser(name) { …
// где-то в другом месте
addUser(user.name)
С капканом:
function addUser(name: string) { …
// где-то в другом месте
addUser(user.name)
Через полгода:
// жертва рефакторинга
addUser(id)
Через полгода:
// ошибка проверки типов
addUser(id)

Плюсы и минусы типизаций
Dynamic typing
- Скорость разработки
- Капканы срабатывают не сразу
- Капкан может не поставиться
Static typing
- Нужно думать
- Капканы срабатывают сразу

Плюсы и минусы типов
Dynamic typing
Static typing
TypeScript: Gradual Typing

Dynamic typing
Static typing
- Добавляем типы только там, где надо

Dynamic typing
Static typing
- Быстрое прототипирование и модификации

Dynamic typing
Static typing
- Быстрое прототипирование и модификации
- Защита кода после стабилизации

Зачем типы нам в Voximplant
Фиксируем контракты методов

Зачем типы нам в Voximplant
Фиксируем контракты методов
Страхуем себя в мире WebRTC

А что будет у клиентов?
А у клиентов будет JavaScript
TypeScript ES2015 ES5
class Foo {
bar = () => {
console.log(this);
}
}
class Foo {
constructor() {
this.bar = () => {
console.log(this);
};
}
}
var Foo = (function () {
function Foo() {
var _this = this;
this.bar = function () {
console.log(_this);
};
}
return Foo;
}());

А что будет у клиентов?
С классами тоже все будет хорошо *
TypeScript ES2015 ES5
class Foo {
bar = () => {
console.log(this);
}
}
class Foo {
constructor() {
this.bar = () => {
console.log(this);
};
}
}
var Foo = (function () {
function Foo() {
var _this = this;
this.bar = function () {
console.log(_this);
};
}
return Foo;
}());
* Если не используется что-нибудь атипичное

Но оно компилируется!

Что будет со стектрейсами?

Все будет хорошо

Символы есть

Символы есть
На выходе “читаемый” JavaScript

А что с jQuery и другим легаси?

Все хорошо, оно обратно совместимо

Все хорошо, оно обратно совместимо
А если скачать типы - то и типизировано

Распухнет и будет тормозить?

JS компилируется в JS

JS компилируется в JS
Бонусы компилируются адекватно

А что с креативным JavaScript?

У нас есть функция-enum-объект!

У нас есть функция-enum-объект!
Придется использовать any

Постепенный переход на TS?

Файлы могут быть JS или TS

Type inference работает всегда

Type inference работает всегда
Изменить тип файла - миллион ошибок

Тулчейн?
yarn init .
yarn install typescript
./node_modules/.bin/tsc entrypoint.ts

Вот прямо ‘entrypoint’?
- Синтаксис ESM
- Генерация ESM/CJS/AMD/UMD/SystemJS

Откуда брать типы для либ?
"dependencies": {
"@types/jquery": "^2.0.41",
"jquery": "^2.0.41",

А если типов не завезли?
declare var $;

Чем это все собирать?

Чем угодно

Чем угодно
Angular 2 ничем не собирает (tsc)

Чем угодно
Angular 2 ничем не собирает (tsc)
Мы используем Webpack

А как с CI?
Одним словом: npm

А как с CI?
Одним словом: npm
Мы используем Gitlab CI

Тестирование?
@suite("mocha typescript")
class Basic {
@test("should pass on assert")
asserts_pass() {

Тестирование?
@suite("mocha typescript")
class Basic {
@test("should pass on assert")
asserts_pass() {
Мы используем “intern” с webdriver

Самое главное
Gradual Typing

Gradual Typing
Быстрые эксперименты

Gradual Typing
Быстрые эксперименты
Постепенное обрастание типами

Ошибки компилятора
Как в C++ 20 лет назад:
Cannot find name 'foo'
Cannot find module 'foo'
Property 'bar' does not exist on type 'foo'

Нужны сильные разработчики
Иначе - будет больно

Ловушки для ошибок

Все новое из мира JS

Возможен постепенный переход

Поддерживает Microsoft

npm экосистема

Ловушки нужно ставить вручную

Адские сообщения об ошибках

Нужны сильные программисты

Не все можно явно переписать

Не все можно явно переписать
Не для всего есть готовые типы

Мнение Voximplant?
- Контракты, интерфейсы, ловушки

- 3 человеко-месяца

- 250kb -> 800kb

- 250kb -> 800kb
- 12kloc -> 20kloc

Это всё!
Вопросы?
Григорий Петров
grigory.v.p@gmail.com
http://facebook.com/grigoryvp
96

"Портирование Web SDK с JS на TS" Петров Григорий, Voximplant

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to "Портирование Web SDK с JS на TS" Петров Григорий, Voximplant

Similar to "Портирование Web SDK с JS на TS" Петров Григорий, Voximplant (20)

More from it-people

More from it-people (20)

"Портирование Web SDK с JS на TS" Петров Григорий, Voximplant