Building a large scale JavaScript application in TypeScript Alexandru Dima Microsoft

What do we build? Web Standards based Developer Tools and Cloud Services

http90%10%

The Road to Monaco patterns TypeScript size

The Road to Monaco patterns TypeScript size

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 patterns TypeScript size

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: 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: UglifyJS:

The Road to Monaco patterns TypeScript size

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 See more videos about Monaco Monacohttp://channel9.msdn.com/Series/Visual-Studio-Online- Monaco Try TypeScript