Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Nächste SlideShare
What to Upload to SlideShare
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

Teilen

Migrating Web SDK from JS to TS

Herunterladen, um offline zu lesen

Slides from my talk at AmsterdamJS 08.06, https://amsterdamjs.com

Typescript was warmly welcomed with all our developers from C++, Java and C# background. So it was only a question of time for our public JavaScript SDK to be completely rewritten in Typescript from scratch. In my talk I will focus on good and bad things that we experienced during development, and will tell how our initial thoughts played out.

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • Gehören Sie zu den Ersten, denen das gefällt!

Migrating Web SDK from JS to TS

  1. 1. Grigory Petrov Migrating Web SDK from JS to TS Voximplant AmsterdamJS, Amsterdam June 8, 2017 https://twitter.com/grigoryvp
  2. 2. What's next? Speaker Grigory Petrov Specialization Team Lead Full-time job Technology Evangelist Experience in IT More than 15 years Talk time 30 minutes Questions After the talk, 5 minutes 2
  3. 3. What was migrated? - Web SDK for cloud-based telephony solutions
  4. 4. What was migrated? - Web SDK for cloud-based telephony solutions - 13 KLOC, 250 kB
  5. 5. What was migrated? - Web SDK for cloud-based telephony solutions - 13 KLOC, 250 kB - Not a huge deal, yep? :)
  6. 6. What was migrated? - Web SDK for cloud-based telephony solutions - 13 KLOC, 250 kB - Not a huge deal, yep? :) - Until the dreaded WebRTC creeps in...
  7. 7. Software Complexity Problem We want to write code for our ideas. Not the code for JavaScript.
  8. 8. Migration target
  9. 9. Migration target TypeScript
  10. 10. Migration target TypeScript - Created by Microsoft 4 years ago
  11. 11. Migration target TypeScript - Created by Microsoft 4 years ago - Created by the author of Delphi and C#
  12. 12. Migration target TypeScript - Created by Microsoft 4 years ago - Created by the author of Delphi and C# - Backward compatible with JavaScript
  13. 13. Migration target TypeScript - Created by Microsoft 4 years ago - Created by the author of Delphi and C# - Backward compatible with JavaScript - NPM-based toolchain
  14. 14. Migration target TypeScript - Created by Microsoft 4 years ago - Created by the author of Delphi and C# - Backward compatible with JavaScript - NPMYarn-based toolchain
  15. 15. Migration target TypeScript - Created by Microsoft 4 years ago - Created by the author of Delphi and C# - Backward compatible with JavaScript - NPMYarn-based toolchain - Adds ES6, ES7 ...
  16. 16. Migration target TypeScript - Created by Microsoft 4 years ago - Created by the author of Delphi and C# - Backward compatible with JavaScript - NPMYarn-based toolchain - Adds ES6, ES7 ES2016 ...
  17. 17. Migration target TypeScript - Created by Microsoft 4 years ago - Created by the author of Delphi and C# - Backward compatible with JavaScript - NPMYarn-based toolchain - Adds ES6, ES7 ES2016 ... and types!
  18. 18. Why TypeScript? We already have: ● ES6/7/Babel ● Dart ● Flow ● Elm ● Emscripten ● CoffeeScript, after all! :)
  19. 19. TypeScript Because it's from Microsoft :)
  20. 20. TypeScript Because it's from Microsoft :)
  21. 21. TypeScript Because it's from Microsoft :) Because TS is actually JS
  22. 22. TypeScript Because it's from Microsoft :) Because TS is actually JS And async
  23. 23. TypeScript Because it's from Microsoft :) Because TS is actually JS And async And decorators
  24. 24. TypeScript Because it's from Microsoft :) Because TS is actually JS And async And decorators And interfaces
  25. 25. TypeScript Because it's from Microsoft :) Because TS is actually JS And async And decorators And interfaces And types
  26. 26. Types: a trap for errors
  27. 27. Types: a trap for errors The main purpose of a type system is to reduce possibilities for bugs in computer programs. - Wikipedia
  28. 28. How traps work
  29. 29. Without a trap: function addUser(name) { … // somewhere in a distant place addUser(user.name) With a trap: function addUser(name: string) { … // somewhere in a distant place addUser(user.name) Half a year later: // refactoring victim addUser(id) Half a year later: // type check trap sprung addUser(id)
  30. 30. Without a trap: function addUser(name) { … // somewhere in a distant place addUser(user.name) With a trap: function addUser(name: string) { … // somewhere in a distant place addUser(user.name) Half a year later: // refactoring victim addUser(id) Half a year later: // type check trap sprung addUser(id)
  31. 31. Types pros and cons Dynamic typing - Development speed - Traps spring in the future - Trap may not be placed automatically Static typing - Development speed - Requires more thinking - Traps spring instantly
  32. 32. Types cons and pros TypeScript: gradual typing Dynamic typing - Development speed - Traps spring in the future - Trap may not be placed automatically Static typing - Development speed - Requires more thinking - Traps spring instantly
  33. 33. Types cons and pros TypeScript: gradual typing - Add types only where you need them Dynamic typing - Development speed - Traps spring in the future - Trap may not be placed automatically Static typing - Development speed - Requires more thinking - Traps spring instantly
  34. 34. Types cons and pros TypeScript: gradual typing - Add types only where you need them - Fast prototyping and code modifications Dynamic typing - Development speed - Traps spring in the future - Trap may not be placed automatically Static typing - Development speed - Requires more thinking - Traps spring instantly
  35. 35. Types cons and pros TypeScript: gradual typing - Add types only where you need them - Fast prototyping and code modifications - Protect the code only after it was stabilized Dynamic typing - Development speed - Traps spring in the future - Trap may not be placed automatically Static typing - Development speed - Requires more thinking - Traps spring instantly
  36. 36. How we use types at Voximplant Keep track of method contracts
  37. 37. How we use types at Voximplant Keep track of method contracts Insurance for WebRTC changes
  38. 38. What about clients? Clients enjoy plain 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; }());
  39. 39. What about clients? Even classes go fine * 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; }()); * Unless something strange is used
  40. 40. But it compiles...
  41. 41. But it compiles... What will happen to stack traces?
  42. 42. But it compiles... What will happen to stack traces? Everything will be fine
  43. 43. But it compiles... What will happen to stack traces? Everything will be fine We have source maps
  44. 44. But it compiles... What will happen to stack traces? Everything will be fine We have source maps Resulting JavaScript is perfectly readable
  45. 45. What about the legacy like jQuery?
  46. 46. What about the legacy like jQuery? Backward compatibility with JavaScript
  47. 47. What about the legacy like jQuery? Backward compatibility with JavaScript And types if you download them
  48. 48. Will it be fat and slow?
  49. 49. Will it be fat and slow? Nope, plain JavaScript remains the same
  50. 50. Will it be fat and slow? Nope, plain JavaScript remains the same Extensions are compiled properly
  51. 51. What about Creative JavaScript?
  52. 52. What about Creative JavaScript? We have that function-enum-object!
  53. 53. What about Сreative JavaScript? We have that function-enum-object! In that case, we need to use the ‘any’ keyword
  54. 54. Gradual transition to TS?
  55. 55. Gradual transition to TS? We can compile both JS and TS input
  56. 56. Gradual transition to TS? We can compile both JS and TS input Type inference is always enabled
  57. 57. Gradual transition to TS? We can compile both JS and TS input Type inference is always enabled Countless errors if you rename .js to .ts
  58. 58. Toolchain? yarn init . yarn install typescript ./node_modules/.bin/tsc entrypoint.ts
  59. 59. Are we talking about ‘entrypoint’? - Yes, ESM modules - Output is ESM/CJS/AMD/UMD/SystemJS
  60. 60. Where to get types? "dependencies": { "@types/jquery": "^2.0.41", "jquery": "^2.0.41",
  61. 61. And if no types are available? declare var $;
  62. 62. How about a build system?
  63. 63. How about a build system? Any will do
  64. 64. How about a build system? Any will do Angular 2 does not use any (plain tsc)
  65. 65. How about a build system? Any will do Angular 2 does not use any (plain tsc) We use Webpack
  66. 66. Continuous integration?
  67. 67. Continuous integration? One word: npm
  68. 68. Continuous integration? One word: npm We use Gitlab CI
  69. 69. Testing? @suite("mocha-typescript") class Basic { @test("should pass on assert") asserts_pass() {
  70. 70. Testing? @suite("mocha-typescript") class Basic { @test("should pass on assert") asserts_pass() { We use ‘intern’, it provides good WebDriver support
  71. 71. Best things in practice
  72. 72. Best things in practice Gradual typing
  73. 73. Best things in practice Gradual typing Fast experiments
  74. 74. Best things in practice Gradual typing Fast experiments Types are introduced gradually
  75. 75. Compilation errors Like in C++ 20 years ago: Cannot find name 'foo' Cannot find module 'foo' Property 'bar' does not exist on type 'foo'
  76. 76. You need skilled developers Otherwise the development becomes painful
  77. 77. Traps for errors TypeScript pros and cons
  78. 78. Traps for errors All new things from the JS world TypeScript pros and cons
  79. 79. Traps for errors All new things from the JS world Gradual transition is possible TypeScript pros and cons
  80. 80. Traps for errors All new things from the JS world Gradual transition is possible Supported by Microsoft TypeScript pros and cons
  81. 81. Traps for errors All new things from the JS world Gradual transition is possible Supported by Microsoft npm ecosystem TypeScript pros and cons
  82. 82. Traps for errors All new things from the JS world Gradual transition is possible Supported by Microsoft npm ecosystem Traps need to be placed manually TypeScript pros and cons
  83. 83. Traps for errors All new things from the JS world Gradual transition is possible Supported by Microsoft npm ecosystem Traps need to be placed manually Error messages from hell TypeScript pros and cons
  84. 84. Traps for errors All new things from the JS world Gradual transition is possible Supported by Microsoft npm ecosystem Traps need to be placed manually Error messages from hell You need strong developers TypeScript pros and cons
  85. 85. Traps for errors All new things from the JS world Gradual transition is possible Supported by Microsoft npm ecosystem Traps need to be placed manually Error messages from hell You need strong developers Not everything can be migrated well TypeScript pros and cons
  86. 86. Traps for errors All new things from the JS world Gradual transition is possible Supported by Microsoft npm ecosystem Traps need to be placed manually Error messages from hell You need strong developers Not everything can be migrated well Not everything has ready-made types TypeScript pros and cons
  87. 87. Lessons learned by Voximplant
  88. 88. Lessons learned by Voximplant - Contracts, interfaces, traps
  89. 89. Lessons learned by Voximplant - Contracts, interfaces, traps - 3 man-months
  90. 90. Lessons learned by Voximplant - Contracts, interfaces, traps - 3 man-months - 250 kB → 800 kB
  91. 91. Lessons learned by Voximplant - Contracts, interfaces, traps - 3 man-months - 250 kB → 800 kB - 12 KLOC → 20 KLOC
  92. 92. That's all! Questions? Grigory Petrov grigory.v.p@gmail.com https://twitter.com/grigoryvp https://facebook.com/grigoryvp 96

Slides from my talk at AmsterdamJS 08.06, https://amsterdamjs.com Typescript was warmly welcomed with all our developers from C++, Java and C# background. So it was only a question of time for our public JavaScript SDK to be completely rewritten in Typescript from scratch. In my talk I will focus on good and bad things that we experienced during development, and will tell how our initial thoughts played out.

Aufrufe

Aufrufe insgesamt

119

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

5

Befehle

Downloads

0

Geteilt

0

Kommentare

0

Likes

0

×