TypeScript

Elad Katz

Script# to TypeScript:

The future of JS

Advancements in JS

• HTML5 and JS has progressed a lot in the last years:• Better server side technologies.• jQuery • Power of HTML5 new APIs• Better browsers• MV* patterns (MVC, MVVM etc)

Building HTML applications

is still very hard

Future client technologies

• What we still don’t have • Classes, Modules• Static typing.• Good intellisense• Good IDEs• Interfaces.• IoC / DI• Elegant syntax (lambda expressions etc.)


• ECMA Script 4 was targeted to be completed in 2008.

• ECMA Script 4 was going to add support for:• Classes, Static Typing, Modules, Algebraic data

types etc.• In other words – make it a real language.

• ECMA 4 was never released, and instead ECMA5 was released in 2009, adding support for strict mode.

• ECMA Script 6, codenamed Harmony is rumored to support all of those features. Release date unknown.


• ECMA Script 6 might be the answer… someday.

• Gmail is estimated to have ~ 500,000 LOC - how was it written?

JS – The assembly of the Web

• “JS is the x86 of the web” (Brendan Eich, inventor of JS)

• Turns out this is far from being a new idea - Google+ was written using Closure, MS Writes in Script#

• The idea is not to auto-generate JavaScript, but to compile to JS

What is Script#

• C# to JavaScript compiler• Improve productivity using Visual Studio

and .NET tools• Especially useful in large script apps

• Focus is on script authoring, not porting .NET apps• Doesn’t introduce heavy-weight

abstractions• Leverage existing script frameworks• Produce script that feels hand-written

Script#

Compiled, not generated

Demo

How script# works?

Private void String String[]

XMLHttpRequest

How script# works?

Bing Maps

• Existing shell was rewritten from scratch in Script#• ~50% smaller,

3sec faster • Ability to focus on

design and refactor confidently

• ~175KB script across all features

Hotmail and Messenger

Script# future safety

• Script# is a C# to JavaScript compiler by Microsoft’s Nikhil Kothary.

• Not an official MS product.• Partially open sourced under

MIT license• Static/Dynamic?

• Java- like syntax.• Complies to JavaScript

• Optional types.• Renewed DOM (makes jQuery obsolete? )• Elegant syntax (lambda expressions)• Native VM for Chrome to come.

Dart = static + dynamic

num Sum(num n1, num n2){ return n1 + n2;};

num n = Sum(5, 20);print(n);

num Sum(num n1, num n2) => n1 + n2;

String s1 = '9';String s2 = '1';

num n = Sum(s1, s2);print(n);

Replacing JavaScript?

Introducing TypeScript

TypeScript

Demo

Introducing TypeScript

• TypeScript offers classes, modules, and interfaces.

• These features are available at development time for high-confidence application development, but are compiled into simple JavaScript.

• TypeScript types let you define interfaces between software components and to gain insight into the behavior of existing JavaScript libraries.

• Preview version 0.8• Build in compliance with ECMAScript 6

Summary

• JavaScript slowly grows into a true client technology, but only in v6 will it be really mature.

• Compilers for Javascript are probably the future. At this point it’s still an open game• CoffeeScript, • Script#, • Dart• TypeScript

Elad Katz

Twitter: @eladkt

thank you

Documents

TypeScript