TypeScript: JavaScript that scales (Kostas Stergiou) - GreeceJS #22

2018 Image Access Corp. All rights reserved WARNING: Once you go with TypeScript you won't go back to plain old JavaScript ever again; if unsure leave now
TypeScript
JavaScript that scales.
Do you feel lucky to have skipped the dreadful Java/C# legacy stuff?
Costas Stergiou, www.ImageAccessCorp.com
www.typescriptlang.org

Introduction
Who are we? Our main product
Document Capture Software
www.ImageAccessCorp.com

Why does it matter who we are and who
our customers are?
• <sales_pitch_alert> Well, we are kind of proud <sales_pitch_alert/>
• You need to understand the perspective of what you are about to hear.
It's important to know:
– who is one talking to you and what he has done in his dev-lifetime
– what are the real-life, business problems we solved
– Who are the customers that trust us?
• These same rules should apply for everything you read or hear on the
Internet

Presentation agenda
• The challenge we faced
• The problem with JavaScript
• TypeScript as the rescue
• Quick facts about TypeScript
• Why would any of you today care about TypeScript

Our challenge: rewrite the client in HTML5
• Current Client written in Java, ~300K LOC, 1200 classes in 600 source files
• We needed an application running in the browser, not a web-page
• Enterprise-level requirements: performance, scalability, future-proof
• Also does native stuff (image processing, native APIs) not doable within
the browser
Team challenges
• No prior serious experience with 'modern' web development, lots of
experience in 'legacy' development
• JavaScript, JavaScript & JavaScript
• JavaScript EcoSystem …

JavaScript, not the tool for the job
Quotes from an interview Brendan Eich (creator of JavaScript):
• JavaScript was originally developed for applications with a few hundred
lines of code! Netscape, 1995
• … the idea was to make it a complementary scripting language to go
with Java, with the compiled language …and we were pushing it as a
little brother to Java, as a complementary language like Visual Basic was
to C++ in Microsoft’s language families at the time
• … to make something that Web designers, people who may or may not
have much programming training, could use to add a little bit of
animation or a little bit of smarts to their Web forms and their Web
pages.

JavaScript Ecosystem
• It took 3-6 months of researching
• It took a lot of internal discussions
to see through the 'hype'
• We tested several 'frameworks',
'libraries', 'technologies', etc to
understand what the problem is
each one is trying to solve
• Best solution seemed the Google
Closure library

Hackernoon.com: 5 Best JavaScript
Frameworks in 2017

…and here comes TypeScript
1. Maintainability
2. Scalability (understanding intent)
3. Developer Productivity
– Code navigation
– Bug prevention
– Code 'discoverability' & refactoring
4. Performance (WebAssembly?)
"Always code as if the guy who ends up
maintaining your code will be a violent
psychopath who knows where you live."
"Any fool can write code that a computer
can understand. Good programmers write
code that humans can understand." Kent Beck
“Writing dumb code is hard

Why types matter?
What is wrong with this?function add(a, b){
return a + b;
}
add(2,3);
add(2, "3");
add("Java", "Script");
add("ES", 6);
add("ES", "6");
add(true, 6);
add(false+1, true-null);
add(0, undefined);
add("0", undefined);
add({}, 1);
add(1, {});
add(Array, 0);
add(1);

This is what a JS engine has to do

TypeScript "saved our day"
• Confidence to start a large project
• Developer tools to support a team (refactor, debugging, etc)
• Easy "migration" from an existing object-oriented code base
• For the past 2 years, it proved the best decision we made
TypeScript…a language that is trying its best
to help developers not write "bad" code

TypeScript facts
– "Javascript that Scales." (https://www.typescriptlang.org/)
"Typescript is a superset of JavaScript that compiles to plain
JavaScript"
– Developed by Microsoft (Anders Hejlsberg)
– Open source
– Written itself in TypeScript
– Transpiles to JavaScript
– Google withdraw AtScript in 2014 in favor of TypeScript

TypeScript Goals
1. Statically identify constructs that are likely to be errors.
2. Provide a structuring mechanism for larger pieces of code.
3. Impose no runtime overhead on emitted programs.
4. Emit clean, idiomatic, recognizable JavaScript code.
5. Produce a language that is composable and easy to reason about.
6. Align with current and future ECMAScript proposals.
7. Preserve runtime behavior of all JavaScript code.
8. Avoid adding expression-level syntax.
9. Use a consistent, fully erasable, structural type system.
10. Be a cross-platform development tool.
11. Do not cause substantial breaking changes from TypeScript 1.0.

Why would I want it? (1/2)
function GreeceJSBookingApi(config) {
/* noone will ever know what I intended to write here */
}
var bookIt = GreeceJSBookingApi({monitors: 4, isHuge: true, roomShape: "oval"});
/**
* The GreeceJSBookingApi is cool and you have to use it
* @param {Object} config A bunch of options I dreamt of today
* @returns {Object} the results of my fancy API
*/
1. How do I document the config properties or the return value?
2. How do I make the config object optional?
3. How do I maintain and enforce the above?

/**
* The GreeceJSApi is cool and you have to use it
* @param {Object} config A bunch of option I need today
* @returns {Object} the results of my fancy API
*/
function GreeceJSBookingApi(config?: GreeceJSBookingApiConfig):
GreeceJSBookingApiResult {
/* noone will ever know what I intended to write here */
}
interface GreeceJSBookingApiConfig {
/**
* the number of monitors I want to have in the room
*/
monitors: number;
/**
* Whether I want to reserve the huge room
*/
isHuge: boolean;
/**
* What arrangement of chairs do I need?
*/
roomShape: string;
}
interface GreeceJSBookingApiResult {
/**
* The date & time of the booking
*/
bookingDate: Date;
/**
* whether I need to confirm it the previous day
*/
needConfirmation: boolean;
/**
* an array of names & phone numbers of organizers
* I may call if something goes wrong
*/
contactPhones: [{name: string, number: string}];
}
Why would I want it? (2/2)

What does TypeScript has over JavaScript?
• Class system (similar to ES2015), with types in constructor and properties
getters/setters
• Interfaces (erased from runtime)
• Own module system (import/export), similar to ES2015 (CommonJS,
AMD, system, umd)
• Optional types
• Decorators (similar to annotations)
• Type system (compile type only, structural typing and type inference)
• Generics
• Promises (similar to ES2015)
• async/await support (similar to ES2016)
• Outputs es3, es5, es2015, es2016, es2017 code
• Solid support (VSCode), debugging and transpiling tools

TypeScript EcoSystem
• Community
– 9th most popular lang in SO in 2017
– 3rd mose loved lang is in 2017
– DefinitelyTypes (e.g. npm install
@types/react)
– SO: Kotlin, R and TypeScript among least
disliked programming languages (people
dislike Perl, Delphi, VBA, objective-c, c#,
java)
• Frameworks
– Angular, Ember, Dojo2, RxJS
• Tool Support
– VS, IntelliJ, Sublime, Atom, Ecliplse

Getting Started
www.typescriptlang.org
$ npm install –g typescript
$ mv mycode.js mycode.ts
$ tsc mycode.ts
… the more lines of code a human
writes, the more inevitable it
becomes to misspell a property,
assume the parent of a nested
object to always exist, or to use a
non-standard error object.

“Debugging is twice as hard as writing the code in the first place.
Therefore, if you write the code as cleverly as possible, you are, by
definition, not smart enough to debug it.”
Brian Kernighan
Rule of thumb for estimating the completion time of software projects:
• 1/3 time for planning
• 1/6 time for coding
• 1/4 time for component tests
• 1/4 time for system test with all components in hand
50% of time goes to testing & debugging
from The 'Mythical Man-Month' by Frederick P. Brooks, Jr.

Questions

TypeScript: JavaScript that scales (Kostas Stergiou) - GreeceJS #22

More Related Content

Similar to TypeScript: JavaScript that scales (Kostas Stergiou) - GreeceJS #22 (20)

More from GreeceJS (19)

Recently uploaded (20)

TypeScript: JavaScript that scales (Kostas Stergiou) - GreeceJS #22