z

JavaScript ArchitectureIntroduction to Scalable Enterprise Level JavaScript Application

Architecture with Microsoft's TypeScript

- Presented by Michael Kappel

http://35z.us/geotspp

z

Michael Kappel, MCPDhttps://www.mcpvirtualbusinesscard.com/VBCServer/MichaelKappel/profile

http://MichaelKappel.com/

z

What we are going to cover• What is TypeScript and why I chose it for Geotrackable.mobi• TypeScript- vs - DART - vs - CoffeeScript• TypeScript Language Features• Jump into Code, look into Architecture• Some ways to avoid common issues• Wrap-up and give away stuff

z

Geotrackable QR Codes

z

Geotrackable Geocoins

z

Geotrackable.org & Geotrackable.mobi

http://Geotrackable.org http://Geotrackable.mobi

z

Coordinate Converterhttp://geotrackable.mobi/CoordinateConverter/

z

What is TypeScript?• TypeScript is a syntactic sugar for JavaScript. • TypeScript syntax is a superset of Ecmascript 5 (ES5) syntax• TypeScript syntax includes several proposed features of Ecmascript 6

(ES6)

• Top 10 reasons why TypeScript will be widely adopted• http://www.pursuitofgreatdesign.com/2012/10/top-10-reasons-why-typescript-will-be.html

z

TypeScript, DART, & CoffeeScript

Micorsoft / Open Source Google Jeremy Ashkenas / Open Source

Open Sourcehttp://typescript.codeplex.com/

Open Sourcehttps://code.google.com/p/dart/

Open Sourcehttps://github.com/jashkenas/coffee-script/

http://coffeescript.org/http://www.dartlang.org/http://www.typescriptlang.org/

z

CoffeeScript, JavaScript, TypeScript, DART, and ECMA Script 6 Comparison Chart

http://smthngsmwhr.wordpress.com/2013/02/25/javascript-and-friends-coffeescript-dart-and-typescript/JavaScript and Friends: CoffeeScript, Dart and TypeScript

z

TypeScript Language Features• Type Inference

• Type Annotations

• Ambient Declarations

• Classes• Modules• Interfaces• Enumerations

var link:HTMLAnchorElement = <HTMLAnchorElement>document.getElementById('test');link.href = 'http://geotrackable.org';

var node = document.getElementById('test');node.style.color = '#0f0';

declare var ExternalModule: any;ExternalModule.anything = 'value'

z

Enumerations export module Enumerations { //Step 1 - Geographic coordinate conversion Types// //http://en.wikipedia.org/wiki/Geographic_coordinate_conversion// export enum DirectionTypes { North, East, South, West } export enum LatitudeLongitudeTypes { Latitude, Longitude } }

z

Classesexport class PublicKeyInfo implements Interfaces.IPublicKey {

private publicKey: string;

constructor(publicKey: string) { this.publicKey = publicKey; }

get PublicKey(): string { return this.publicKey; }}

z

Interfacesexport interface IStringable {

ToString(): string;

}

export interface ICoordinateConversions extends IStringable {

ToCoordinateDecimal(): ICoordinateDecimal;

ToCoordinateDms(): ICoordinateDms;

ToCoordinateDm(): ICoordinateDm;

}

z

Lambda Expressions export interface IEvent { add(listener: () => void ): void; remove(listener: () => void ): void; trigger(...a: any[]): void;}

z

Definition Files• https://github.com/borisyankov/DefinitelyTyped/tree/master/jquery

• /// <reference path="../jquery.d.ts" />

• /// <reference path="../google.maps.d.ts" />

z

JavaScript Scope And Closuresmodule Geo.Location { export function GetPosition() { navigator.geolocation.getCurrentPosition((position) => { this.GotPosition(new Geo…..Info(position.coords.latitude, position.coords.longitude)); }, (err) => { alert('navigator.geolocation.getCurrentPosition ERROR ' + err.message); }); } function GotPosition(position:Geo.CoordinateConverter.Interfaces.ICoordinateDecimal) { ViewModel.CoordinateInput = position.ToString(); }}

z

Avoiding Problems• If Visual Studio becomes unresponsive oven up the .ts file you last made

changes to in Notepad and remove all the code. Removing code should fix visual studio so you can go back in and re-add it.• If Visual Studio lags adjust Automatic Formatting

Tools->Options->Text Editor->TypeScript->Formatting

z

Helpful Links• Language Specification PDF 35z.com/typescript• TypeScript vs Dart http://youtu.be/5AqbCQuK0gM• Contact Me http://MJK.tel• PowerPoint http://35z.us/geotspp

• Like Software Development Community on Facebook• https://www.facebook.com/pages/Software-Development-Community/2052773329

16057

• Like Geotrackable on Facebook https://www.facebook.com/Geotrackable

z

Geocaching

http://www.opencaching.com/en/#!geocache/OXZTAHD