Building a large scale
JavaScript application
in TypeScript
Alexandru Dima
Microsoft
What do we build?
Web Standards based
Developer Tools and Cloud Services
90%
http
10%
The Road to Monaco
The Road to Monaco
We enjoy programming in JavaScript
Pains
Organizing a large and growing code base
Need to come up with “compensating” patterns for classes and
modules/namespaces
Refactoring JavaScript code is difficult
“JavaScript code ‘rots’ over time”
“Writing JavaScript code in a large project is like carving code in
stone”
Describing APIs
Keep the description in sync with the implementation
TypeScript to the rescue…
Starts with JavaScript
All JavaScript code is TypeScript code, simply copy and paste
All JavaScript libraries work with TypeScript
Optional static types, classes, modules
Structural typing and type inference
Enable scalable application development and excellent tooling
Zero cost: Static types completely disappear at run-time
Ends with JavaScript
Compiles to idiomatic JavaScript
Runs in any browser or host, on any OS
Demo
The Road to Monaco
Code Organization Challenge
Our modules were global variables and thereby open
undisciplined name space contributions…
Name spaces have no relationship to the actual files on disk
Renaming files or name spaces is no fun…
You can have cyclic dependencies
without noticing…
Growing Pains: Managing dependencies
…our dependency graph was such a mess that each area had
a dependency on just about every other area.
-- Ashamed Developer
Growing Pains: Order of scripts
Growing Pains: Order of scripts
Growing Pains: Eager script loading
AMD to the rescue…
AMD = Asynchronous Module Definition
A file is a module.
A module declares dependencies and exports.
define('id', ['moduleA'], function(moduleA) {​
// code goes here
return {​
// exports
}​
;
});
TypeScript supports External Modules
Two different module types
CommonJS – popular for NodeJS
AMD – popular in browsers
JS code differs depending on the module type
Sharing code between AMD and CommonJS is difficult
TypeScript is module type agnostic
Uses compiler flag to generate different JS code
Demo
Post-AMD Migration
It feels like fresh showered.
Self contained modules, no
more cycles, no more globals,
clean file system structure.
--Happy Developer
AMD Benefits – CSS dependencies
Pain: global CSS files
Want to split into multiple files
Want to keep the CSS close to the JS that needs it
Want to express CSS dependencies in code
AMD loader plugins
We implemented a css loader plugin, and TypeScript supports a pragma
to generate non-TypeScript dependencies in the JavaScript code
AMD Benefits – Lazy Loading
vs/languages/csharp.contribution
modesExtensions.registerMode(​
'vs.languages.csharp', ['text/x-csharp'],​
'vs/languages/csharp', 'CSMode'
);
vs/languages/csharp
export class CSMode {
constructor(…) {​
...​
}​
// lots of code ...
}​
AMD Benefits – Bundles
Optimize # of server requests
Bundle related modules together into one file
Optimize the transferred size
Load only modules that must be executed in the startup path
We use
r.js: http://requirejs.org/docs/optimization.html
UglifyJS: https://github.com/mishoo/UglifyJS
The Road to Monaco
Towards 100% TypeScript
Migration happened out of developer will
Migration is code clean-up but real work…
Velocity around 300 LOCs per hour
Team specific rules
No implicit ‘anys’
No missing return types
JSDoc comments
Towards 100% TypeScript
In JavaScript, you really are at the mercy of your
ability to spell:
delete this.markers[range.statMarkerId];
Soon enough, I realized how inconsistent I was, the
same data was flowing around in at least 3 different
formats...
Components packaged as .js & .d.ts
TypeScript language services
We compile against a definition file, run
against compiled version
Our partners
We package our modules to a set of .js files
We generate a .d.ts describing public API
Write lots of JSDoc 
Services & Dependency Injection
TypeScript Retrospective
We were on the bleeding edge…
… but we expected it and had plenty of band aid
We would do it again, the benefits outweigh the pains
confidence, refactoring agility, tooling, fun
From the beginning
use TypeScript
use external modules
Links
Try us out for 1hr, no strings attached
http://azure.microsoft.com/en-us/services/websites/
See more videos about Monaco
http://channel9.msdn.com/Series/Visual-Studio-OnlineMonaco
Try TypeScript
http://www.typescriptlang.org/Playground