- The document discusses transitioning an existing JavaScript codebase to add types using TypeScript in order to make the code safer, more structured, and easier to understand and maintain. - It provides examples of defining TypeScript interfaces for existing "freestyle objects" and refactoring the code to use the typed interfaces. - After 18 days, 70% of the code was typed, showing the benefits of adding types for readability, safety, and refactoring ability even when transitioning existing code.

1. Noam Katzir
21 days to production
noamk@wix.com
when you don’t know the code

2. New
to the
project

3. 2 weeks
New
to the
project
I learn a piece of code
I get it
I write a dummy feature

4. Here’s the Code.
Make it Work. You’ve got 21 days.
2 weeks
production

5. Multilingual
Here’s the Code.

6. iframe

7. iframe
Wix Data
(Corvid databases API)

8. Wix StoresWix Stores
Wix Data
(Corvid databases API)
Wix Stores
Verticals
Get data
structures
iframe

9. Wix StoresWix Stores
Wix Data
(Corvid databases API)
Wix Stores
Verticals
Get data
structures
Translate
iframe

10. Node.js

11. Tests, right?

12. data
structure
Test
assert...

13. ▪ Lambdas and closures everywhere
▪ Massive usage of Object literal
▪ Unsafe features like “this”
▪ Weak types
▪ Mutable state
▪ Quick and dirty syndrome
▪ There is no null/undefined safety
Javascript is freestyle

14. Javascript is freestyle
A lot of people
❤ it.

15. Javascript is freestyle
A lot of people
❤ it.
When they
leave, you get
stuck.

16. TDD
is not enough to figure out
a JS codebase.

17. Tests
Describe the
Business flow
Explain how
to use
Safe to
refactor
Provide
documentation

18. Encapsulation
of the Business
domain
Safety / structure
enforcement
Tests
Describe the
Business flow
Explain how
to use
Safe to
refactor
Provide
documentation

19. Encapsulation
of the Business
domain
Safety / structure
enforcement
Describe the
Business flow
Explain how
to use
Safe to
refactor
Provide
documentation
Types

20. 2 weeks
production
I’ll add
types

21. Objects
with Types
Freestyle
Objects

22. 1 Objects
with Types
Freestyle
Objects
*Tests & test data generator can help
Derive the top level
domain objects*

23. 1 Objects
with Types
Freestyle
Objects
Create
Typescript interfaces
with the same
properties.
domain objects*

24. 1 Objects
with Types
Freestyle
Objects
Scan the edges.
What does this
look like?
2

25. //file 1
const schemaDescriptor = {
name: 'noam',
writable: true,
displayName: 'Noam',
baseUrl: 'http://www.wix.com',
fields: []
}
calcSomethingFor(schemaDescriptor);
//file 2
function calcSomethingFor(schema) {
.....
}
Freestyle
Objects

26. //file 1
const schemaDescriptor = {
name: 'noam',
writable: true,
displayName: 'Noam',
baseUrl: 'http://www.wix.com',
fields: []
}
calcSomethingFor(schemaDescriptor);
//file 2
function calcSomethingFor(schema) {
.....
}
//file 1
export type SchemaDescriptor = {
name: string;
writable: boolean;
displayName: string;
baseUrl: string;
filterKey?: FilterField;
fields: SchemaField[];
}
//file 2
const schemaDescriptor: SchemaDescriptor = {
name: 'noam',
writable: true,
displayName: 'Noam',
baseUrl: 'http://www.wix.com',
fields: []
}
calcSomethingFor(schemaDescriptor);
//file 3
function calcSomethingFor(schema: SchemaDescriptor) {
.....
}
Objects
with Types
Freestyle
Objects

27. import {WixCodePage} from '../WixCodePage';
export const factory = component => {
const getIframeContainer = () =>
component.find('[data-hook="wix-code-wrapper"]');
const getWixCodePage = () =>
component.find(WixCodePage);
const isIframeDisplayed = () =>
getIframeContainer().length > 0;
const getHeader = () => component.find('[data-
hook="page-header"]');
return {
getIframeContainer,
isIframeDisplayed,
getWixCodePage,
getHeader
};
};
Freestyle

28. import {WixCodePage} from '../WixCodePage';
export const factory = component => {
const getIframeContainer = () =>
component.find('[data-hook="wix-code-wrapper"]');
const getWixCodePage = () =>
component.find(WixCodePage);
const isIframeDisplayed = () =>
getIframeContainer().length > 0;
const getHeader = () => component.find('[data-
hook="page-header"]');
return {
getIframeContainer,
isIframeDisplayed,
getWixCodePage,
getHeader
};
};
import {WixCodePage} from '../WixCodePage';
export interface PageComposerTestValidator {
getIframeContainer(): ReactWrapper;
getWixCodePage(): ReactWrapper;
isIframeDisplayed(): boolean;
getHeader(): ReactWrapper;
}
class DefaultPageComposerTestValidator implements
PageComposerTestValidator {
constructor(private readonly component: ReactWrapper,
private readonly reactComponent: React.Component) {}
getIframeContainer(): ReactWrapper {
return this.component.find('[data-hook="wix-code-wrapper"]');
}
getWixCodePage(): ReactWrapper {
return this.component.find(reactComponent);
}
isIframeDisplayed(): boolean {
return this.getIframeContainer().length > 0;
}
getHeader(): ReactWrapper {
return this.component.find('[data-hook="page-header"]');
}
}
with TypesFreestyle

29. 1 Objects
with Types
Freestyle
Objects
Read again.
Define new
domain objects.
Refactor
2 3

30. 18 days later...
70% of code is typed!
productionNew
to the
project
Let’s
add
types!

31. Types are great.
Cheap
to do

32. Types are great.
Why are
you NOT
using
them?

33. Thank You
noamk@wix.com

34. Q&A
noamk@wix.com