TypeScriptDevSum 2013Micael Herkommer
Why should I care of yet another language?This session shows what pains are addressedand what you can benefit from, with a...
Agenda• JavaScript?• Server-side vs Client-side• Frameworks• Ordning och reda med TypeScript• Kom igång med TypeScript• Va...
Micael Herkommer• Webbutveckling sedan klassisk ASP• Backend och integrationsfokus• WPF• ALM/TFS• Tidigare JavaScript-mots...
Utveckling, mest Webb• Kort tillbakablick– ASP, ASP.NET, MVC, MVVM• Mönster och ramverk• JScript• JavaScript är ingen ny f...
Frameworks• jQuery, jQueryUI, jQueryMobile• Node.js (skalbar webbserver)– SignalR (skalbar webbserver, C#)• Knockout (MVVM...
• CommonJS• RequireJS (Module loader)• AMD (Asynchronous Module Definition)• Modernizr (feature detection)• ExpressJS (MVC...
Backend vs Frontend Developers• Normally don’t mix and play• Flytande gränser idag• jQuery banade väg• Kundernas krav på b...
JavaScript to the rescue• Alla kan, alla kan lära• Funkar i alla webbläsare och annatmen...• Dynamiskt och okompilerat• Så...
Nästa version av JavaScript…• Många vill ersätta JavaScript– CoffeeScript– DART (Google)• Allmän trend– LESS, SASS m.fl. (...
TypeScript gör entre hösten 2012• Microsoft upplever Pain• Exempelvis TS2012 och Office Live 365• Eric Gamma, Anders Hejls...
TypeScript Definition:• TypeScript is a language for application-scaleJavaScript development.• TypeScript is a typed super...
Vad gör TypeScript?• Accepterar all JavaScript• Kompilerar till ren JavaScript• Assisterar oss att skriva bättre JavaScript
Vad gör TypeScript INTE?• Lägger inte till någon egen tolkning ellerannan typ av meta-data eller kod, bara renJavaScript.
Så varför använda TypeScript?• Mindre JavaScript kod ger ingen större fördelatt använda TypeScript• Större projekt och mån...
Invändningar• Jo, visst men vi har liknande verktyg idag:– jsLint– jsHint– Google Linter (Closure Compiler)– m.fl.
Stora fördelen (enligt mig)• Hålla ordning på alla JavaScript-ramverk är klurigt• TypeScript ger mig Intellisense i VS2012...
Hur?• Kommer du ihåg den gamla TLB filerna?• Type Definitions (*.d.ts)– Jmf. header files i C/C++• jQuery och Node.js• Imp...
Installera TypeScript• Ladda ner: http://www.microsoft.com/en-us/download/details.aspx?id=34790• VS2012 PlugIn• NPM, Node ...
TypeScript features• Optional Type System (Type Inference)• Modules• Interfaces• Classes• Inheritance• Lambda (Arrow Synta...
Type Inference• Kompilatorn använder type inference för attautomatiskt hitta rätt datatyp att använda, omdet inte lyckas a...
Kompilatorn• Genererar en helt vanlig *.js fil• Option: generera type def file *.d.ts• Default EC5• Option EC3OBS: TypeScr...
Kodexempel:• Variabler och deklarationer• Intellisense och Type Inference• Frameworks• Lambda• Klasser, arv och konstrukto...
Programstruktur• Source file structure– implementation• module elements– module» modules• statement• function declaration•...
Variabler och deklarationer• Type Decoration• Annotations• Optional (default is any)var svar s: string
Intellisense och Type Inference
Frameworks• Type Definitions
Lambda =>• Scope: this• Slipper använda function keyword• Snyggare (kortare) callbacks och inline
Klasser, arv och konstruktor• Slipp skapa en massa JavaScript kod för atthålla reda på prototyp• Constructor• Super• Scope
Funktioner
Interface• Definiera komplexa typer enkelt• Få stöd av IDE Intellisense• Implements• Funkar fint på alla typer
Moduler (externa och interna)• Jmf. C# Namespaces• Module = sets named internal module• Export = accessable outside the mo...
file4.ts
Dependencies(AMD, CommonJS, RequireJS)• Moduler kan extendas, delas mellan filer ochrefereras/// <reference path=“xxx.ts” ...
Sammanfattning• TypeScript är JavaScript för C# utvecklare!• JavaScript är överallt och oerhört kraftfullt• C# strukturera...
Kom igångInstallera via Node NPM• $ sudo npm install -g typescriptLadda ner TypeScript för VS2012• http://www.microsoft.co...
Rekommenderade länkarTypeScript offical home page, including specification, samples and play area• http://www.typescriptla...
Tack för din tid!Happy DevSum 2013!@herkommer
TypeScript DevSum 2013
TypeScript DevSum 2013
Upcoming SlideShare
Loading in …5
×

TypeScript DevSum 2013

4,693 views
4,582 views

Published on

Slides from my talk at DevSum 2013 in Stockholm 29th of May 2013.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,693
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

TypeScript DevSum 2013

  1. 1. TypeScriptDevSum 2013Micael Herkommer
  2. 2. Why should I care of yet another language?This session shows what pains are addressedand what you can benefit from, with a verysmall investment of your time and skill set.Anyone using JavaScript today and is gettingfrustrated in trying to keep order in an evergrowing heap of JavaScript will love the simpleidea behind TypeScript!
  3. 3. Agenda• JavaScript?• Server-side vs Client-side• Frameworks• Ordning och reda med TypeScript• Kom igång med TypeScript• Varför behöver jag TypeScript, på riktigt?• Get going, it is great fun!
  4. 4. Micael Herkommer• Webbutveckling sedan klassisk ASP• Backend och integrationsfokus• WPF• ALM/TFS• Tidigare JavaScript-motståndare
  5. 5. Utveckling, mest Webb• Kort tillbakablick– ASP, ASP.NET, MVC, MVVM• Mönster och ramverk• JScript• JavaScript är ingen ny fågel, utan en Fenix!• Behov av snabb repsons och flexibel UX• SPA (Single Page Applications)
  6. 6. Frameworks• jQuery, jQueryUI, jQueryMobile• Node.js (skalbar webbserver)– SignalR (skalbar webbserver, C#)• Knockout (MVVM)• AngularJS (SPA MVC)• Backbone (SPA MVP JSON)• MongoDB (NoSQL)• D3 (Data-Driven-Documents)
  7. 7. • CommonJS• RequireJS (Module loader)• AMD (Asynchronous Module Definition)• Modernizr (feature detection)• ExpressJS (MVC Server-side)och många många fler…
  8. 8. Backend vs Frontend Developers• Normally don’t mix and play• Flytande gränser idag• jQuery banade väg• Kundernas krav på bättre UX• Svårt att lyckas utifrån endast Server-side
  9. 9. JavaScript to the rescue• Alla kan, alla kan lära• Funkar i alla webbläsare och annatmen...• Dynamiskt och okompilerat• Så lätt att komma igång och se resultat snabbt• Oerhört svårt att underhålla över tid
  10. 10. Nästa version av JavaScript…• Många vill ersätta JavaScript– CoffeeScript– DART (Google)• Allmän trend– LESS, SASS m.fl. (pre-compilers)• ECMAScript (EC3, EC5 och EC6)– Open Standard
  11. 11. TypeScript gör entre hösten 2012• Microsoft upplever Pain• Exempelvis TS2012 och Office Live 365• Eric Gamma, Anders Hejlsberg & team• Hantera 100K+ rader av JavaScript (TFS2012)• Dogfooding• Fortfarande i Beta version• Open Source (CodePlex)
  12. 12. TypeScript Definition:• TypeScript is a language for application-scaleJavaScript development.• TypeScript is a typed superset of JavaScriptthat compiles to plain JavaScript.• Any browser. Any host. Any OS. Open Source.
  13. 13. Vad gör TypeScript?• Accepterar all JavaScript• Kompilerar till ren JavaScript• Assisterar oss att skriva bättre JavaScript
  14. 14. Vad gör TypeScript INTE?• Lägger inte till någon egen tolkning ellerannan typ av meta-data eller kod, bara renJavaScript.
  15. 15. Så varför använda TypeScript?• Mindre JavaScript kod ger ingen större fördelatt använda TypeScript• Större projekt och många kodrader medJavaScript hjälper TypeScript att organiseraoch hitta feltypningar innan runtime• Många av oss kommer från C# och liknandeOO bakgrund och behöver nu behärskaJavaScript, TypeScript gör övergången enklareoch stabilare
  16. 16. Invändningar• Jo, visst men vi har liknande verktyg idag:– jsLint– jsHint– Google Linter (Closure Compiler)– m.fl.
  17. 17. Stora fördelen (enligt mig)• Hålla ordning på alla JavaScript-ramverk är klurigt• TypeScript ger mig Intellisense i VS2012 och ävenandra IDE (TS LanguageService)– Sublime Text 2– WebStorm– PHPStorm– Emacs– VIM– WebMatrix– m.fl.• Modulhantering och dependency
  18. 18. Hur?• Kommer du ihåg den gamla TLB filerna?• Type Definitions (*.d.ts)– Jmf. header files i C/C++• jQuery och Node.js• Importera övrigt du behöver via:– NuGet– https://github.com/borisyankov/DefinitelyTyped
  19. 19. Installera TypeScript• Ladda ner: http://www.microsoft.com/en-us/download/details.aspx?id=34790• VS2012 PlugIn• NPM, Node Package Manager• Övriga IDE stöd
  20. 20. TypeScript features• Optional Type System (Type Inference)• Modules• Interfaces• Classes• Inheritance• Lambda (Arrow Syntax)• Static Checking• Code Re-factoring
  21. 21. Type Inference• Kompilatorn använder type inference för attautomatiskt hitta rätt datatyp att använda, omdet inte lyckas används JavaScript any somdefault.
  22. 22. Kompilatorn• Genererar en helt vanlig *.js fil• Option: generera type def file *.d.ts• Default EC5• Option EC3OBS: TypeScript använder sig av några EC6(ECMAScript) “features proposed” som ännu inte ärgodkända.
  23. 23. Kodexempel:• Variabler och deklarationer• Intellisense och Type Inference• Frameworks• Lambda• Klasser, arv och konstruktor• Funktioner• Interface• Moduler (externa och interna)
  24. 24. Programstruktur• Source file structure– implementation• module elements– module» modules• statement• function declaration• class declaration• interface declaration• module declaration• import declaration• export declaration• ambient declaration– declaration
  25. 25. Variabler och deklarationer• Type Decoration• Annotations• Optional (default is any)var svar s: string
  26. 26. Intellisense och Type Inference
  27. 27. Frameworks• Type Definitions
  28. 28. Lambda =>• Scope: this• Slipper använda function keyword• Snyggare (kortare) callbacks och inline
  29. 29. Klasser, arv och konstruktor• Slipp skapa en massa JavaScript kod för atthålla reda på prototyp• Constructor• Super• Scope
  30. 30. Funktioner
  31. 31. Interface• Definiera komplexa typer enkelt• Få stöd av IDE Intellisense• Implements• Funkar fint på alla typer
  32. 32. Moduler (externa och interna)• Jmf. C# Namespaces• Module = sets named internal module• Export = accessable outside the module
  33. 33. file4.ts
  34. 34. Dependencies(AMD, CommonJS, RequireJS)• Moduler kan extendas, delas mellan filer ochrefereras/// <reference path=“xxx.ts” />• Följer AMD conventions• Använd Require för att implementera AMD• Använd CommonJS för att exportera helamoduler till en annan modul• Skapa Dependency Chains
  35. 35. Sammanfattning• TypeScript är JavaScript för C# utvecklare!• JavaScript är överallt och oerhört kraftfullt• C# strukturerat tänkande ger resultat i TS• En underbar värld av fria paket ochramverk, skapade av utvecklare som irriteratsig på väldigt specifika problem en längre tid• Dive in, enjoy!
  36. 36. Kom igångInstallera via Node NPM• $ sudo npm install -g typescriptLadda ner TypeScript för VS2012• http://www.microsoft.com/en-us/download/details.aspx?id=34790
  37. 37. Rekommenderade länkarTypeScript offical home page, including specification, samples and play area• http://www.typescriptlang.org/TypeScript in four parts by John Papa and Dan Wahlin• http://www.johnpapa.net/typescriptpost1/• http://www.johnpapa.net/typescriptpost2/• http://www.johnpapa.net/typescriptpost3/• http://www.johnpapa.net/typescriptpost4/AngularJS and TypeScript by David Iffland• http://notebookheavy.com/2013/05/22/angularjs-and-typescript/Knockout.js and TypeScript• http://notebookheavy.com/2012/10/03/typescript-and-knockout-computed/Knockout.js Channel 9 by Steve Sanderson• http://channel9.msdn.com/Events/MIX/MIX11/FRM08Intro to Node.js by Ryan Dahl• http://www.youtube.com/watch?v=jo_B4LTHi3IInteresting point of view from Nicholas Zakas• http://www.nczonline.net/blog/2012/10/04/thoughts-on-typescript/TypeScript definition files• https://github.com/borisyankov/DefinitelyTyped
  38. 38. Tack för din tid!Happy DevSum 2013!@herkommer

×