Powerpoint slides - North Shore .NET User Group

North Shore .NET User Group
Our Sponsors
North Shore .NET User Group
Check out our new web site
Next Meeting
Write JavaScript the way
you really want to
About Us
• Andy
• Mark
• Aderant
Our Project
• Web based Case and ERP. Customisable by the customer
• 67 KLOC script so far
• A large project (9+4+7=20 devs for 18-24 months)
• Quite a few grads, some with 3 years experience, 4ish seniors
• Staff familiar with OO and C#
• Knockout, Kendo UI, JQuery, MVC, Web API
Erich Gamma –
Building a Large Scale JavaScript Application
in TypeScript
• JavaScript for large applications
• A superset of JavaScript (you're already doing TypeScript!) (no big
• Optional Static Types, OO and Modules
• Announced 2012, Anders Hejlsberg
• Open source (written in TypeScript)
• 'Javascript the good bits' - over 30% is what NOT to do, TypeScript
Advantages of TypeScript
• Easy to debug
• ES6 now (classes, modules, lambdas)
• Produces clean idiomatic JavaScript
• Tools - VS 2012/2013, R#, Eclipse, Sublime, vi etc. etc.
• TSLint
• Extra compile step (“Transpile”)
• Source maps to debug, Personal preference is to debug JS
• avoids TS evaluation and the this versus _this problems
• Browser dev tools are JS environments not TS
• Can't evaluate TS code, eg if it has types.
• ThirdParty .d.ts files, find them, sometimes correct them
Features. Don’t talk , demo.
• Type annotations
• Lambdas (better this)
• Compile time type checking
• Enums
• Interfaces (API, option bags, JSON, external libraries etc.)
• Classes
• Inheritance
• Generics
• Modules
Internal Modules
• Simple to get started
• Implements module pattern
• provides namespacing
• can put entire application in one global
• Open and too flexible
• Can add to an internal module from any file
• Leads to code organisation rot.
Simple Modules
External Modules
• Supports AMD (Browser) and CommonJS (Node)
• Common and easier syntax.
• Structured: 1 file = 1 module
• Use 'export=' syntax to make consumption cleaner.
• Demo...
Bundling Modules
• Typescript compiler can bundle files.
• Not external modules.
• Can also use ASP.Net bundling - it's just JS
• External Modules
• Require Optimization tool can combine external modules
• Creates a single minified JS file.
• Use require to get other JS modules on demand.
Definitely typed
• Types for 375+ libraries
• Provides nice intellisense of 3rd party libraries, eg:
• JQuery
• knockout
• Angular
Create Your Own Type Defs
• Aderant uses an oData query service
• Model our data to produce:
• nHibernate & Entity Framework maps
• C# and Typescript DTO's
• Show our query service type defs (demo)
• Typescript meets oData (demo)
• Generate type definitions from oData metadata.
• Why? Intellisense and compile time checking
• Pick up typos early in the dev cycle
• Browser dev tools are JS environments not TS
• Can't evaluate TS code, eg if it has types.
• Personal preference is to debug JS
• Avoids TS evaluation and the this versus _this problems
• Debugging in VS (Not us)
• Demo Chrome & IE with source maps.
Unit Testing
• Initially we started writing our tests in Javascript
• Now write all our Unit Tests in Typescript.
• Use QUnit, QUnit-promise, Mockjax.
• All these have type definitions available.
• Run unit tests on each CI build
Team Foundation Server
• Source Control
• js, js.map, and .d.ts files not checked in.
• Builds
• Typescript is compiled as part of Solution/Project
• If not using MS Build one can use the NPM package
• Grunt
• etc.
Erich Gamma –
Building a Large Scale JavaScript Application
in TypeScript

similar documents