Why we decided to use TypeScript on top of JavaScript at Dashlane

1. Using TypeScript at
Dashlane
+ =

2. The programming language that we use
these days for our JavaScript projects

3. The Problem
Finding a Solution
Settling on TS
How it's been so far

4. The Problem

5. New Large-Scale Projects
These projects have to run in a JS
environment: the browser

6. J S is nice, 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

7. 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 '

8. 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 in 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 Er r o r : Cannot 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

9. Not so nice...

10. 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

11. Finding a Solution

12. Compile-To-J S Languages
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 p i l o t . r e q u e s t i n g F l y B y
throw ' 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 somePlan , 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 ) {
throw ' 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 ) ;

13. Languages Galore...

14. ...but not many matching
our requirements:
Statically typed
Actively supported
Good adoption & community support
Good toolchain

15. We narrowed it down to TS
and one main alternative...

16. 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 fo o ( x : s t r i n g , y : number) :
s t r i n r e t u r n x . l e n g t h * y ;
}

17. Still not the perfect answer
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

18. Settling on TS
Why
?

19. The TS language
A superset of JavaScript
A statically typed language
Open-source, developed by Microsoft

20. Static typing, OO constructs
enum engineType {
TURBINE,
TURBOJET,
TURBOFAN
}
i n t e r f a c e P l a n e {
engineType : EngineType
t a k e O f f : ( ) => vo i d ;
l a n d : ( ) => vo i d ;
}
c l a s s F14 implements P l a n e {
/ / C l a s s i m p l e m e nt at io n
}
f u n c t i o n ge t E n gi n e T yp e s ( p l a n e s: P l a n e [ ] ) : EngineType[] => {
r e t u r n p l a n e s . m a p ( p l a n e : Pl a n e => p l a n e . e n g i n e T yp e ) ;
}

21. 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 yn t a x
/ / Spread o p e r a t o r
f u n c t i o n dogFight ( 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 ) ) {
/ / Template 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 } ` )
}
}

22. 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 : As yn 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 ) : vo 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 yn 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 ) : vo i d
/ / . . .
}
d e c l a r e v a r async : Async;
d e c l a r e module " a s yn c " {
e x p o r t = async ;
}
Integration with 3rd-party libraries through
definition files

23. 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

24. Community & Support
Frequent releases (at
least every 2 months in
2015)
Active community
Adopted by several
companies and big
projects

25. How It's Been So Far

26. New projects being written directly in TS
Older projects being refactored to TS for
interoperability
Adoption

27. 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

28. 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 ( 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 , ${cs}, t h e p a t t e r n i s f u l l ` ;
}
}
/ / Missing 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:

29. 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

30. Questions?

31. 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!

32. 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

33. 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