Your SlideShare is downloading. ×
TypeScript DevSum 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

TypeScript DevSum 2013

4,459
views

Published on

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

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,459
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TypeScriptDevSum 2013Micael Herkommer
  • 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. 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. Micael Herkommer• Webbutveckling sedan klassisk ASP• Backend och integrationsfokus• WPF• ALM/TFS• Tidigare JavaScript-motståndare
  • 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. 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. • CommonJS• RequireJS (Module loader)• AMD (Asynchronous Module Definition)• Modernizr (feature detection)• ExpressJS (MVC Server-side)och många många fler…
  • 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. 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. 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. 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. 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. Vad gör TypeScript?• Accepterar all JavaScript• Kompilerar till ren JavaScript• Assisterar oss att skriva bättre JavaScript
  • 14. Vad gör TypeScript INTE?• Lägger inte till någon egen tolkning ellerannan typ av meta-data eller kod, bara renJavaScript.
  • 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. Invändningar• Jo, visst men vi har liknande verktyg idag:– jsLint– jsHint– Google Linter (Closure Compiler)– m.fl.
  • 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. 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. 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. TypeScript features• Optional Type System (Type Inference)• Modules• Interfaces• Classes• Inheritance• Lambda (Arrow Syntax)• Static Checking• Code Re-factoring
  • 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. 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. Kodexempel:• Variabler och deklarationer• Intellisense och Type Inference• Frameworks• Lambda• Klasser, arv och konstruktor• Funktioner• Interface• Moduler (externa och interna)
  • 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. Variabler och deklarationer• Type Decoration• Annotations• Optional (default is any)var svar s: string
  • 26. Intellisense och Type Inference
  • 27. Frameworks• Type Definitions
  • 28. Lambda =>• Scope: this• Slipper använda function keyword• Snyggare (kortare) callbacks och inline
  • 29. Klasser, arv och konstruktor• Slipp skapa en massa JavaScript kod för atthålla reda på prototyp• Constructor• Super• Scope
  • 30. Funktioner
  • 31. Interface• Definiera komplexa typer enkelt• Få stöd av IDE Intellisense• Implements• Funkar fint på alla typer
  • 32. Moduler (externa och interna)• Jmf. C# Namespaces• Module = sets named internal module• Export = accessable outside the module
  • 33. file4.ts
  • 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. 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. 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. 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. Tack för din tid!Happy DevSum 2013!@herkommer

×