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