1. Building a large scale JavaScript application in TypeScript Alexandru Dima Microsoft

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

10. http90%10%

11. The Road to Monaco patterns TypeScript size

12. The Road to Monaco patterns TypeScript size

13. We enjoy programming in JavaScript

15. 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

16. 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

17. Demo

18. The Road to Monaco patterns TypeScript size

19. 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…

20. 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

21. Growing Pains: Order of scripts

23. Growing Pains: Eager script loading

24. 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​ }​; });

25. 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

26. Demo

27. Post-AMD Migration It feels like fresh showered. Self contained modules, no more cycles, no more globals, clean file system structure. --Happy Developer

28. 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

29. 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... ​ } ​

30. 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.htmlhttp://requirejs.org/docs/optimization.html UglifyJS: https://github.com/mishoo/UglifyJShttps://github.com/mishoo/UglifyJS

31. The Road to Monaco patterns TypeScript size

32. 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

33. 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...

34. 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

35. Services & Dependency Injection

36. 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

37. 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-Online- Monacohttp://channel9.msdn.com/Series/Visual-Studio-Online- Monaco Try TypeScript http://www.typescriptlang.org/Playground