Migrating Web SDK from JS to TS

Grigory Petrov
Migrating Web SDK from JS to TS
Voximplant
AmsterdamJS, Amsterdam
June 8, 2017
https://twitter.com/grigoryvp

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

What was migrated?
- Web SDK for cloud-based telephony
solutions

What was migrated?
solutions
- 13 KLOC, 250 kB

What was migrated?
solutions
- 13 KLOC, 250 kB
- Not a huge deal, yep? :)

What was migrated?
solutions
- 13 KLOC, 250 kB
- Not a huge deal, yep? :)
- Until the dreaded WebRTC creeps in...

Migrating Web SDK from JS to TS

Software Complexity Problem
We want to write code for our ideas.
Not the code for JavaScript.

Migration target
TypeScript
- Created by Microsoft 4 years ago

Migration target
TypeScript
- Created by the author of Delphi and C#

Migration target
TypeScript
- Backward compatible with JavaScript

Migration target
TypeScript
- NPM-based toolchain

Migration target
TypeScript
- NPMYarn-based toolchain

Migration target
TypeScript
- Adds ES6, ES7 ...

Migration target
TypeScript
- Adds ES6, ES7 ES2016 ...

Migration target
TypeScript
- Adds ES6, ES7 ES2016 ... and types!

Why TypeScript?
We already have:
● ES6/7/Babel
● Dart
● Flow
● Elm
● Emscripten
● CoffeeScript, after all! :)

TypeScript
Because it's from Microsoft :)

TypeScript
Because TS is actually JS

TypeScript
And async

TypeScript
And async
And decorators

TypeScript
And async
And decorators
And interfaces

TypeScript
And async
And decorators
And interfaces
And types

Types: a trap for errors
The main purpose of a type system is to reduce
possibilities for bugs in computer programs.
- Wikipedia

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)

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

Types cons and pros
TypeScript: gradual typing
Dynamic typing
- Development speed
automatically
Static typing
- Development speed

Types cons and pros
- Add types only where you need them
Dynamic typing
- Development speed
automatically
Static typing
- Development speed

Types cons and pros
- Fast prototyping and code modifications
Dynamic typing
- Development speed
automatically
Static typing
- Development speed

Types cons and pros
- Fast prototyping and code modifications
- Protect the code only after it was stabilized
Dynamic typing
- Development speed
automatically
Static typing
- Development speed

How we use types at Voximplant
Keep track of method contracts

How we use types at Voximplant
Keep track of method contracts
Insurance for WebRTC changes

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;
}());

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

But it compiles...
What will happen to stack traces?

But it compiles...
Everything will be fine

But it compiles...
We have source maps

But it compiles...
We have source maps
Resulting JavaScript is perfectly readable

What about the legacy like jQuery?

Backward compatibility with JavaScript

Backward compatibility with JavaScript
And types if you download them

Will it be fat and slow?
Nope, plain JavaScript remains the same

Will it be fat and slow?
Nope, plain JavaScript remains the same
Extensions are compiled properly

What about Creative JavaScript?

What about Creative JavaScript?
We have that function-enum-object!

What about Сreative JavaScript?
We have that function-enum-object!
In that case, we need to use the ‘any’ keyword

Gradual transition to TS?
We can compile both JS and TS input

Type inference is always enabled

Type inference is always enabled
Countless errors if you rename .js to .ts

Toolchain?
yarn init .
yarn install typescript
./node_modules/.bin/tsc entrypoint.ts

Are we talking about ‘entrypoint’?
- Yes, ESM modules
- Output is ESM/CJS/AMD/UMD/SystemJS

Where to get types?
"dependencies": {
"@types/jquery": "^2.0.41",
"jquery": "^2.0.41",

And if no types are available?
declare var $;

How about a build system?
Any will do

Any will do
Angular 2 does not use any (plain tsc)

Any will do
Angular 2 does not use any (plain tsc)
We use Webpack

Continuous integration?
One word: npm

Continuous integration?
One word: npm
We use Gitlab CI

Testing?
@suite("mocha-typescript")
class Basic {
@test("should pass on assert")
asserts_pass() {

Testing?
@suite("mocha-typescript")
class Basic {
@test("should pass on assert")
asserts_pass() {
We use ‘intern’, it provides good WebDriver
support

Best things in practice
Gradual typing

Gradual typing
Fast experiments

Gradual typing
Fast experiments
Types are introduced gradually

Compilation errors
Like in C++ 20 years ago:
Cannot find name 'foo'
Cannot find module 'foo'
Property 'bar' does not exist on type 'foo'

You need skilled developers
Otherwise the development becomes painful

Traps for errors
TypeScript pros and cons

Traps for errors
All new things from the JS world

Traps for errors
Gradual transition is possible

Traps for errors
Supported by Microsoft

Traps for errors
npm ecosystem

Traps for errors
npm ecosystem
Traps need to be placed manually

Traps for errors
npm ecosystem
Error messages from hell

Traps for errors
npm ecosystem
You need strong developers

Traps for errors
npm ecosystem
Not everything can be migrated well

Traps for errors
npm ecosystem
Not everything can be migrated well
Not everything has ready-made types

Lessons learned by Voximplant
- Contracts, interfaces, traps

- 3 man-months

- 3 man-months
- 250 kB → 800 kB

- 3 man-months
- 250 kB → 800 kB
- 12 KLOC → 20 KLOC

That's all!
Questions?
Grigory Petrov
grigory.v.p@gmail.com
https://twitter.com/grigoryvp
https://facebook.com/grigoryvp
96

Migrating Web SDK from JS to TS

Recommended

More Related Content

Similar to Migrating Web SDK from JS to TS (20)

Recently uploaded (20)

Migrating Web SDK from JS to TS