Using TypeScript at Dashlane

Using TypeSc ript at

Dashlane

+ =

The programming language that we use

these days for our JavaScript projects

The Problem

Finding a Solution

Settling on TS

How it's been so far

The Problem

New Large -Scale Proje c ts

These projects have to run in a JS

environment: the browser

J S is nic e , but...

It's a dynamic language

No static type-checking

A lot of errors can go unnoticed when

developing

Quite easy to break other people's code

A Quick Example

f u n c t i o n t r a i n i n g F l i g h t ( f l i g h t P l a n , p i l o t ) {

i f ( r e q u e s t i n g F l y b y ) {

v a r c s = p i l o t . u n i t C a l l s i g n ( ) ;

r e t u r n ' N e g a t i v e , ' + c s + ' , t h e p a t t e r n i s f u l l ' ;

}

}

t r a i n i n g F l i g h t ( s o m e P l a n , m a v e r i c k ) ;

/ / R e s u l t : ' N e g a t i v e , G h o s t r i d e r , t h e p a t t e r n i s f u l l '

A Quick Example

f u n c t i o n t r a i n i n g F l i g h t ( f l i g h t P l a n , f i g t e r J e t , p i l o t ) {

i f ( r e q u e s t i n g F l y b y ) {

v a r c s = p i l o t . u n i t C a l l s i g n ( ) ;

r e t u r n ' N e g a t i v e , ' + c s + ' , t h e p a t t e r n i s f u l l ' ;

}

}

/ / Somewhere e l s e i n t h e c o d e , t h i s f u n c t i o n c a l l s t a y s unchanged

t r a i n i n g F l i g h t ( s o m e P l a n , m a v e r i c k ) ;

The above code compiles fine, but fails at runtime:

Uncaught

r o p e r t y

ed

Ty p e E r r o r : Can n o t r e a d p

' u n i t C a l l s i g n ' o f u n d e f i n

Not so nice...

What we 'd rather have

A static type system, to catch this type of error early and

make collaboration easier on a large project Produce

more robust code, more resilient to changes Must still be

able to run in the browser

Finding a Solution

Compile -To-J S Languagest r a i n i n g F l i g h t = ( f l i g h t P l a n , p i l o t ) - >

i f p i l o t . r e q u e s t i n g F l y B y

t h r o w ' P a t t e r n I s F u l l '

t r a i n i n g F l i g h t s o m e P l a n , p i l o t

Write in another

language

Vanilla JS output

Compiler step

v a r t r a i n i n g F l i g h t ;

t r a i n i n g F l i g h t = f u n c t i o n ( f l i g h t P l a n , p i l o t ) {

i f ( p i l o t . r e q u e s t i n g F l y B y ) {

t h r o w ' P a t t e r n I s F u l l ' ;

}

} ;

t r a i n i n g F l i g h t ( s o m e P l a n , p i l o t ) ;

Language s Galore...

...but not many matching

our requirements:Statically typed

Actively supported

Good adoption & community support

Good toolchain

We narrowed it down to TS

and one main alternative ...

ES6 (+ Flow)

ES6 is the next big version of

JavaScript

It fixes a number of JS quirks

It's being implemented in

modern browsers, but still

requires a compiler for now

Flow adds static typing to JS

Developed by Facebook

/ * @flow * /

f u n c t i o n f o o ( x : s t r i n g , y : n u m b e r ) :

s t r i n r e t u r n x . l e n g t h * y ;

}

Still not the pe rfe c t answe r

Without Flow, ES6 doesn't offer static type-checking

Flow is very young: no adoption/community

Little available typings for 3rd-party libraries Windows

support non-existing for a long time, now in its very early

stages

Se ttling on TS

Why

?

The TS language

A superset of JavaScript

A statically typed language

Open-source, developed by Microsoft

Static typing, OO constructs

enum e ngi ne T yp e {

TURBINE,

TURBOJET,

TURBOFAN

}

i n t e r f a c e P l a n e {

e n g i n e T yp e : EngineType

t a k e O f f : ( ) => v o i d ;

l a n d : ( ) => v o i d ;

}

c l a s s F14 i m p l e m e n t s P l a n e {

/ / C l a s s i m p l e m e n t a t i o n

}

f u n c t i o n g e t E n g i n e T y p e s ( p l a n e s : P l a n e [ ] ) : E n g i n e T yp e [ ] => {

r e t u r n p l a n e s . m a p ( p l a n e : P l a n e => p l a n e . e n g i n e T y p e ) ;

}

New ES Features

i m p o r t { F i g h t e r J e t } from ' . / P l a n e s ' ; / / Module s y n t a x

/ / S p r e a d o p e r a t o r

f u n c t i o n d o g F i g h t ( f i g h t e r : F i g h t e r J e t , . . . o p p o n e n t s : F i g h t e r J e t [ ] ) : F i g h t e r J e t

/ / New ` c o n s t ` and ` l e t ` keywords

c o n s t maxSpeed = 1000;

/ / D e s t r u c t u r i n g

l e t [ f i r s t O p p o n e n t , . . . r e s t ] = o p p o n e n t s ;

i f ( j e t 1 . h a s M i s s i l e L o c k ( f i r s t O p p o n e n t ) ) {

/ / T e m pl a t e s t r i n g s

c o n s o l e . l o g ( ` m i s s i l e l o c k a c q u i r e d on $ { f i r s t O p p o n e n t . p i l o t . c a l l s i g n } ` )

}

}

Working with 3rd-party code

i n t e r f a c e Async {

e a c h < T > ( a r r : T [ ] , i t e r a t o r : A s y n c I t e r a t o r < T > , c a l l b a c k ? : E r r o r C a l l b a c k ) : v o i d ;

e a c h S e r i e s < T > ( a r r : T [ ] , i t e r a t o r : A s y n c I t e r a t o r < T > , c a l l b a c k ? : E r r o r C a l l b a c k ) : v o i d

/ / . . .

}

d e c l a r e v a r a s yn c : A s yn c ;

d e c l a r e module " a s y n c " {

e x p o r t = a s yn c ;

}

Integration with 3rd-party libraries through

definition files

Working with 3rd-party code

Public repository of typings available on github

Typings are maintained by the community Most

widely-used npm packages are available

Community & Support

Frequent releases (at

least every 2 months in

2015)

Active community

Adopted by several

companies and big

projects

How It's Been So Far

New projects being written directly in TS

Older projects being refactored to TS for

interoperability

Adoption

Pleasant to work with

Smooth learning curve

Big changes in the code base are much

easier

Tooling is awesome! Great with MS's Visual

Studio Code: IntelliSense, error reporting It's

still just JS! We can require() compiled

Maverick code from other vanilla JS modules

The Good Parts

A Quick Examplef u n c t i o n t r a i n i n g F l i g h t ( p l a n : F l i g h t P l a n , j e t : F i g h t e r J e t , p i l o t : F i g h t e r P i l o t ) : s t r i n g

i f ( r e q u e s t i n g F l y b y ) {

l e t c s : s t r i n g = p i l o t . u n i t C a l l s i g n ( ) ;

r e t u r n ` N e g a t i v e , $ { c s } , t h e p a t t e r n i s f u l l ` ;

}

}

/ / M i s s i n g t h e ' j e t ' p a r a m e t e r

t r a i n i n g F l i g h t ( s o m e P l a n , m a v e r i c k ) ;

We now get a compile-time error:

In spite of the shared typings repositories,

working with external libraries can sometimes

be painful

Public typings not always up-to-date...

...correcting and sharing the corrected

typings can be a a chore

The Not-So-Good Parts

Questions?

We’re changing the world… one password at a time

Dashlane wants to make identity and payment simple and secure everywhere!

31

Want to be a part of life in the Dashlane?

Visit dashlane.com/jobs for all the info!

Dashlane is a premier, award-winning password manager and digital wallet,

intrinsically designed to make identity and payments simple and secure on every

website and every device.

We’re a rapidly growing, tech startup using the world’s best security and privacy

architecture to simplify the lives of more than 3 billion Internet users worldwide.

Since our first product launch in 2013, our brilliant team of engineers and developers

tirelessly work on new coding challenges, build code using the latest up-to-date

frameworks for native development across desktop and mobile, use cutting-edge

web service architecture, and are at the forefront of building applications that help

millions of people every day!

So far, all of our hard work has been paying off! Dashlane was recently recognized

by Google as one of the “Best of 2015” apps! Google also recognized our Android

password manager as an Editors’ Choice winner on the Google Play Store, and

selected Dashlane to demo its adoption of Android M fingerprint technology at

Google I/O!

We work with the latest technology!

Dashlane is dedicated to building high-quality user experiences on Mobile,

Desktop, and on the web using the latest up-to-date technologies and

languages.

See our code in action! Check out some of our projects on Github!

Github.com/Dashlane

In addition, each member of the Dashlane team can take some time to share his

insights in Tech Conferences and become a thought leader in the tech community.

32

Alexis Fogel

@ Droid Con

Goo.gl/7h4guk

Emmanuel Schalit

@ The Dublin

Web Summit

Goo.gl/M4H7vg

Emmanuel Schalit

@ Le Wagon

Goo.gl/kvPLG0

Desktop Mobile

Web App/Server Security

Ready to join #LifeInTheDashlane?

We’re filling our ranks from top to bottom with some of the smartest and

friendliest developers and engineers in the industry! Come join us! Visit

Dashlane.com/jobs to learn more about joining the Dashlane team!

Also visit us here:

September 2015 Confidential

33

Dashlane.com/stackoverflow Dashlane.com/linkedin

Dashlane.com/vimeo Dashlane.com/blog