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/