Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Avatar for Grigory

Grigory

April 14, 2017
Tweet

More Decks by Grigory

Other Decks in Programming

Transcript

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

    DUMP, Екатеринбург 14 апреля, 2017 https://twitter.com/grigoryvp
  2. Что сейчас будет? Рассказывает Григорий Петров Специализация Руководство разработкой Чем

    занимается Технический евангелист Опыт Более 15 лет Время выступления 45 минут Вопросы В конце выступления, 15 минут 2
  3. Что портировали? - Web SDK облачной телефонии - 13kloc, 250kb

    - Немного, да? :) - Зато там было много WebRTC...
  4. На что портировали? TypeScript - Создан в недрах Microsoft 4

    года назад - От автора Delphi и C# - Обратно совместим с JavaScript
  5. На что портировали? TypeScript - Создан в недрах Microsoft 4

    года назад - От автора Delphi и C# - Обратно совместим с JavaScript - Тулчейн в экосистеме npm
  6. На что портировали? TypeScript - Создан в недрах Microsoft 4

    года назад - От автора Delphi и C# - Обратно совместим с JavaScript - Тулчейн в экосистеме npm yarn
  7. На что портировали? TypeScript - Создан в недрах Microsoft 4

    года назад - От автора Delphi и C# - Обратно совместим с JavaScript - Тулчейн в экосистеме npm yarn - Добавляет ES6, ES7 ...
  8. На что портировали? TypeScript - Создан в недрах Microsoft 4

    года назад - От автора Delphi и C# - Обратно совместим с JavaScript - Тулчейн в экосистеме npm yarn - Добавляет ES6, ES7 ES2016 ...
  9. На что портировали? TypeScript - Создан в недрах Microsoft 4

    года назад - От автора Delphi и C# - Обратно совместим с JavaScript - Тулчейн в экосистеме npm yarn - Добавляет ES6, ES7 ES2016 ... и типы!
  10. Почему TypeScript? Ведь есть же: • ES6/7/Babel • Dart •

    Flow • Elm • EMScripten • CoffeScript, наконец! :)
  11. TypeScript Потому что Microsoft :) Потому что TS — это

    JS И async И декораторы И интерфейсы
  12. TypeScript Потому что Microsoft :) Потому что TS — это

    JS И async И декораторы И интерфейсы И типы
  13. Типы: капкан для ошибок The main purpose of a type

    system is to reduce possibilities for bugs in computer programs. - wikipedia
  14. Без капкана: function addUser(name) { … // где-то в другом

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

    месте addUser(user.name) С капканом: function addUser(name: string) { … // где-то в другом месте addUser(user.name) Через полгода: // жертва рефакторинга addUser(id) Через полгода: // ошибка проверки типов addUser(id)
  16. Плюсы и минусы типизаций Dynamic typing - Скорость разработки -

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

    Капканы срабатывают не сразу - Капкан может не поставиться Static typing - Скорость разработки - Нужно думать - Капканы срабатывают сразу TypeScript: Gradual Typing
  18. Плюсы и минусы типов Dynamic typing - Скорость разработки -

    Капканы срабатывают не сразу - Капкан может не поставиться Static typing - Скорость разработки - Нужно думать - Капканы срабатывают сразу TypeScript: Gradual Typing - Добавляем типы только там, где надо
  19. Плюсы и минусы типов Dynamic typing - Скорость разработки -

    Капканы срабатывают не сразу - Капкан может не поставиться Static typing - Скорость разработки - Нужно думать - Капканы срабатывают сразу TypeScript: Gradual Typing - Добавляем типы только там, где надо - Быстрое прототипирование и модификации
  20. Плюсы и минусы типов Dynamic typing - Скорость разработки -

    Капканы срабатывают не сразу - Капкан может не поставиться Static typing - Скорость разработки - Нужно думать - Капканы срабатывают сразу TypeScript: Gradual Typing - Добавляем типы только там, где надо - Быстрое прототипирование и модификации - Защита кода после стабилизации
  21. А что будет у клиентов? А у клиентов будет 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; }());
  22. А что будет у клиентов? С классами тоже все будет

    хорошо * 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; }()); * Если не используется что-нибудь атипичное
  23. А что с jQuery и другим легаси? Все хорошо, оно

    обратно совместимо А если скачать типы — то и типизировано
  24. Постепенный переход на TS? Файлы могут быть JS или TS

    Type inference работает всегда Изменить тип файла — миллион ошибок
  25. Чем это все собирать? Чем угодно Angular 2 ничем не

    собирает (tsc) Мы используем Webpack
  26. Тестирование? @suite("mocha typescript") class Basic { @test("should pass on assert")

    asserts_pass() { Мы используем “intern” с webdriver
  27. Ошибки компилятора Как в C++ 20 лет назад: Cannot find

    name 'foo' Cannot find module 'foo' Property 'bar' does not exist on type 'foo'
  28. Ловушки для ошибок Все новое из мира JS Возможен постепенный

    переход Поддерживает Microsoft Сильные и слабые стороны TS
  29. Ловушки для ошибок Все новое из мира JS Возможен постепенный

    переход Поддерживает Microsoft npm экосистема Сильные и слабые стороны TS
  30. Ловушки для ошибок Все новое из мира JS Возможен постепенный

    переход Поддерживает Microsoft npm экосистема Ловушки нужно ставить вручную Сильные и слабые стороны TS
  31. Ловушки для ошибок Все новое из мира JS Возможен постепенный

    переход Поддерживает Microsoft npm экосистема Ловушки нужно ставить вручную Адские сообщения об ошибках Сильные и слабые стороны TS
  32. Ловушки для ошибок Все новое из мира JS Возможен постепенный

    переход Поддерживает Microsoft npm экосистема Ловушки нужно ставить вручную Адские сообщения об ошибках Нужны сильные программисты Сильные и слабые стороны TS
  33. Ловушки для ошибок Все новое из мира JS Возможен постепенный

    переход Поддерживает Microsoft npm экосистема Ловушки нужно ставить вручную Адские сообщения об ошибках Нужны сильные программисты Не все можно явно переписать Сильные и слабые стороны TS
  34. Ловушки для ошибок Все новое из мира JS Возможен постепенный

    переход Поддерживает Microsoft npm экосистема Ловушки нужно ставить вручную Адские сообщения об ошибках Нужны сильные программисты Не все можно явно переписать Не для всего есть готовые типы Сильные и слабые стороны TS