1 / 20

JavaScript Architecture

http://35z.us/geotspp. JavaScript Architecture. Introduction to Scalable Enterprise Level JavaScript Application Architecture with Microsoft's TypeScript - Presented by Michael Kappel. Michael Kappel, MCPD. https://www.mcpvirtualbusinesscard.com/VBCServer/MichaelKappel/profile.

nessa
Download Presentation

JavaScript Architecture

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. http://35z.us/geotspp JavaScript Architecture Introduction to Scalable Enterprise Level JavaScript Application Architecture with Microsoft's TypeScript - Presented by Michael Kappel

  2. Michael Kappel, MCPD https://www.mcpvirtualbusinesscard.com/VBCServer/MichaelKappel/profile http://MichaelKappel.com/

  3. What we are going to cover • What is TypeScriptand 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

  4. Geotrackable QR Codes

  5. GeotrackableGeocoins

  6. Geotrackable.org & Geotrackable.mobi http://Geotrackable.org http://Geotrackable.mobi

  7. Coordinate Converter http://geotrackable.mobi/CoordinateConverter/

  8. What is TypeScript? • TypeScript is a syntactic sugar for JavaScript. • TypeScriptsyntax 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

  9. TypeScript, DART, & CoffeeScript Micorsoft / Open Source Google Jeremy Ashkenas / Open Source http://www.dartlang.org/ http://www.typescriptlang.org/ http://coffeescript.org/ Open Source http://typescript.codeplex.com/ Open Source https://code.google.com/p/dart/ Open Source https://github.com/jashkenas/coffee-script/

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

  11. TypeScript Language Features • Type Inference • Type Annotations • Ambient Declarations • Classes • Modules • Interfaces • Enumerations var node = document.getElementById('test'); node.style.color= '#0f0'; varlink:HTMLAnchorElement = <HTMLAnchorElement>document.getElementById('test'); link.href = 'http://geotrackable.org'; declare varExternalModule: any; ExternalModule.anything = 'value'

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

  13. Classes export class PublicKeyInfo implements Interfaces.IPublicKey { private publicKey: string; constructor(publicKey: string) { this.publicKey = publicKey; } get PublicKey(): string { return this.publicKey; } }

  14. Interfaces export interface IStringable { ToString(): string; } export interface ICoordinateConversions extends IStringable { ToCoordinateDecimal(): ICoordinateDecimal; ToCoordinateDms(): ICoordinateDms; ToCoordinateDm(): ICoordinateDm; }

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

  16. Definition Files • https://github.com/borisyankov/DefinitelyTyped/tree/master/jquery • /// <reference path="../jquery.d.ts" /> • /// <reference path="../google.maps.d.ts" />

  17. JavaScript Scope And Closures module 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(); } }

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

  19. Helpful Links • Language Specification PDF 35z.com/typescript • TypeScriptvs Dart http://youtu.be/5AqbCQuK0gM • Contact Me http://MJK.tel • PowerPointhttp://35z.us/geotspp • Like Software Development Community on Facebook • https://www.facebook.com/pages/Software-Development-Community/205277332916057 • Like Geotrackable on Facebook https://www.facebook.com/Geotrackable

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

More Related