1 / 20

North Shore .NET User Group

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

ginny
Download Presentation

North Shore .NET User Group

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. North Shore .NET User Group Our Sponsors

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

  3. Write JavaScript the way you really want to

  4. About Us • Andy • Mark • Aderant

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

  6. Erich Gamma – Building a Large Scale JavaScript Application in TypeScript Larger 200 kLOC Components API Dependency Injection 100% Typescript Small 50 kLOC Modules Classes Promises 10% Typescript Medium 100 kLOC “AMD” Lazy Loaded Contributions 50% Typescript size patterns TypeScript 2011 2012 2013

  7. 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) • 'Javascriptthe good bits' - over 30% is what NOT to do, TypeScripthelps

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

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

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

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

  12. Simple Modules Demo

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

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

  15. Definitely typed • Types for 375+ libraries • Provides nice intellisense of 3rd party libraries, eg: • JQuery • knockout • Angular

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

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

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

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

  20. Erich Gamma – Building a Large Scale JavaScript Application in TypeScript Larger 200 kLOC Components API Dependency Injection 100% Typescript Small 50 kLOC Modules Classes Promises 10% Typescript Medium 100 kLOC “AMD” Lazy Loaded Contributions 50% Typescript size patterns TypeScript 2011 2012 2013

More Related