Портирование WebSDK с JS на TS

Многие С++, Java и C# разработчики тепло встретили появление TypeScript, — и это был лишь вопрос времени, чтобы многие Web SDK были полностью переписаны на TypeScript. В своем докладе я делаю фокус на сложностях, с которыми можно столкнуться во время портирования, и на ожиданиях, которые могут оправдаться или не оправдаться от подобной смены стека технологий.

Зачем переписывать существующие проекты на TypeScript?
Совместимость с vanilla JS кодом: API, стектрейсы, разное.
Размер и скорость работы.
Grunt, Gulp или Webpack? Может быть, Rollup?
Стоят ли типы того?
Цена разработки.

Transcript

1. Григорий Петров Портирование Web SDK с JS на TS Voximplant DUMP, Екатеринбург 14 апреля, 2017 https://twitter.com/grigoryvp
2. Что сейчас будет? Рассказывает Григорий Петров Специализация Руководство разработкой Чем занимается Технический евангелист Опыт Более 15 лет Время выступления 45 минут Вопросы В конце выступления, 15 минут 2
3. Что портировали? - Web SDK облачной телефонии
4. Что портировали? - Web SDK облачной телефонии - 13kloc, 250kb
5. Что портировали? - Web SDK облачной телефонии - 13kloc, 250kb - Немного, да? :)
6. Что портировали? - Web SDK облачной телефонии - 13kloc, 250kb - Немного, да? :) - Зато там было много WebRTC...
7. На что портировали?
8. На что портировали? TypeScript
9. На что портировали? TypeScript - Создан в недрах Microsoft 4 года назад
10. На что портировали? TypeScript - Создан в недрах Microsoft 4 года назад - От автора Delphi и C#
11. На что портировали? TypeScript - Создан в недрах Microsoft 4 года назад - От автора Delphi и C# - Обратно совместим с JavaScript
12. На что портировали? TypeScript - Создан в недрах Microsoft 4 года назад - От автора Delphi и C# - Обратно совместим с JavaScript - Тулчейн в экосистеме npm
13. На что портировали? TypeScript - Создан в недрах Microsoft 4 года назад - От автора Delphi и C# - Обратно совместим с JavaScript - Тулчейн в экосистеме npm yarn
14. На что портировали? TypeScript - Создан в недрах Microsoft 4 года назад - От автора Delphi и C# - Обратно совместим с JavaScript - Тулчейн в экосистеме npm yarn - Добавляет ES6, ES7 ...
15. На что портировали? TypeScript - Создан в недрах Microsoft 4 года назад - От автора Delphi и C# - Обратно совместим с JavaScript - Тулчейн в экосистеме npm yarn - Добавляет ES6, ES7 ES2016 ...
16. На что портировали? TypeScript - Создан в недрах Microsoft 4 года назад - От автора Delphi и C# - Обратно совместим с JavaScript - Тулчейн в экосистеме npm yarn - Добавляет ES6, ES7 ES2016 ... и типы!
18. Проблема сложности Мы хотим, чтобы код был по делу. А не по инфраструктуре!
19. Почему TypeScript? Ведь есть же: • ES6/7/Babel • Dart • Flow • Elm • EMScripten • CoffeScript, наконец! :)
20. TypeScript Потому что Microsoft :)
21. TypeScript Потому что Microsoft :)
22. TypeScript Потому что Microsoft :) Потому что TS — это JS
23. TypeScript Потому что Microsoft :) Потому что TS — это JS И async
24. TypeScript Потому что Microsoft :) Потому что TS — это JS И async И декораторы
25. TypeScript Потому что Microsoft :) Потому что TS — это JS И async И декораторы И интерфейсы
26. TypeScript Потому что Microsoft :) Потому что TS — это JS И async И декораторы И интерфейсы И типы
27. Типы: капкан для ошибок
28. Типы: капкан для ошибок The main purpose of a type system is to reduce possibilities for bugs in computer programs. - wikipedia
29. Как работают капканы
30. Без капкана: function addUser(name) { … // где-то в другом месте addUser(user.name) С капканом: function addUser(name: string) { … // где-то в другом месте addUser(user.name) Через полгода: // жертва рефакторинга addUser(id) Через полгода: // ошибка проверки типов addUser(id)
31. Без капкана: function addUser(name) { … // где-то в другом месте addUser(user.name) С капканом: function addUser(name: string) { … // где-то в другом месте addUser(user.name) Через полгода: // жертва рефакторинга addUser(id) Через полгода: // ошибка проверки типов addUser(id)
32. Плюсы и минусы типизаций Dynamic typing - Скорость разработки - Капканы срабатывают не сразу - Капкан может не поставиться Static typing - Скорость разработки - Нужно думать - Капканы срабатывают сразу
33. Плюсы и минусы типов Dynamic typing - Скорость разработки - Капканы срабатывают не сразу - Капкан может не поставиться Static typing - Скорость разработки - Нужно думать - Капканы срабатывают сразу TypeScript: Gradual Typing
34. Плюсы и минусы типов Dynamic typing - Скорость разработки - Капканы срабатывают не сразу - Капкан может не поставиться Static typing - Скорость разработки - Нужно думать - Капканы срабатывают сразу TypeScript: Gradual Typing - Добавляем типы только там, где надо
35. Плюсы и минусы типов Dynamic typing - Скорость разработки - Капканы срабатывают не сразу - Капкан может не поставиться Static typing - Скорость разработки - Нужно думать - Капканы срабатывают сразу TypeScript: Gradual Typing - Добавляем типы только там, где надо - Быстрое прототипирование и модификации
36. Плюсы и минусы типов Dynamic typing - Скорость разработки - Капканы срабатывают не сразу - Капкан может не поставиться Static typing - Скорость разработки - Нужно думать - Капканы срабатывают сразу TypeScript: Gradual Typing - Добавляем типы только там, где надо - Быстрое прототипирование и модификации - Защита кода после стабилизации
37. Зачем типы нам в Voximplant Фиксируем контракты методов
38. Зачем типы нам в Voximplant Фиксируем контракты методов Страхуем себя в мире WebRTC
39. А что будет у клиентов? А у клиентов будет 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; }());
40. А что будет у клиентов? С классами тоже все будет хорошо * 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; }()); * Если не используется что-нибудь атипичное
41. Но оно компилируется!
42. Но оно компилируется! Что будет со стектрейсами?
43. Но оно компилируется! Что будет со стектрейсами? Все будет хорошо
44. Но оно компилируется! Что будет со стектрейсами? Все будет хорошо Символы есть
45. Но оно компилируется! Что будет со стектрейсами? Все будет хорошо Символы есть На выходе «читаемый» JavaScript
46. А что с jQuery и другим легаси?
47. А что с jQuery и другим легаси? Все хорошо, оно обратно совместимо
48. А что с jQuery и другим легаси? Все хорошо, оно обратно совместимо А если скачать типы — то и типизировано
49. Распухнет и будет тормозить?
50. Распухнет и будет тормозить? JS компилируется в JS
51. Распухнет и будет тормозить? JS компилируется в JS Бонусы компилируются адекватно
52. А что с креативным JavaScript?
53. А что с креативным JavaScript? У нас есть функция-enum-объект!
54. А что с креативным JavaScript? У нас есть функция-enum-объект! Придется использовать any
55. Постепенный переход на TS?
56. Постепенный переход на TS? Файлы могут быть JS или TS
57. Постепенный переход на TS? Файлы могут быть JS или TS Type inference работает всегда
58. Постепенный переход на TS? Файлы могут быть JS или TS Type inference работает всегда Изменить тип файла — миллион ошибок
59. Тулчейн? yarn init . yarn install typescript ./node_modules/.bin/tsc entrypoint.ts
60. Вот прямо ‘entrypoint’? - Синтаксис ESM - Генерация ESM/CJS/AMD/UMD/SystemJS
61. Откуда брать типы для либ? "dependencies": { "@types/jquery": "^2.0.41", "jquery": "^2.0.41",
62. А если типов не завезли? declare var $;
63. Чем это все собирать?
64. Чем это все собирать? Чем угодно
65. Чем это все собирать? Чем угодно Angular 2 ничем не собирает (tsc)
66. Чем это все собирать? Чем угодно Angular 2 ничем не собирает (tsc) Мы используем Webpack
67. А как с CI?
68. А как с CI? Одним словом: npm
69. А как с CI? Одним словом: npm Мы используем Gitlab CI
70. Тестирование? @suite("mocha typescript") class Basic { @test("should pass on assert") asserts_pass() {
71. Тестирование? @suite("mocha typescript") class Basic { @test("should pass on assert") asserts_pass() { Мы используем “intern” с webdriver
73. Самое главное
74. Самое главное Gradual Typing
75. Самое главное Gradual Typing Быстрые эксперименты
76. Самое главное Gradual Typing Быстрые эксперименты Постепенное обрастание типами
77. Ошибки компилятора Как в C++ 20 лет назад: Cannot find name 'foo' Cannot find module 'foo' Property 'bar' does not exist on type 'foo'
78. Нужны сильные разработчики Иначе — будет больно
80. Ловушки для ошибок Сильные и слабые стороны TS
81. Ловушки для ошибок Все новое из мира JS Сильные и слабые стороны TS
82. Ловушки для ошибок Все новое из мира JS Возможен постепенный переход Сильные и слабые стороны TS
83. Ловушки для ошибок Все новое из мира JS Возможен постепенный переход Поддерживает Microsoft Сильные и слабые стороны TS
84. Ловушки для ошибок Все новое из мира JS Возможен постепенный переход Поддерживает Microsoft npm экосистема Сильные и слабые стороны TS
85. Ловушки для ошибок Все новое из мира JS Возможен постепенный переход Поддерживает Microsoft npm экосистема Ловушки нужно ставить вручную Сильные и слабые стороны TS
86. Ловушки для ошибок Все новое из мира JS Возможен постепенный переход Поддерживает Microsoft npm экосистема Ловушки нужно ставить вручную Адские сообщения об ошибках Сильные и слабые стороны TS
87. Ловушки для ошибок Все новое из мира JS Возможен постепенный переход Поддерживает Microsoft npm экосистема Ловушки нужно ставить вручную Адские сообщения об ошибках Нужны сильные программисты Сильные и слабые стороны TS
88. Ловушки для ошибок Все новое из мира JS Возможен постепенный переход Поддерживает Microsoft npm экосистема Ловушки нужно ставить вручную Адские сообщения об ошибках Нужны сильные программисты Не все можно явно переписать Сильные и слабые стороны TS
89. Ловушки для ошибок Все новое из мира JS Возможен постепенный переход Поддерживает Microsoft npm экосистема Ловушки нужно ставить вручную Адские сообщения об ошибках Нужны сильные программисты Не все можно явно переписать Не для всего есть готовые типы Сильные и слабые стороны TS
91. Мнение Voximplant?
92. Мнение Voximplant? - Контракты, интерфейсы, ловушки
93. Мнение Voximplant? - Контракты, интерфейсы, ловушки - 3 человеко-месяца
94. Мнение Voximplant? - Контракты, интерфейсы, ловушки - 3 человеко-месяца - 250kb → 800kb
95. Мнение Voximplant? - Контракты, интерфейсы, ловушки - 3 человеко-месяца - 250kb → 800kb - 12kloc → 20kloc
96. Это всё! Вопросы? Григорий Петров grigory.v.p@gmail.com https://twitter.com/grigoryvp https://facebook.com/grigoryvp 96