TYPESCRIPTJS CODING JUST GOT BETTER!

ABOUT MEAmit Bezalel• UFT & SRF System Architect• Wrote: C++, Java, C#, JavaScript, now

Typescript• Recently read up on a ton of cloud architecture• Some articles on codeproject and HP Blog

Amit.Bezalel@hpe.com

JAVASCRIPTOn May 1995 a Netscape dev created a new programming languageIt took him 10 daysIt was called Mocha internallyThen LiveScriptAnd eventually JavaScript20 years later it’s the hottest language on the planet !

JAVASCRIPT IS HERE TO STAYGood things in JS:• The language of the browser• Widely used for Micro-Services• A Large community• A full stack language (Server + UI)• Very flexible• Asynchronous

Stack overflow

2016

JAVASCRIPT IS HERE TO STAYSome bad things:• No block scope• Over-flexible function definitions• No interfaces• Typing confusions• Performance pitfalls• The ‘this’ variable• Semicolon auto completion

Can JS coding get better!?

TS IMPROVES JSTS Solutions:• [√] No block scope• [√] Over-flexible function definitions• [√] No interfaces• [√] Typing confusions• [√] Performance pitfalls• [√] The ‘this’ variable• [x] Semicolon auto completion

+TypeScript keeps the good parts

WHY NOT TYPESCRIPT?Common complaints I heard:• Adds a compilation step

• you will have a build process anyway

• Relies on Microsoft • MS proved itself with C#

• Doesn’t prevent JS pitfalls • Many of them are prevented (as we saw)• The price of keeping JS flexibility

• The illusion of safety, but still JS • IMHO it is actually more safe given that you use types

• OO constructs may be abused • This also goes for Java / C#

IT’S TRENDY• TS surpasses all

other JS pre-compilers

• TS also passed SASS which is widely used.

• Fast growing trend line, indicating exponential growth in 2016

WHO USES TS

SOME QUOTESThere are Many blogs about TS, here are some quotes:

• Angular 2.0: “typescript makes code easier to read and understand”

• Telerik: “TypeScript may be the best of the many JavaScript front ends” (even though he didn’t want to use it at the end)

• Wix: “TypeScript generates JavaScript code that is easy to read and debug”

• Asana: “static typing allows us to skip checks that would otherwise be required at runtime”

• Microsoft:• VS Code – An IDE Written in Typescript for Typescript• The TS compiler itself is also written in TS (wikipedia)

WHAT IS ADDED TO JS?• Features:

• An optional type system• ES6, ES7 features• Adds missing OO features

• Compilation• Compile to any ES flavor (ES3 / ES5 / ES6)• Fast compilation

• IDE Support:• Good Code completion (Intellisence)• Wide adoption in modern IDEs• Better navigation and readability (jump to def,

refactoring)

THE TS PROJECT• Opensource (github) • Apache 2.0 license• https://github.com/Microsoft/TypeScript

• TS is Written in TS:• https://github.com/Microsoft/TypeScript/tree/master/src/compi

ler

• Live community (bugs / suggesstions / pull requests)• https://

visualstudio.uservoice.com/forums/293070-visual-studio-code

LANGUAGE FEATURES• Basic Types• Classes (Inheritance, private members)• Interfaces• Generics• Enums• Mixins• Let• Async await• Arrow functions (obj) => {}• Modules• Parameter default values

ES5 / ES3 GENERATION

ES6 GENERATION

TYPESCRIPT IDE SUPPORTTS Code completion

TS Debugger

IDE Performance

Cross platform

Maturity

Release & activity

Needs proj / sln files

VS Code

Excellent Good Excellent Yes v1.0 Monthly no

IntelliJ 14+ Webstorm

Ok Good Ok (high RAM)

Yes Mature Every Several months

no

Visual studio 2013+

Good Good Bad (For large TS projects)

No Mature 3 months yes

Eclipse TypEcs

Ok Ok Ok Yes v1.0 no recent activity, 6 months

no

WHAT IS VSCODE?• A new fully featured IDE from Microsoft• Very lightweight• MIT licensed opensource in GitHub• Cross platform (mac/ linux /windows)• Written over electron (V8 desktop platform)• Everything is code (including project settings)• Released v1.0 five days ago!• A new release each month• Huge amount of features in each release• 500,000 users and counting

Releases blog:https://code.visualstudio.com/blogs

COMMONJS & TYPINGS• Importing npm modules

• Using import / var with require• Getting type information for npms

• d.ts files• Definitely typed git repo (ambient)• Old reference comments (tsd) vs. new (typings) method

• Keeping types across files / modules• Auto generated typing files (d.ts)• Installing types from original repo• The typings install commandline

Demo

OUR STORY• Started out with Pure NodeJS 2~4

• Added some more people ~6• JS Code is hard to understand…

• Moved to TS• Now we are ~18 and growing!

• Using typescript in UI side as well as backend• 20+ micro services in our architecture• Using both intelliJ 15 & VSCode (dev’s choice)

OUR CONCLUSIONSOur Cons:- Smallish learning curve- Mixing JS / TS possible, problematic inheritance

Our Pros:+ Readability and code navigation increased+ Refactoring & Code completion+ Types are important+ Classes and interfaces give structure+ TS Scales, new team members benefit

MICRO SERVICES• Decoupled, services• Single responsibility• Independent technology stacks• Communication via Rest / WS APIs• Swagger definitions

Typescript benefits:• Swagger definitions can be generated from classes

(including types)• Function signature checking adds interface enforcement

TS WITH NODEJSBenefits:• Rest body definitions can be generated from object definitions• Code completion helps keep the correct structures• Types are enforced for incoming data

Stack overflow

2016

WEB UI & TYPESCRIPT

• Angular 2.0 is written in TypeScript• You get up to date definitions• Angular tools are ready for TS usage

• Typescript debugging in browser (via mapping & IDE extension)

• A short learning curve (close to JS)

WHAT’S NEXT

The future of typescript (v2.0):• ReadOnly & abstract Properties• Async / await support for ES5/ES3 generation• Private/protected constructors• Type definition for “this” • Runtime Type checking for properties• Much more…

Links:• https://github.com/Microsoft/TypeScript/wiki/Roadmap