Using TypeScript at Dashlane
Transcript of Using TypeScript at Dashlane
![Page 1: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/1.jpg)
Using TypeSc ript at
Dashlane
+ =
![Page 2: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/2.jpg)
The programming language that we use
these days for our JavaScript projects
![Page 3: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/3.jpg)
The Problem
Finding a Solution
Settling on TS
How it's been so far
![Page 4: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/4.jpg)
The Problem
![Page 5: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/5.jpg)
New Large -Scale Proje c ts
These projects have to run in a JS
environment: the browser
![Page 6: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/6.jpg)
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
![Page 7: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/7.jpg)
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 '
![Page 8: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/8.jpg)
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
![Page 9: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/9.jpg)
Not so nice...
![Page 10: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/10.jpg)
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
![Page 11: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/11.jpg)
Finding a Solution
![Page 12: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/12.jpg)
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 ) ;
![Page 13: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/13.jpg)
Language s Galore...
![Page 14: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/14.jpg)
...but not many matching
our requirements:Statically typed
Actively supported
Good adoption & community support
Good toolchain
![Page 15: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/15.jpg)
We narrowed it down to TS
and one main alternative ...
![Page 16: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/16.jpg)
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 ;
}
![Page 17: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/17.jpg)
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
![Page 18: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/18.jpg)
Se ttling on TS
Why
?
![Page 19: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/19.jpg)
The TS language
A superset of JavaScript
A statically typed language
Open-source, developed by Microsoft
![Page 20: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/20.jpg)
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 ) ;
}
![Page 21: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/21.jpg)
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 } ` )
}
}
![Page 22: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/22.jpg)
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
![Page 23: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/23.jpg)
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
![Page 24: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/24.jpg)
Community & Support
Frequent releases (at
least every 2 months in
2015)
Active community
Adopted by several
companies and big
projects
![Page 25: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/25.jpg)
How It's Been So Far
![Page 26: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/26.jpg)
New projects being written directly in TS
Older projects being refactored to TS for
interoperability
Adoption
![Page 27: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/27.jpg)
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
![Page 28: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/28.jpg)
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:
![Page 29: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/29.jpg)
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
![Page 30: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/30.jpg)
Questions?
![Page 31: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/31.jpg)
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!
![Page 32: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/32.jpg)
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
![Page 33: Using TypeScript at Dashlane](https://reader033.fdocuments.in/reader033/viewer/2022050614/588952b51a28abde5a8b7919/html5/thumbnails/33.jpg)
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