Conference Typescript2 Dashlane
Merci à Dashlane de nous recevoir. Belle application sur tablette à l'entrée où l'on nous demande pour des raisons de sécurité notre prénom, nom, email, entreprise... Et ce n'est pas tout: l'application nous prend en photo, cheese. Un badge est ensuite imprimé avec nos prenom+nom+entreprise+photo, très pratique poru reconnaitre ceux qui sont à la conférence! Bravo Dashlane pour cette très bonne organisation
Qu'est-ce que Dashlane? Un Password manager qui permet de gérer l'identité et les paiements en ligne.
Constat: tout le monde utilise 2 ou 3 mots de passe. Dashlane résoud ce souci en centralisant les mots de passes de manière chiffrée dans le cloud: on navigue en utilisant le client Dashlane et les mots de passes se remplissent dans la form et on est authentifié facilement.
6 milions d'utilisateurs dans le monde
Stack desktop C++ Android, Objective-C.
Node AWS, react.JS, NodeJS, Amazon web services
Les données sont cryptées en AES256.
On recrute: ceux qui sont intéréssés peuvent se présenter.
Pour la conf, 6 mois de Dashlane offerts: utiliser le code de promotion TYPESCRIPT
Paul présente le meetiup et remercie à Dashlane.
Une question? Posez-la ici
Yves-Emmanuel Jutard (Dashlane) pour le talk 1: Power Leveling your Typescript
http://fr.slideshare.net/Offirmo
https://speakerdeck.com/offirmo/power-leveling-your-typescript
Monter très rapidement en compétence, comme si on jouait à World of Warcraft pour monter rapidement les nuveaux. Si vous êtes débutants, vous allez devenir un grand maitre du typescript.
Où aller? Sur le site officiel du typescript.
Pourquoi? Parce qu'on veut un "linter". Javascript a un linter, typescript a un linter.
Je passe à Typescript parce qu'il est créé par Microsoft, et que Google l'utilise dans AngularJS2.
Les pours et les contres
Les pours
Auto-completion, documentation des types, aide au refactoring
Les contres
Nouveau langage à apprendre, stack plus compliquée, on ne peut pus utiliser nos outils javascript, il y a des bugs
On a l'impression qu'il y a plus d'inconvenients que d'avantages, mais en fait, sur du long terme, le typescript se révèlera gagnant
Quick check
Est-ce que vous avez une équipe? ...
On fait aussi des tests unitaires, de la code review en typescript.
Une question? Posez-la ici
Nouvelle quette: faire un Hello World en typescript
Aller sur typescript2 au lieu de la version 1
mettre à la racine le tsconfig.json, regarder la doc
Il y a des IDEs qui compilent tout seul. On peut transpiler du JS vers un autre JS. Le compilateur typescript va catcher les erreurs, on conrole la sortie là où l'on veut que les fichiers javascript arrivent. On peut dire quels fichiers sont en typescript et donc ceux qu'on doit compiler.
Side-quest: "know your transpiler"
J'écris mon typescript en ES6, targer, ES6, module = commonjs, et je l'execute en node V6 avec node en commonjs
Je peux aussi targeter node4 qui ne gère que 57% d'ES6, astuce, on passe par du code intermédiaire, et babel avec un es2015-node4
Nouvelle quête: "Write types"
On peut combiner les types, intéréssant
Par défaut en typescript, tous les types sont nullables
je créé une variable de type Foo, undefined, ca passe
Nouveauté de typescript2, on peut interdire les undefined
Enum vs unions
Astuce: on peut déclarer le même enum avec des pipes
Type vs Interface
Astuce: plutot utiliser les interfaces pour grouper et utiliser les types pour définir des alias
Module detection
Argument destrcturing
Une fonction prend 2 objets en paramètres, avec les { et }
Type limitations
object.assign()
.bind()
Une question? Posez-la ici
Casting: as X,as any as X
Ne pas utiliser le "any" en typescript, le caster vers quelquechose.
Si on veut forcer un type dans un autre, il faut faire un double cast: x as any as person.
Quand dans un test on veut mocker les datas par exemple
Overloading
2 fonctions avec le même nom mais avec des paramètres différents qui prend soit une string, ou plusieurs strings en paramètres
Hashes and JSON
Json peut être déclaré en type
typeof
on peut récupérer le type d'une variable
smell, hack, ca existe, mais pas évident à utiliser.
integrated libs
--lib, dom, es6, dom.iterable, webworker
Use a npm module
Le typescript ne peut pas consommer du javascript. La solution pour ca c'est d'utiliser un fichier qui va anoter . On l'installe avec npm I -D @types/lodash
Back-end
Une question? Posez-la ici
Frond-End
Webpack, react
Exemple de stack typescript dans un navigateur
npm-run +cpx pour transpiler en mode --watch, c'est transpilé à la volée en permanence
Universal (module)
une version node stable, ES6, ou UMD
NE JAMAIS UTILISER EXPORT DEFAULTS
Exemple d'un module NPM Hello World que l'on consomme dans node
Sub quests
typescript formatter: tsfmt...
Typescript, un superset de javascript, comme C++ est un superset de C
En fait c'est un superset du javascript bien écrit.
On peut demander de générer du javascript, MEME s'il y a des bugs
Une question? Posez-la ici
Félix BILLON (Dcube) pour le talk 2: Gestion des .d.ts avec Typescript 2.0
Ficher de définition ambiant. Le mot "ambiant" présente quelque chose qui fait partie de notre environnement: extension. "d.ts" . Si on ecrit du code javascript, on utilise un dts pour pouvoir utiliser notre code javascript dans notre projet typescript.
Démo avec Visual studio code sous Windows 10
Exemple avec la librairie angular typé en any:
let angular: any;
Une fois le fichier de définition chargé, j'ai accès à l'autocomplétion
astuce, dans le tsconfig.json , mettre "déclaration:true"
Référencer les.d.ts
Créer un fichie .d.ts
Une question? Posez-la ici
Dépendance entre les fichiers de définitions .d.ts
exemple un fichier de définitions pour étendre le namespace angular, c'est plus pratique en typescript 2.0
Où récupérer les définitions?
repo sur GIT, DefinitelyTyped(DT): repo git.
angular, animate, jquery, undescore, TSD: Typescript Definition manager (TSD)
tsd install jquery --save
TSD: demo
installation d'angular avec jsquery en dépendances. Le tsd.d.ts est intégré dans le tsconfig.json
Typing est devenu la référence qui permet de trouver les fichiers de définition dans plusieurs sources DT ,npm, github, bower, bitbucket...
Les définitions peuvent être wrappées dans un namespace
Exemple: typings install dt~jquery ...
Typescript2, ideal pour gerer les .dt.dts
Plus de CLI externe nécéssaire.
Options du compilateur: on peut rajouter un chemin vers les typings en local
Autre options où 'on peut préciser les types que l'on souhaite utiliser.
Une question? Posez-la ici
Charly POLY (Dashlane) pour le talk 3: Decorators in practice
comment typescript gère les decorators
feature experimental sur typescript, utiliser un flag
Qu'est-ce qu'un decorator: fonction que l'on va appliquer à un contexte (classe méthode) qui modifie le comportement d'une méthode existante. Exemple en python avec le framework Flask. O Sinatra en ruby.
Angular utilise pas mal les décorators, cela permet de faire de l'AOP, diviser les responsabilités, code plus maintenable, syntax sugar...
5 types de décorators
classes décorators, methods, decorators, param decorators, accessors decorators, property decorators.
3 facons de les definir un decorator:
@classDecorator, decorator factory, sans devoir se soucier de l'implementation, configurable decorator
Le method decorator est le plus utilisé
en javascript, un prototype correspond à un properti editor: champ value (valeur de la propriete ou a fonction rattachée la clé dans le prototype)
At transpilling time
Typescript crée un appel à la méthode "_decorate"
1er rgument: liste de décorateurs, prototype, nom de la méthode, et null
Dans le cas d'un décorateur de méthode, on overide la méthode.
Exemples de decorators: "depecrated-decorator", decorator factory
Projet avec @SpotifyQuery, avec des requetes REST et GraphQL
requete avec GraphQL pour récupérer les sons, les artistes, etc. Et donc le decorator ici fait la query et récupre les données: la méthode est allégée et ne traite plus que les données, au lieu de les rappratrier aussi.
Voir fonction @SpotifyQuery implementation
Souvenez-vous, Typescript chez Xebia http://blog.xebia.fr/2014/05/09/xebia-organise-un-hands-on-typescript-le-15-mai-prochain/