North Shore .NET User Group
Our Sponsors
North Shore .NET User Group
Check out our new web site
http://northshore.netusergroup.org.nz/
Next Meeting
http://northshore.netusergroup.org.nz/Meeting/Meetup/?id=M20140327
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
TypeScript
• JavaScript for large applications
• A superset of JavaScript (you're already doing TypeScript!) (no big
migrate)
• 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
helps
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
Disadvantages
• 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
• BUT
• Open and too flexible
• Can add to an internal module from any file
• Leads to code organisation rot.
Simple Modules
Demo
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
Debugging
• 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