JavaScript Architecture
description
Transcript of JavaScript Architecture
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